Firefox和Opera中的Webfont平滑和抗锯齿

时间:2012-07-12 20:05:11

标签: css css3 fonts antialiasing webfonts

我的网站上嵌入了一些自定义的webfonts,我使用的是

之类的东西
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

设置渲染输出的样式。这在Safari和Chrome中运行良好。我得到更清晰的边缘和更细的线条。

在Firefox中有没有办法做这样的事情?还是歌剧?

8 个答案:

答案 0 :(得分:191)

由于版本15.0 -webkit-font-smoothing: antialiased也适用于Opera,因此Opera由Blink提供支持。

Firefox最终添加了一个属性来启用灰度抗锯齿。经过一段很长的discussion,它将在第25版中提供另一种语法,它指出此属性仅适用于OS X.

-moz-osx-font-smoothing: grayscale;

这应该可以修复模糊的图标字体或深色背景上的浅色文字。

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

您可以阅读包含Sass mixin的my post about font rendering on OSX来处理这两个属性。

答案 1 :(得分:15)

好吧,Firefox不支持这样的东西。

在Mozilla的参考页面中指定font-smooth,因为CSS属性控制渲染字体时的抗锯齿应用程序,但此属性已从此规范删除,目前尚未在标准轨道上。

此属性仅在Webkit浏览器中受支持。

如果您想要替代方案,可以查看:

答案 2 :(得分:10)

案例:在深色背景上使用锯齿状网页字体的浅色文字Firefox(v35)/ Windows
示例:Google Web Font Ruda

令人惊讶的解决方案 -
将以下属性添加到应用的选择器:

selector {
    text-shadow: 0 0 0;
}

实际上,结果与text-shadow: 0 0;相同,但我喜欢明确设置模糊半径。

这不是一个通用的解决方案,但在某些情况下可能会有所帮助。此外,到目前为止,我还没有经历(也没有经过彻底测试)此解决方案的负面性能影响。

答案 3 :(得分:7)

在遇到问题之后,我发现我的WOFF文件没有正确完成,我向FontSquirrel发送了一个新的TTF,这给了我一个在Firefox中顺利的WOFF而没有添加任何额外的CSS

答案 4 :(得分:5)

我找到了这个链接的解决方案: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

循序渐进的方法:

  • 将您的字体发送到WebFontGenerator并获取zip
  • 在Zip文件中找到TTF字体
  • 然后,在linux上,执行此命令(或由apt-get install ttfautohint安装):
    ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
  • 然后,再一次,在WebFontGenerator上发送新的TTF文件(neosansstd-black.changed.ttf)
  • 您可以使用所有的网页字体获得完美的Zip!

我希望这会有所帮助。

答案 5 :(得分:4)

...在body标签中,这些内容和字体在一般情况下看起来更好......

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

答案 6 :(得分:3)

当文字颜色较暗时,在Safari和Chrome中,我的文字笔画css属性效果更好。

-webkit-text-stroke: 0.5px #000;

答案 7 :(得分:-4)

添加

font-weight: normal;

你的@ font-face字体将修复Firefox中的粗体外观。