我在我的页面上使用了 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;
}
有人可以帮我吗?
最佳答案
这应该有效: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;
关于html - 带锯齿的 CFF 字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15745985/