Fonts IE、Safari和Chrome中的css线条高度渲染不同

Pre-word：起初我只考虑Windows，但在MacAir上测试了一段时间后，我意识到在那里情况更糟。虽然在实际代码中，这并不是一件麻烦事，尽管存在一些不一致性

这是测试

简言之，发生了什么。我应用了

行高

属性的标题，这始终是一行标题，因此我锁定了高度以适合字体。在不同的浏览器（和OSs）中，您可以看到不同的文本层。你知道怎么解决吗

UPD：这是我所做的真实工作的一个非常接近的例子，同样它并不像上面的示例测试那个样糟糕，但仍然有移动像素

UPD2：

做了更多的测试，主要集中在Windows7上，测试屏幕截图中包含了不同高度的不同浏览器的图片。你可以从视觉上看到它们之间的不一致

它大约是1px，所以实际上我可以通过使用line heeight 29px并为IE提供不同的线高30px来修复它。虽然我只会将其保留为30px线高，而忽略safari，所以在这一点上我很好

所以我很好奇为什么会这样？迫不及待地需要花几个小时浏览不同的资源：

，长相也有同样的问题，但只是摆脱了寻找原因的问题

建议对

行高使用偶数值，这在我看来有点奇怪：）如果我在这里做错了，请纠正我

但有点不相关的话题只是我很有兴趣继续读下去

，看来我找到了答案，虽然有点模糊，但事实上有点道理

一,。三组行距值

由于TrueType和OpenType字体格式的历史原因，每个webfont都带有三组行距值

系统7中引入的“旧Mac”集合。在旧的Mac OS中，如果一个标志符达到“旧Mac”行距线的上方或下方，则该标志符将被垂直挤压以适应

Windows 3.1中引入的“旧窗口”集合，其中位于“旧窗口”上升线和下降线上方或下方的轮廓的任何部分都不会出现在屏幕上（因此将裁剪轮廓）。
一个“排版”的集合，假定没有其他两个集合的限制

然而，问题是许多Windows应用程序仍然使用“旧Windows”值。通常，这样做是为了防止使用旧应用程序创建的文档回流。在MacOSX上，压缩不会发生，但大多数应用程序仍然使用“旧Mac”值

这个包袱已经被带到浏览器里去了。Mac OS X上的Chrome使用的值与Windows上的Chrome不同；Windows7上的Firefox使用的值集与WindowsXP上的Firefox不同，Windows7上的Firefox使用的值集与Windows7上的Chrome不同。同一浏览器的Mac和Windows版本将使用不同的值集，而同一操作系统上的不同浏览器也可能使用不同的值！在理想情况下，简单的解决方案是让字体铸造厂确保所有三组值产生相同的结果。但许多现有字体都是在webfonts出现之前创建的，字体创建工具并不能让字体设计者轻松地将这些值设置为“正确”

简而言之：有许多字体的行距值会导致操作系统和浏览器之间的不一致

但我仍然不能100%确定情况是否如此。也许有人能做出更好的猜测并给出更清晰的答案，就像对孩子的解释：）？
似乎你使用同一种字体会得到不同的结果，是因为你实际上没有使用同一种字体。sans serif实际上是一个变量，不同的浏览器对sans serif使用不同的字体。如果将其更改为Arial，则在所有浏览器中都应该是相同的

见此帖：

简而言之：有许多字体的行距值会导致操作系统和浏览器之间的不一致

这是真的。许多字体的
垂直度量存在问题。这种字体永远不会在浏览器之间对齐。使字体在浏览器中一致呈现的唯一方法是修复其垂直度量

大多数字体提供程序允许您在下载字体之前更新和修复字体的垂直度量。不过，他们可能会用不同的方式来称呼这一选项。例如：Fontsquirrel将其称为
自动调整垂直度量
，myFonts.com将其称为
行高调整

更多信息：
奇怪，但我也注意到了这一点。也许您试图做的对跨浏览器兼容性来说太精确了？你能告诉我们你想做什么，这样我们就可以帮你想出一个替代的解决方案吗？谢谢Simon，我正在尝试制作一种全局标题，测试代码与真实代码相差不远，我只是添加了更多的float left高度和行高来满足我的需要。再说一次，它看起来并没有那么糟糕，尤其是在Mac电脑上。稍后我会准备更接近的样本，我认为你的
h1上的
height
会破坏你的一切。再一次，你的问题还不清楚，但看看这里发生了什么：我需要高度，我会很快更新问题的细节，你有没有把所有的全局重置应用到你的样式表上？谢谢你的回复，不要认为这是因为家庭，在这个项目中，我使用了完全不同的字体，结果相同，这是arial测试，至少对于windows来说，并不是所有字体都在不同的系统之间共享，这一点是相同的。例如，Helvetica在windows上不可用。我的例子在比较Mac上的Chrome Windows和Safari时起了作用。然后我注意到IE仍然在工作