相同的字体，只是粗细在不同的浏览器上看起来不同

Question

文本在 Chrome 中正确显示。我希望它在所有浏览器中都以这种方式显示。我怎样才能做到这一点？

我能够在 Safari 中使用

-webkit-font-smoothing: antialiased;

修复此问题

铬：

火狐：

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 问题无解。

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

更新：对于那些不了解浏览器和操作系统字体渲染差异的人，阅读此和此。

然而，大多数人甚至都没有注意到这种差异，用户也接受了这一点。忘记像素完美的跨浏览器设计，除非您：

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

---

更新：我检查了示例页面。通过文本渲染调整字距调整应该会有所帮助：

text-rendering: optimizeLegibility; 

更多参考：

1. 部分字体渲染由

   font-smoothing

   （如上所述）控制，另一部分由

   text-rendering

   控制。调整这些属性可能会有所帮助，因为它们的默认值在不同浏览器中并不相同。
2. 对于 Chrome，如果仍然无法显示“OK”，请尝试此 text-shadow hack。它应该可以改善您的 Chrome 字体渲染，尤其是在 Windows 中。然而，text-shadow 在 Windows XP 下会变得疯狂。小心点。

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;

目前似乎没有跨所有平台和浏览器版本的通用修复程序。正如经常提到的，所有浏览器/操作系统都有不同的文本渲染引擎。

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

我有很多网站都遇到这个问题，终于找到了解决方案，修复了 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

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

来自W3C：

不要以pt指定字体大小， 或其他绝对长度单位。他们 跨平台渲染不一致 并且不能由用户代理调整大小 （例如浏览器）。

Answer 8

尝试

text-rendering: geometricPrecision;

。

与

text-rendering: optimizeLegibility;

不同，它解决缩放字体时的字距调整问题，而后者则支持字距调整和连字。