css - 垂直对齐文本 Mac 和 PC

标签 css fonts

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

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

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

最佳答案

您在 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 字体来确保在两个(所有)平台上使用完全相同的字体。有许多免费和商业服务提供字体数据来执行此操作。我将留给您搜索并确定最适合您的特定应用的内容。

关于css - 垂直对齐文本 Mac 和 PC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11153336/

相关文章:

html - 在具有百分比且不包含flexbox的div内使具有绝对位置的内联元素垂直居中

css - 如何使自定义 css 字体呈现与设计完全一样

javascript - Google Maps API 更改了我的字体系列

java - 在 JTextPane 中编写古吉拉特语、旁遮普语等印度地方语言

html - 我如何让我的按钮 div 在每个设备上响应

css - 菜单图标不消失

html - 是否有浏览器同时支持 <body> 和 <html> 的不同背景图片?

css - 媒体查询不会优先

android - 为什么字体系列 "Arial"在桌面上大于 "Times",而 "Times New Roman"在移动设备上大于 "Arial"?

svg - SVG 字体的新语法是什么?