Chrome 与 Firefox 文本渲染的主要区别答案

【问题标题】：Major difference in text rendering on Chrome vs FirefoxChrome 与 Firefox 文本渲染的主要区别
【发布时间】：2011-10-04 17:04:25
【问题描述】：

我在 Chrome 和 Firefox 之间的文本呈现方面存在一些重大差异。 Chrome 似乎对文本应用了一些抗锯齿规则并将其缩小了很多。

我尝试过使用 -webkit-font-smoothing、letter-spacing 和 word-spacing，但似乎没有任何效果。

查看截图

相关 CSS（计算）：

font-family:    sans-serif;
font-size:  9px;
font-weight:    400;
font-style: normal;
font-size-adjust:   none
color:  #C4C4C4;
text-transform: none;
text-decoration:    none;
letter-spacing: normal;
word-spacing:   0;
line-height:    11.0833px;
text-align: start;
vertical-align: baseline;
direction:  ltr;

请注意，背景中褪色的文字只是一张图片。忽略它。

我感觉 Chrome 有一个用于抗锯齿规则的 css 开关，但不知道在哪里可以找到更多信息。

编辑：

jsfiddle：http://jsfiddle.net/mHzhQ/

为了记录，我在 Ubuntu 上。可能这会产生影响..

有什么建议吗？

【问题讨论】：

您是否使用了 CSS 重置或 CSS 标准化？
对不起，我应该提到这一点。我正在使用包含重置的 Blueprint css。所以是的。
制作小提琴。测试起来会容易得多。
在 Windows 7 中的 FF 6.0.2 和 GG 14 上进行了检查。看不出有什么区别。很确定这是操作系统的情况。
我在 Win、Linux 和 Mac 上试过。在 Windows 上几乎没有区别，但在 Mac 和 Linux 上却很明显。我想我只需要找到一种在浏览器和操作系统中呈现大致相同的字体。

标签： css firefox google-chrome fonts antialiasing

【解决方案1】：

不同的浏览器使用不同的渲染引擎（旨在）产生不同的结果。尤其是字体较小的情况。通常，您对此无能为力。如果差异不是浏览器设计者的意图，那么这也很可能是在其他操作系统上解决的问题，但不是您的操作系统（Ubuntu）。

（也就是说：您是否在 Chrome 中检查过“最小字体大小” - 首选项 > 后台 > 自定义字体... - 和 Firefox - 首选项 > 内容？）

【讨论】：

【解决方案2】：

“sans-serif”可能会导致不同的字体

如果你：

字体系列：verdana，无衬线；

您将在两种浏览器中看到近乎完美的像素效果

HTH

【讨论】：

我确实尝试过其他字体，例如 Verdana，但效果相同。它们在 Chrome 上看起来都更小、更简洁。