CSS 除了重量在不同浏览器上看起来不同之外，相同的字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5082632/
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
Same font except its weight seems different on different browsers
提问by seymar
The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?
文本在 Chrome 中正确显示。我希望它在所有浏览器中都以这种方式显示。我怎样才能做到这一点？
I was able to fix this in Safari with -webkit-font-smoothing: antialiased;
我能够在 Safari 中解决这个问题 -webkit-font-smoothing: antialiased;
Chrome:
铬合金：
Firefox:
火狐：
h1 {
font-family: Georgia;
font-weight: normal;
font-size: 16pt;
color: #444444;
-webkit-font-smoothing: antialiased;
}<h1>Hi, my name</h1>And a JSFiddle: http://jsfiddle.net/jnxQ8/1/
还有一个 JSFiddle：http: //jsfiddle.net/jnxQ8/1/
采纳答案by vincicat
Be sure the font is the same for all browsers. If it is the same font, then the problem has no solutionusing cross-browser CSS.
确保所有浏览器的字体都相同。如果是相同的字体，则问题使用跨浏览器 CSS没有解决方案。
Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.
因为每个浏览器都有自己的字体渲染引擎，它们都是不同的。它们在以后的版本中或在不同的操作系统中也可能不同。
UPDATE: For those who do not understand the browser and OS font rendering differences, read thisand this.
更新：对于那些不了解浏览器和操作系统字体渲染差异的人，请阅读此和此。
However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:
然而，大多数人甚至不会注意到这种差异，用户也接受了这一点。忘记像素完美的跨浏览器设计，除非您：
- Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
- Using images (resources are demanding and hard to maintain)
- Replacing Flash (need some programming and doesn't work on iOS)
- 试图通过 CSS 关闭子像素渲染（并非所有浏览器都允许这样做，文本可能很难看......）
- 使用图像（资源要求高且难以维护）
- 替换 Flash（需要一些编程，在 iOS 上不起作用）
UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:
更新：我检查了示例页面。通过文本渲染调整字距调整应该会有所帮助：
text-rendering: optimizeLegibility;
More references here:
更多参考在这里：
- Part of the font-rendering is controlled by
font-smoothing(as mentioned) and another part istext-rendering. Tuning these properties may help as their default values are not the same across browsers. - For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.
- 部分字体渲染由
font-smoothing（如前所述）控制，另一部分是text-rendering. 调整这些属性可能会有所帮助，因为它们的默认值在不同浏览器中并不相同。 - 对于 Chrome，如果您仍然无法正常显示，请尝试使用text-shadow hack。它应该会改善您的 Chrome 字体渲染，尤其是在 Windows 中。但是，text-shadow 在 Windows XP 下会发疯。当心。
回答by oneiota
In order to best standardise your @font-face embedded fonts across browsers try including the below inside your @font-face declaration or on your body font styling:
为了最好地标准化跨浏览器的 @font-face 嵌入字体，请尝试在 @font-face 声明中或正文字体样式中包含以下内容：
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
At present there looks to be no universal fix across all platforms and browser builds. As stated frequently all browsers/OS have different text rendering engines.
目前似乎没有跨所有平台和浏览器构建的通用修复程序。如前所述，所有浏览器/操作系统都有不同的文本渲染引擎。
回答by bobzIlla
There's some great information about this here: https://bugzilla.mozilla.org/show_bug.cgi?id=857142
这里有一些很好的信息：https: //bugzilla.mozilla.org/show_bug.cgi?id=857142
Still experimenting but so far a minimally invasive solution, aimed only at FF is:
仍在试验中，但到目前为止，仅针对 FF 的微创解决方案是：
body {
-moz-osx-font-smoothing: grayscale;
}
回答by Anne-Pieter Strikwerda
Try -webkit-font-smoothing: subpixel-antialiased;
尝试 -webkit-font-smoothing: subpixel-antialiased;
回答by KEMBL
I collected and tested discussed solutions:
我收集并测试了讨论的解决方案：
Windows10 Prof x64:
Windows10 Prof x64：
* FireFox v.56.0 x32
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit
macOs X Serra v.10.12.6 Mac mini (Mid 2010):
macOs X Serra v.10.12.6 Mac mini（2010 年中）：
* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0
Semi (still micro fat in Safari) solved fatty fonts:
Semi（在 Safari 中仍然是微胖）解决了胖字体：
text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac
Have no visual effect
没有视觉效果
line-height: 1;
text-rendering: optimizeLegibility;
speak: none;
font-style: normal;
font-variant: normal;
Wrong visual effect:
错误的视觉效果：
-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari
do not forget to set !important when testing or be sure that your style is not overridden
测试时不要忘记设置 !important 或确保您的样式不被覆盖
回答by mateostabio
I have many sites with this issue & finally found a fixto firefox fonts being thicker than chrome.
我有很多网站都有这个问题，最后找到了一个修复Firefox 字体比 chrome 粗的方法。
You need this line next to your -webkit fix -moz-osx-font-smoothing: grayscale;
您需要在 -webkit 修复旁边的这一行 -moz-osx-font-smoothing: grayscale;
body{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
回答by Trevor
I don't think using "points" for font-size on a screen is a good idea. Try using px or em on font-size.
我不认为在屏幕上使用“点”作为字体大小是个好主意。尝试在字体大小上使用 px 或 em。
From W3C:
来自W3C：
Do not specify the font-size in pt, or other absolute length units. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser).
不要以 pt 或其他绝对长度单位指定字体大小。它们跨平台呈现不一致，并且不能由用户代理（例如浏览器）调整大小。
回答by Jorge
Try text-rendering: geometricPrecision;.
试试text-rendering: geometricPrecision;。
Different from text-rendering: optimizeLegibility;, it takes care of kerning problems when scaling fonts, while the last enables kerning and ligatures.
与 不同text-rendering: optimizeLegibility;，它在缩放字体时处理字距调整问题，而最后一个启用字距调整和连字。
