为什么在Windows和Mac OS X上线高有@ font-face差异？

我一直在寻找一个小时的答案，现在没有运气。为什么在Windows和Mac OS X上线高有@ font-face差异？

我正在使用“line-height”CSS属性在文本框内垂直居中文本。这对于标准安全字体工作正常，并且在Windows上“@ font-face”“字体嵌入也可以很好地工作。

但在Mac上，使用“@ font-face”进行对中时出现问题。见：http://cl.ly/QBlE/o

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

实施例（在顶部蓝色框）：

#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; 
}

来源

2013-07-11 Macejkou

我有同样的问题，需要利用这样的服务。 – Abadaba

您是否考虑过使用垂直居中文本的其他方法之一？它是否必须使用行高来居中？ – cimmanon

代替使用不同的线高度的，尝试使用font-size-adjust属性与auto的值。

从W3C：

在字体回退发生的情况下，后备字体可以不共用相同的纵横比作为期望字体系列，因此将出现更少的可读性。 font-size-adjust属性是一种在发生字体回退时保持文本可读性的方法。它通过调整字体大小来实现这一点，因此无论使用哪种字体，x高度都是相同的。

来源

2013-08-16 14:58:03 ChrisLTD

目前只支持Firefox：https：//developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust#Browser_compatibility –

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

如果这不起作用，那么它可能是由每个浏览器不同的默认样式引起的。这些默认样式可能会混淆您的样式。所以尝试在你的页面中使用reset.css。

来源

2013-08-18 15:52:28

这个问题最可能在于使用的字体。每种字体都有自己的指标，如果没有正确优化，它们可能会因平台而异。有关更好的解释，请参见http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/。

你可以尝试使用像http://fontforge.org/这样的工具自己改变字体。虽然这并不容易，但需要一些试验和错误才能做到。它也可能违反您使用的字体的许可证。

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

来源

2013-08-19 14:32:24

也许“垂直对齐：”可能会有帮助，

请检查该fiddle

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

在这里，我已经创建了4不同的span标签来显示垂直对齐值的顶部，中间，底部和默认（未分配）值，

如果有帮助请更改数值，

因为你是在按钮使用图片，请确认图像都被设定为0 0 即background:url(../img/header-login.png) no-repeat 0 0;

这将渲染图像从0左0顶部，这将有助于你idnetify如果和图像不正确生成..

请回复，如果问题不解决..

来源

2013-08-23 06:35:47 MarmiK

从我多浏览器，多平台的网站经验，你真的应该放下像素字体和开始使用EMS。

这里是一个有用的皈依表工具：

http://pxtoem.com/

让我知道，如果它仍然发生使用他们。请记住，不同的字体具有不同的行为，并且默认（基本）大小也可能不同。如果你想确保它的尺寸完全一样，那么应该使用'em'，你也应该使用openType字体并将其嵌入到你的CSS中，在任何屏幕或浏览器中具有完全相同的字体和大小。

来源

2013-08-23 11:19:37

简单的解决方案 - 谢谢！ –

操作系统可能会以不同的方式呈现字体。人们可以从底部开始，其他人可以从顶部开始，因为他们的算法不同。如果问题是CSS，它将不会被另一种字体解决。

我发现了另一个问题类同你一个，你可以检查它是否适合您的情况： Mac vs. Windows Browser Font Height Rendering Issue

来源

2013-08-23 12:02:15 Kuzgun

为什么在Windows和Mac OS X上线高有@ font-face差异？

回答

相关问题