html - 带锯齿的 CFF 字体

Question

我在我的页面上使用了 CFF 字体，但它在浏览器中显示为锯齿状。

在这里你可以看到我是如何使用它的:JSfiddle

HTML

<p>Hello everyb@dy!</p>

CSS

body{
    font-size: 10px;
}

@font-face {
    font-family: Planer_ExtraLight;
    src: url('http://www.digitalpersone.com.br/projetos/fonts/planer_extralight.svg#Planer_ExtraLight') format('svg'),
        url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.otf'),
        url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.eot');   
}

p{
    font-family: Planer_ExtraLight;
    font-size: 4em;
}

有人可以帮我吗？

Answer 1

这应该有效:http://jsfiddle.net/Allendar/aKGam/1/

p {
    font-family: Planer_ExtraLight;
    font-size: 4em;
    font-smooth: subpixel-antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
}

结果

更新

检查 MDN .它似乎在大多数浏览器中不起作用。您可能会尝试研究其他浏览器中 -webkit-font-smoothing 的类似功能，以添加到您的样式中。

我在 Safari 中看到的质量提升是巨大的!

更新 2

我发现这可能适用于 Firefox；

browser.display.auto_quality_min_font_size = 0; // default = 20

.. 越低意味着质量越好，渲染越慢，反之亦然。

更新 3

这也很有趣 ( https://developer.mozilla.org/en-US/docs/CSS/text-rendering );

text-rendering: geometricPrecision;