8

我一直在寻找一个小时的答案，但没有运气。

我使用“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;
}
4

6 回答 6

1

font-size-adjust尝试使用值为的属性，而不是使用不同的行高auto。

来自W3C：

在发生字体后备的情况下，后备字体可能不会与所需字体系列共享相同的纵横比，因此看起来可读性较差。font-size-adjust 属性是一种在字体回退发生时保持文本可读性的方法。它通过调整字体大小来做到这一点，这样无论使用什么字体，x 高度都是相同的。

于 2013-08-16T14:58:03.260 回答
1

首先，尝试将行高从 px 设置为 em。

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

于 2013-08-18T15:52:28.100 回答
0

根据我对多浏览器和多平台网站的经验，您应该真正删除字体中的像素并开始使用 ems。

这是一个有用的转换表工具：

http://pxtoem.com/

让我知道它是否仍然使用 em 发生。还要记住，不同的字体有不同的行为，默认（基本）大小也可能不同。如果您想确保它的大小完全相同，除了使用“em”之外，您还应该使用 openType 字体并将其嵌入到您的 CSS 中，在任何屏幕或浏览器中具有完全相同的字体和大小。

于 2013-08-23T11:19:37.030 回答
0

问题很可能在于使用的字体。每种字体都有自己的指标，如果没有得到适当的优化，它们可能会因平台而异。请参阅http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/以获得更好的解释。

您可以尝试使用http://fontforge.org/之类的工具自己更改字体。虽然这并不容易，并且需要一些试验和错误才能使其正确。它还可能违反您使用的字体的许可。

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

于 2013-08-19T14:32:24.343 回答
0

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

请检查这个fiddle

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

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

如果有帮助，请更改值，

当您在按钮中使用图像时，请验证图像是否设置为 0 0 即background:url(../img/header-login.png) no-repeat 0 0;

这将从左侧 0 和顶部 0 渲染图像，这将帮助您识别图像是否未正确生成..

如果问题没有解决请回复..

于 2013-08-23T06:35:47.683 回答
0

操作系统可能会以不同的方式呈现字体。一个可以从底部开始，另一个可以从顶部开始，因为它们的算法不同。如果问题出在 CSS 上，则无法通过其他类型的字体来解决。

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

于 2013-08-23T12:02:15.153 回答