除了它的重量之外，相同的字体在不同的浏

Question

文字在Chrome中正确显示。我希望它在所有浏览器中以这种方式显示。我怎么能这样做？

我可以使用-webkit-font-smoothing: antialiased;

在Safari中修复此问题

铬：

火狐：

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

和JSFiddle：http://jsfiddle.net/jnxQ8/1/

Answer 1

确保所有浏览器的字体相同。如果它是相同的字体，那么问题是无解决方案使用跨浏览器CSS 。

因为每个浏览器都有自己的字体渲染引擎，所以它们都是不同的。它们在更高版本或不同操作系统中也可能不同。

更新：对于那些不了解浏览器和操作系统字体呈现差异的人，read this和this。

但是，大多数人都不会注意到这种差异，用户会接受这种差异。忘记像素完美的跨浏览器设计，除非你是：

1. 尝试通过CSS关闭子像素渲染（并非所有浏览器都允许这样做，文字可能很难看......）
2. 使用图像（资源要求高且难以维护）
3. 更换Flash（需要一些编程但在iOS上不起作用）

---

更新：我查看了示例页面。通过文本呈现调整字距调整应该有所帮助：

text-rendering: optimizeLegibility; 

此处有更多参考资料：

1. 部分字体呈现由font-smoothing控制（如上所述），另一部分是text-rendering。调整这些属性可能会有所帮助，因为它们的默认值在不同浏览器中是不同的。
2. 对于Chrome，如果仍然无法显示，请尝试使用此text-shadow hack。它应该可以改善您的Chrome字体呈现，尤其是在Windows中。但是，在Windows XP下，text-shadow会发疯。小心。

Answer 2

为了在浏览器中最好地标准化@ 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;

目前，所有平台和浏览器版本似乎都没有通用修复。如所述，所有浏览器/ OS都具有不同的文本呈现引擎。

Answer 3

这里有一些很好的信息： https://bugzilla.mozilla.org/show_bug.cgi?id=857142

仍在试验，但到目前为止，仅针对FF的微创解决方案是：

body {
-moz-osx-font-smoothing: grayscale;
}

Answer 4

尝试-webkit-font-smoothing: subpixel-antialiased;

Answer 5

我收集并测试了所讨论的解决方案：

Windows10教授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（2010年中）：

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

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

没有视觉效果

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

视觉效果错误：

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

不要忘记在测试时设置！important，或确保您的样式没有被覆盖

Answer 6

我有很多网站都有这个问题＆amp; 终于找到了修复，以使firefox字体比chrome更粗。

你的-webkit修复-moz-osx-font-smoothing: grayscale;

旁边需要这一行

body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

Answer 7

我不认为在屏幕上使用“点”字体大小是一个好主意。尝试在font-size上使用px或em。

来自W3C：

  

请勿在pt中指定font-size，   或其他绝对长度单位。他们   跨平台渲染不一致   并且无法由用户代理调整大小   （例如浏览器）。

Answer 8

尝试text-rendering: geometricPrecision;。

与text-rendering: optimizeLegibility;不同，它在缩放字体时会处理字距调整问题，而最后一个字符串会启用字距调整和连字。