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

Question

我在我的网站上嵌入了一些自定义的webfonts,我使用的东西就像

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

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

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

Answer 1

由于Version 15.0的-webkit-font-smoothing: antialiasedOpera也适用于Opera,因此Opera由Blink提供支持.

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

-moz-osx-font-smoothing: grayscale;

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

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

您可以阅读我关于OSX上字体渲染的帖子,其中包括用于处理这两个属性的Sass mixin.

Answer 2

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

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

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

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

好吧,我遇到的问题是我的字体看起来像"大胆"并且在firefox和opera中臃肿.使用`-webkit-font-smoothing:antialiased;`我可以在Safari和Chrome中修复它.我很想找到任何"黑客"来让我的字体在Firefox中更轻一些.我想过只在moz中应用一个白色的"text-shadow",但是没有办法应用一个"插入"文本阴影来使字体更轻. (2认同)

Answer 3

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

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

selector {
    text-shadow: 0 0 0;
}

实际上,结果与之相同text-shadow: 0 0;,但我喜欢明确设置blur-radius.

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

Answer 4

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

Answer 5

循序渐进的方法:

将您的字体发送到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和你所有的webfonts!

我希望这将有所帮助.