Html 为什么Windows和Mac OS X上的行高存在@font-face差异？

一个小时以来，我一直在寻找这个问题的答案，但运气不好

我使用“行高”CSS属性在框内垂直居中文本。这对于标准的安全字体很好，对于Windows上的“@font-face”字体嵌入也很好

然而，在Mac电脑上，使用“@font-face”进行定心存在问题。见：

我不知道该怎么办。解决这个问题的唯一方法是为Mac使用不同的行高度。但据我所知，如果没有JavaScript或服务器端编程，这是不可能的，而且似乎不是适合我的解决方案

示例（顶部的蓝色框）：

---

不要使用不同的行高，请尝试使用值为

auto

的

font-size-adjust

属性

从：

在发生字体回退的情况下，回退字体可能不会与所需字体系列共享相同的纵横比，因此看起来可读性较差。字体大小调整属性是一种在字体回退时保持文本可读性的方法。它通过调整字体大小来实现这一点，这样无论使用何种字体，x高度都是相同的

---

首先，尝试设置从px到em的行高度

---

如果这不起作用，那么可能是由于每个浏览器的默认样式不同造成的。这些默认样式可能会与您的样式发生冲突。因此，请尝试在页面中使用reset.css。

问题很可能在于使用的字体。每种字体都有自己的度量标准，如果没有适当优化，它们可能会因平台而异。请参阅，以获得更好的解释

您可以尝试使用类似的工具自己更改字体。但这并不容易，需要一些尝试和错误才能使其正确。它还可能违反您正在使用的字体的许可证

---

我的建议是：选择一种更适合在网络上使用的字体。从Typekit或类似的字体中选择任何字体，我敢打赌您会得到更一致的结果。

也许“垂直对齐”会有所帮助

请检查这个

这就解释了差异，我认为每个浏览器都有不同的默认值

在这里，我创建了4个不同的跨度标记，以显示垂直对齐值的顶部、中间、底部和默认（未指定）值

如果有帮助，请更改值

当您在按钮中使用图像时，请验证图像是否设置为0 i、 e

background:url（../img/header login.png）不重复0

这将从0左侧和0顶部渲染图像，这将帮助您识别是否正确生成图像

如果问题没有解决，请回复。
根据我对多浏览器和多平台网站的经验，您应该真正减少字体中的像素，并开始使用ems

下面是一个有用的转换表工具：


如果仍然使用em，请告诉我。请记住，不同的字体有不同的行为，默认（基本）大小也可能不同。如果您想确保它的大小完全相同，那么在使用“em”时，您还应该使用openType字体并将其嵌入CSS中，在任何屏幕或浏览器中使用完全相同的字体和大小。
操作系统可能会以不同的方式呈现字体。一个可以从底部开始，另一个可以从顶部开始，因为它们的算法不同。如果问题是CSS，它将不会被另一种字体解决

我发现另一个问题与您的问题类似，您可以检查它是否适用于您的情况：
我也有同样的问题，需要帮助。您是否考虑过使用其他方法来处理垂直居中的文本？必须使用线条高度居中吗？目前仅Firefox支持：
#header .login {
    text-decoration:none;
    margin:11px 9px 0 9px;
    float:right;
    font-size:11px;
    color:#fff;
    background:url(../img/header-login.png);
    width:118px;
    height:26px;
    line-height:26px;
    padding:0 0 0 10px;
    text-transform:uppercase;
    font-family: 'Helvetica55', Sans-Serif;
}