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。在没有这些字体中的任何一种可用的其他平台上，您仍然会得到不同的结果。

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

加号比较

乘法符号的比较

最好的解决方法是使用@font-face 字体来确保在两个（所有）平台上使用完全相同的字体。有许多免费和商业服务提供字体数据来做到这一点。我将由您自行搜索并确定最适合您的特定应用的方法。