Chrome与Firefox上文本呈现的主要区别

Question

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

我尝试过使用-webkit-font-smoothing，字母间距和字间距但似乎没有任何效果。

查看截图

相关CSS（计算）：

color: #C4C4C4;
font-family: sans-serif;
font-size: 9px;
font-style: normal;
font-variant: normal;
font-weight: normal;

相关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上。可能这会产生影响..

任何提示？

Answer 1

不同的浏览器使用不同的渲染引擎（意图）产生不同的结果。较小的字体大小尤其如此。你可以做很多事情。如果浏览器的设计者没有意图存在差异，那么很可能这是在其他操作系统上已经解决的问题，而不是你的（Ubuntu）。

（那就是说：你有没有在Chrome浏览器中检查过你的“最小字体大小” - 首选项＆gt;在引擎盖下＆gt;自定义字体... - 和Firefox - 首选项＆gt;内容？）

Answer 2

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

所以如果你：

font-family：verdana，sans-serif;

你会在两个浏览器中看到几乎像素完美的结果

HTH