垂直对齐文本mac和PC

Question

我试图在框内垂直居中一些符号.但我不能让符号在OSX和windows中垂直对齐

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

您会注意到x在窗口中垂直居中,但在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字体来确保在两个(所有)平台上使用完全相同的字体.有许多免费和商业服务提供字体数据来执行此操作.我会留给您搜索并确定最适合您特定应用的内容.