css - 垂直对齐文本 Mac 和 PC

Question

我试图将一些符号垂直居中放置在一个方框内。但是我无法让符号在 OSX 和 Windows 中都垂直对齐

这是我用来演示这个问题的一个非常简单的例子 http://dabblet.com/gist/2971548

你会注意到 x 在 Windows 中是垂直居中的，但在 OS X 中不是。如何解决此问题？

Answer 1

您在 Mac OS X 和 Windows 中看到的差异是因为使用了两种不同的字体，并且这些特定符号相对于基线的高度不同。垂直居中使字体居中，而不仅仅是字符串中的字符。

您的 CSS 字体堆栈指定“Helvetica Neue、Helvetica、Arial、sans-serif”。在 Mac OS X 下，将使用 Helvetica Neue。在 Windows 下，Helvetica Neue(通常)不存在，甚至普通的 Helvetica 也不存在，因此几乎可以肯定使用了 Arial。在没有这些字体的其他平台上，您很有可能会得到不同的结果。

以下链接的图形显示了叠加的两种字体的符号，设置为公共(public)基线。 Helvetica Neue 为红色； Arial 是绿色的。你可以很清楚地看到，Helvetica Neue 中的符号比 Arial 中的符号低很多:

comparison of plus signs

comparison of multiplcation signs

此处最好的解决方法是使用@font-face 字体来确保在两个(所有)平台上使用完全相同的字体。有许多免费和商业服务提供字体数据来执行此操作。我将留给您搜索并确定最适合您的特定应用的内容。