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;