字体在Firefox和Chrome中的显示方式有所不同

似乎我的菜单栏在Firefox中显示的字体与在Chrome中显示的字体不同。请参阅以下内容：

这是应用于此元素的CSS：

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

据我所知，关于该字体的所有信息都完全相同，但它们仍然显示不同（请参见图片）。为什么？

Chrome使用WebKit渲染引擎。Firefox使用Gecko引擎。解释和显示类型都稍有不同，IE9 +和Opera中使用的DirectX和Vega图形引擎也是如此。

您不能强制浏览器以相同的方式呈现文本，但是您可以做一些事情来确保导航在各个浏览器中占据相同的宽度：

1. 在导航栏元素中使用图像或SVG代替类型。如果您的导航区域不太可能经常更改，这可能会很有用。例如www.apple.com

2. 使用CSS固定每个导航元素的宽度。两种浏览器之间的文本大小仍然会有所不同，但是如果您<li>将导航区域中的每个元素都设置为固定的像素宽度，则各个链接的边界框在各个浏览器中将非常相似，并且导航区域的总宽度应相同。

在不同的浏览器之间（以及在不同的操作系统上），字体呈现的差异是不争的事实。您只需要确保如果字体以不同的宽度显示，您的设计仍然可以应付。

万一有人碰到这个，对我来说问题就出在这里letter-spacing。Chrome和Firefox对属性的处理方式不同。

我的问题是letter-spacing影响其他元素的位置。尤其是导航菜单中的某些图像。通过删除该属性，我的问题得以立即解决。

我还读到，专门使用 .point值可能会在两个浏览器之间产生变化的效果，在我的情况下是这样。

这里说的同样的问题

您可以通过重置您的CSS

http://developer.yahoo.com/yui/reset/ 希望至少您能从中获得一些线索

我发现webkit将支持px的字体大小，但是对于字母间距之类的东西，如果您不使用em，它们将全部忽略。

在两个操作系统上测试了6个浏览器/ 4渲染引擎之后。我发现即使行距相同，大多数内容也相同。我将在一分钟内研究Windows和Linux的区别。

我以为Palatino字体随处可见，但chrome可以回溯到略小的罗马时代，默认字体具有相同的结果（chrome不同），这会误导我。

无论如何，如果您指定罗马时间或使用@fontface提供字体文件！您可能可以使您的导航栏闪烁；-)

我有一个类似的问题，找到了解决方案：

使用：

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

在Firefox中，它看起来很棒。在Chrome中，字母间距很奇怪。删除optimizelegibility样式就可以了。两种浏览器现在呈现相同的图像。

我决定删除webkit的样式，然后将其保留在其他浏览器中。现在看起来不错。

我在Open-Sans上遇到了类似的问题，这对我来说是成功的：

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