Chrome 与 Firefox 上文本渲染的主要区别
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/mHhhQ/
根据记录，我使用的是 Ubuntu。这可能会产生影响..
有什么建议吗？
I'm having some major differences in the rendering of text between Chrome and Firefox. Chrome seems to apply some anti-aliasing rules to the text and shrinks it down quite a bit.
I've tried playing with -webkit-font-smoothing, letter-spacing and word-spacing but none seem to really have any effect.
See screenshots
Relevant CSS (computed):
color: #C4C4C4;
font-family: sans-serif;
font-size: 9px;
font-style: normal;
font-variant: normal;
font-weight: normal;
Relevant CSS (computed):
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;
Note that the faded text in the background is just an image.. ignore that.
I have a feeling Chrome has a css switch for anti-aliasing rules, but not sure where to look for more info.
Edit:
jsfiddle: http://jsfiddle.net/mHzhQ/
For the record, I'm on Ubuntu. Possibly this has an impact ..
Any tips?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不同的浏览器使用不同的渲染引擎（旨在）产生不同的结果。对于较小的字体尤其如此。通常你对此无能为力。如果这种差异不是浏览器设计者有意为之的，那么这也很可能是在其他操作系统上解决的一个问题，但在您的操作系统（Ubuntu）上却没有解决。
（也就是说：您是否检查过 Chrome 中的“最小字体大小” - 首选项 > 引擎盖下 > 自定义字体... - 以及 Firefox - 首选项 > 内容？）
Different browsers use different rendering engines that (are meant to) produce different results. This is especially the case with smaller font sizes. There's generally not a whole lot you can do about it. If the difference is not intended by the browser's designers, it's also quite possible that this is a kink that has been worked out on other OSs, but not yours (Ubuntu).
(That said: have you checked your "minimum font size" in Chrome — Preferences > Under the Hood > Customize Fonts... — and Firefox — Preferences > Content?)
“sans-serif”可能会产生不同的字体
，因此如果您：
font-family:verdana, sans-serif;
您将在两个浏览器中看到近乎完美的结果
HTH
"sans-serif" may result in a different font
so if you:
font-family:verdana, sans-serif;
you will see a nearly pixel-perfect result in both browsers
HTH