Firefox/Mac 的 Helvetica Neue 基线渲染问题答案

【问题标题】：Helvetica Neue baseline rendering problem with Firefox/MacFirefox/Mac 的 Helvetica Neue 基线渲染问题
【发布时间】：2010-10-29 09:28:14
【问题描述】：

考虑一下这个 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">
body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    line-height:20px;
    font-size:14px;
}
.a {
    float:left;
}
.b {
    font-weight:bold;
}
</style>
</head>

<body>
    <div class="a">something1</div>
    <div class="a b">something2</div>
</body>
</html>

在除 Firefox/Mac 之外的所有浏览器上，它都能正确呈现，即粗体和非粗体文本位于同一基线上。

在 Firefox/Mac 上，粗体和非粗体文本之间存在 1 像素的基线差异。请参阅下面的屏幕截图。左边是 Safari 3.2.3，右边是 Firefox 3.0.10。

alt text http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png

有什么办法可以解决这个问题，例如使用一些 CSS，除了在角落里安静地哭泣并使用 Arial（我不想这样做——如果可以的话，我会留在 Helvetica Neue）。

【问题讨论】：

将字体切换为 Helvetica（不是 Neue），问题似乎是正常重量，而不是粗体。
嗯...当我切换到 Helvetica 时，似乎没有任何基线问题...所以特别是 Helvetica Neue 是罪魁祸首？
对，但是当你点击刷新时，正常的重量会向上移动，而粗体只会向上移动一点，这表明它存在渲染问题。

标签： css firefox fonts safari

【解决方案1】：

我的直觉反应是花车行为不端。我没有 Mac，但您可以尝试一下吗：

<span>something1</span><span class="b">something2</span>
<span class="a">something3</span><span class="a b">something4</span>

然后看看他们的基线是否正确？

【讨论】：

我刚刚验证它是浮动的。我把 div 改成了 span，去掉了浮动，粗体下降了一个像素。
好的。整个故事变得更奇怪了。请参阅jaanuskase.com/stuff/hnffrendering.zip — 它具有上述组合以及其他一些组合。您可以看到 HTML 代码及其呈现。我对图 5 中发生的事情完全感到迷惑——显然，您是否在其中一个 div 中有一个强文本不会影响下一行，但会影响它下面的浮动行。所以，是的，关于花车的一些事情。（唉，如何设置没有浮动的垂直文本边距？）
垂直文本边距是什么意思？ “margin-top：”规则受到尊重。如果您希望两个元素彼此并排而不将它们从正常流程中删除，您始终可以使用像 span 这样的内联元素，或者强制您的块元素像“display: inline”一样内联。

【解决方案2】：

以 line-height 为目标可以解决此问题，但不确定是否是罪魁祸首。如果您有 CSSEdit（或经常刷新），您可以通过将 line-height 一次增加 1px 来观察行为。

字体大小 14px 几乎不可能。 FF 将在某些行高处将粗体元素删除 1 个像素，而 safari 将在完全相反的位置删除它！（即 line-height 20px safari 会在 firefox 正常渲染时降低粗体 1 像素，这与您的问题相反）。

除了在 3 像素行高处，两者呈现相同。但是 3 像素的 line-height 很奇怪，如果它弄乱了您的布局，您可能需要通过调整 margin-top 来适应。

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 3px;
    float: left;
    margin-top: 9px;
}

字体大小为 13 像素时，所有内容在 21 像素的行高（更接近于常规行高）下呈现相同。

使用不同的字体大小和行高我相信你会找到你需要的。

或者破解它，如果你是这样滚动的：

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 21px;
    float: left;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Safari 3.0 and Chrome rules here */

    .a {
        line-height: 20px;
    }

}

【讨论】：

【解决方案3】：

我使用的是 Helevetica Neue 的许可版本，我注意到按钮中的常规文本和粗体文本之间存在这种差异。我可以通过将descent-override: 0%; 添加到我的@font-face 粗体版本声明来解决此问题。截至撰写本文时，并非所有浏览器都支持（没有 IE 11 或 Safari），但 Mac 通常在本地安装 Helvetica Neue，所以我先检查本地版本，然后我们只剩下不支持的 IE 11（像往常一样）。

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override

// index.scss

/* CDN version - we need to add descent-override to the CDN version only */
@font-face {
  font-family: "font-primary";
  font-style: normal;
  font-weight: 700;
  src:
    url("<MY-CDN-URL>.woff2")
      format("woff2"),
    url("<MY-CDN-URL>.woff")
      format("woff");
  font-display: swap;
  descent-override: 0%;
}
/* Local version */
@font-face {
  font-family: "font-primary-local";
  font-style: normal;
  font-weight: 700;
  src: local("Helvetica Neue Bold");
  font-display: swap;
}


$font-primary: "font-primary-local", "font-primary", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

之前：

之后：

【讨论】：