带锯齿的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;