CSS Firefox 和 Opera 中的 Webfont 平滑和抗锯齿
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11459746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webfont Smoothing and Antialiasing in Firefox and Opera
提问by matt
I have custom-made web fonts used on my site. To style my rendering output, I used the following code:
我在我的网站上使用了定制的网络字体。为了设置渲染输出的样式，我使用了以下代码：
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
This works fine on Safari and Chrome (edges are sharper and lines are thinner). Is there any way of implementing the same style on Firefox and Opera?
这在 Safari 和 Chrome 上运行良好（边缘更清晰，线条更细）。有没有办法在 Firefox 和 Opera 上实现相同的风格？
回答by Maximilian Hoffmann
As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiaseddoes also work on Opera.
由于 Opera 由 Blink 提供支持，因为 15.0 版-webkit-font-smoothing: antialiased也适用于 Opera。
Firefox has finally added a property to enable grayscaled antialiasing. After a long discussionit will be available in Version 25 with another syntax, which points out that this property only works on OS X.
Firefox 终于添加了一个属性来启用灰度抗锯齿。经过长时间的讨论，它将在版本 25 中使用另一种语法，指出此属性仅适用于 OS X。
-moz-osx-font-smoothing: grayscale;
This should fix blurry icon fonts or light text on dark backgrounds.
这应该可以修复深色背景上模糊的图标字体或浅色文本。
.font-smoothing {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
You may read my post about font rendering on OSXwhich includes a Sass mixin to handle both properties.
回答by Jonathan Naguin
Well, Firefox does not support something like that.
嗯，Firefox 不支持这样的东西。
In the reference page from Mozilla specifies font-smoothas CSS property controls the application of anti-aliasing when fonts are rendered, but this property has been removedfrom this specification and is currently not on the standard track.
在 Mozilla 的参考页面中指定font-smooth为 CSS 属性控制渲染字体时抗锯齿的应用，但此属性已从本规范中删除，目前不在标准轨道上。
This property is only supported in Webkit browsers.
此属性仅在 Webkit 浏览器中受支持。
If you want an alternative you can check this:
如果你想要一个替代品，你可以检查这个：
回答by Volker E.
Case: Light text with jaggy web font on dark background Firefox (v35)/Windows
Example: Google Web Font Ruda
案例：深色背景上带有锯齿状网络字体的浅色文本 Firefox (v35)/Windows
示例：Google Web Font Ruda
Surprising solution -
adding following property to the applied selectors:
令人惊讶的解决方案 -
向应用的选择器添加以下属性：
selector {
text-shadow: 0 0 0;
}
Actually, result is the same just with text-shadow: 0 0;, but I like to explicitly set blur-radius.
实际上，结果与 相同text-shadow: 0 0;，但我喜欢明确设置模糊半径。
It's not an universal solution, but might help in some cases. Moreover I haven't experienced (also not thoroughly tested) negative performance impacts of this solution so far.
这不是一个通用的解决方案，但在某些情况下可能会有所帮助。此外，到目前为止，我还没有经历过（也没有经过彻底测试）此解决方案的负面性能影响。
回答by azenet
After running into the issue, I found out that my WOFF file was not done properly, I sent a new TTF to FontSquirrelwhich gave me a proper WOFF that was smooth in Firefox without adding any extra CSS to it.
遇到这个问题后，我发现我的 WOFF 文件没有正确完成，我向FontSquirrel发送了一个新的 TTF，它给了我一个正确的 WOFF，它在 Firefox 中很流畅，而没有向它添加任何额外的 CSS。
回答by Plici Stéphane
I found the solution with this link : http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
我通过此链接找到了解决方案：http: //pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
Step by step method :
分步方法：
- send your font to a WebFontGenerator and get the zip
- find the TTF font on the Zip file
- then, on linux, do this command (or install by
apt-get install ttfautohint):ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf - then, one more, send the new TTF file (neosansstd-black.changed.ttf) on the WebFontGenerator
- you get a perfect Zip with all your webfonts !
- 将您的字体发送到 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！
I hope this will help.
我希望这将有所帮助。
回答by user3634787
... in the body tag and these from the content and the typeface looks better in general...
...在正文标签中，这些来自内容和字体的内容总体上看起来更好......
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;
}
回答by Christelle
When the color of text is dark, in Safari and Chrome, I have better result with the text-stroke css property.
当文本颜色较暗时，在 Safari 和 Chrome 中，使用 text-stroke css 属性有更好的效果。
-webkit-text-stroke: 0.5px #000;
回答by Aaron VIII
Adding
添加
font-weight: normal;
To your @font-face fonts will fix the bold appearance in Firefox.
@font-face 字体将修复 Firefox 中的粗体外观。
