相同的字体，除了它的重量在不同的浏览器上似乎不同

Posted 2023-03-06

【中文标题】相同的字体，除了它的重量在不同的浏览器上似乎不同

【英文标题】：Same font except its weight seems different on different browsers

【发布时间】：2011-07-02 05:50:31

【问题描述】：

文本在 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/

【问题讨论】：

一般来说，不同的浏览器都会处理自己的文本渲染。如果你谷歌这个，你会看到很多关于浏览器渲染的结果。除非你的 CSS 中有一些古怪的东西，否则你很可能会受到每个关联浏览器的不同渲染引擎的摆布。

是截图的人。我在 Safari 中使用 -webkit-font-smoothing: antialiased; 解决了它现在是 Firefox 吗？

这不是 css3 吗？字体平滑？

绝对是 Chrome 中的 Webkit 字体平滑声明。它只影响特定的字体，这个网站在 2010 年发布了它。ilikekillnerds.com/2010/12/…

【参考方案1】：

我有很多网站都存在这个问题，终于找到了解决方法，解决了 firefox 字体比 chrome 更粗的问题。

你需要在你的 -webkit fix 旁边有这行 -moz-osx-font-smoothing: grayscale;

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

【参考方案2】：

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

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 或确保您的样式没有被覆盖

【讨论】：

文本转换如何修复/破坏任何东西？

【参考方案3】：

确保所有浏览器的字体都相同。如果是相同的字体，那么问题有no solution使用cross-browser CSS。

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

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

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

试图关闭 CSS 的亚像素渲染（并非所有浏览器都允许这样做，而且文本可能很难看...） 使用图像（资源要求高且难以维护） 替换 Flash（需要一些编程，不适用于 ios）

---

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

text-rendering: optimizeLegibility; 

更多参考：

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

【讨论】：

我不明白为什么 Chrome 和 Safari 的呈现方式不同：它们都是基于 WebKit 的。

是的，但 Chrome 显然会自动应用 `-webkit-font-smoothing: antialiased;' Safari 没有？

chrome 和 safari 相似但浏览器不同：它们共享相同的基础 webkit，但许多特定于平台的组件和 css 模块不同 - safari 支持的 css3 属性比 chrome 多。并且字体渲染是非常特定于平台的。

@ChrisW - Safari 拥有自己的字体渲染引擎，可以提供与 OSX 类似的体验。因此，“-webkit-font-smoothing”属性似乎只适用于 Safari（在 Windows 下）。还有一个变量是，您可以在浏览器首选项中修改抗锯齿。

我实际上在同一个站点的两个不同页面上遇到了问题，应用了相同的 CSS，呈现不同的结果。 font-smoothing: antialiased; 为我创造了奇迹。

【参考方案4】：

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

【参考方案5】：

试试text-rendering: geometricPrecision;。

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

【参考方案6】：

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

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

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

【参考方案7】：

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

目前似乎没有适用于所有平台和浏览器版本的通用修复。如前所述，所有浏览器/操作系统都有不同的文本渲染引擎。

【参考方案8】：

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

来自W3C：

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

【讨论】：

但这与字体的粗细无关？

粗体由字体平滑（以及操作系统和浏览器渲染引擎的亚像素技术）控制。

ON chrome 与 Chrome 20 的开始相同，chrome 17 的 OK