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

我在我的网站上embedded了一些自定义的网页字体,我使用类似的东西

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

风格我的渲染输出。 这在Safari和Chrome中运行得很好。 我得到更清晰的边缘和更细的线条。

有什么办法做这样的东西在Firefox? 还是Opera?

由于Opera自15.0版开始支持Blink,所以-webkit-font-smoothing: antialiased也可以在Opera上运行。

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

 -moz-osx-font-smoothing: grayscale; 

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

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

你可以阅读我的文章,关于OSX上的字体渲染,其中包括一个Sass混合来处理这两个属性。

那么,Firefox不支持这样的。

在Mozilla的参考页面中指定了font-smooth作为CSS属性来控制渲染字体时的消除锯齿的应用程序,但是此属性已从此规范中删除 ,并且当前不在标准轨道上。

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

如果你想要一个替代,你可以检查这个:

  • 文字阴影消除锯齿| Philip Renich,网站 – 博客
  • cufón – 为人民的字体

案例:在深色背景上使用jaggy web字体的轻型文本Firefox(v35)/ Windows
示例: Google Web字体Ruda

令人惊讶的解决scheme –
向应用select器添加以下属性:

 selector { text-shadow: 0 0 0; } 

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

这不是一个通用的解决scheme,但在某些情况下可能会有所帮助。 此外,我还没有经历(也没有彻底testing)迄今为止该解决scheme的负面性能影响。

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

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

一步一步的方法:

  • 将您的字体发送到WebFontGenerator并获取压缩文件
  • findZip文件上的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与所有的网页字体!

我希望这会有所帮助。

…在身体标签和这些内容和字体看起来更好一般…

 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; } 

当文本的颜色是黑暗的,在Safari和Chrome中,我有更好的结果与文本笔画CSS属性。

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

添加

 font-weight: normal; 

到您的@ font-face字体将修复在Firefox的大胆的外观。