CSS Firefox 中的字体平滑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15182997/
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
Font-Smoothing in Firefox
提问by Nick Bewley
Using Google WebFonts ("Oswald" in this case), I have found that my fonts are rendered bolder than they should be. I have solved this problem in webkit based browsers using:
使用 Google WebFonts（在本例中为“Oswald”），我发现我的字体比应有的更粗。我已经使用以下方法在基于 webkit 的浏览器中解决了这个问题：
-webkit-font-smoothing: antialiased;
but in Firefox I cannot find the declaration that controls this. I have heard of using a text-shadowhack to fix this, but I would prefer not to use this as it will undoubtedly change the geometric properties of the fonts.
但在 Firefox 中我找不到控制它的声明。我听说过使用text-shadowhack 来解决这个问题，但我不想使用它，因为它无疑会改变字体的几何属性。
Here is what it looks like in webkit (Chrome):
这是它在 webkit (Chrome) 中的样子：
This is the blocky horrible rendering thanks to Firefox:
由于 Firefox，这是块状可怕的渲染：
I know there is a way to achieve this in FireFox, because I found this font on font-combinator.com, and it renders properly on font-combinator using Firefox. Here is what it looks like on Firefox through font-combinator.com:
我知道有一种方法可以在 FireFox 中实现这一点，因为我在 font-combinator.com 上找到了这种字体，并且它使用 Firefox 在 font-combinator 上正确呈现。这是通过 font-combinator.com 在 Firefox 上的样子：
After browsing through the css used to create font-combinator, I found this declaration: text-rendering: optimizelegibility;, but this does not work when applied to my element.
在浏览用于创建字体组合器的 css 后，我发现了这个声明：text-rendering: optimizelegibility;，但是当应用于我的元素时这不起作用。
I have also tried:
我也试过：
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smooth: never;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
How can I get Firefox to antialias my fonts so that they look right when displayed? Can you find the declaration, or combination of declarations that makes them display properly on www.font-combinator.com?
如何让 Firefox 对我的字体进行抗锯齿处理，以便它们在显示时看起来正确？您能在 www.font-combinator.com 上找到使它们正确显示的声明或声明组合吗？
I am using an relatively old version of FireFox (16.0.2) because this machine has an old version of OSX installed.
我使用的是相对较旧版本的 FireFox (16.0.2)，因为这台机器安装了旧版本的 OSX。
回答by Tieme
This is a Firefox on OSX problem only...
这只是 OSX 上的 Firefox 问题...
I just answered this question: How to antialias SVG text in Firefoxwith a possible solution form your problem.
我刚刚回答了这个问题：How to antialias SVG text in Firefoxwith a possible solution form your problem。
I think you could use the following attribute:
我认为您可以使用以下属性：
-moz-osx-font-smoothing: grayscale;
This will be released with firefox 25 (a nightly build can be found at http://nightly.mozilla.org/)
这将与 firefox 25 一起发布（可以在http://nightly.mozilla.org/找到每晚构建）
回答by BraMKJ
Have you tried declaring a numerical font-weight instead of just 'normal' or 'bold'? There's a lot of differences in rendering of webfonts in different browsers.
您是否尝试过声明数字字体粗细而不仅仅是“正常”或“粗体”？在不同浏览器中呈现 webfonts 有很多差异。
Try setting {font-weight: 400;} for normal text and {font-weight: 700;} for bold.
尝试为普通文本设置 {font-weight: 400;}，为粗体设置 {font-weight: 700;}。
