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

时间:2011-10-04 17:04:25

标签: css firefox google-chrome fonts antialiasing

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

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

查看截图

Rendering on Chrome

相关CSS(计算):

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

Rendering on Firefox

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

任何提示?

2 个答案:

答案 0 :(得分:4)

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

(那就是说:你有没有在Chrome浏览器中检查过你的“最小字体大小” - 首选项>在引擎盖下>自定义字体... - 和Firefox - 首选项>内容?)

答案 1 :(得分:1)

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

所以如果你:

font-family:verdana,sans-serif;

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

HTH