如何跨浏览器标准化 Helvetica Neue 行高（不是粗体文本）？

Posted 2023-03-06

【中文标题】如何跨浏览器标准化 Helvetica Neue 行高（不是粗体文本）？

【英文标题】：How can I standardize Helvetica Neue line heights cross-browser (not about bold text)?

【发布时间】：2012-09-24 16:21:06

【问题描述】：

所以我正在开发一个需要在多种浏览器上运行的网站，无论是桌面浏览器、移动浏览器还是您拥有的浏览器。正如 mac 设计师经常做的那样，设计师们使用 Helvetica Neue 作为整个网站的字体。我正在尝试通过 @font 包含来让它工作，并且它显示得很好..但是线高让我溃疡。

见下图，这是 Arial、Helvetica Neue Std 和 Helvetica Neue Pro。 Windows Chrome 像冠军一样处理所有这三个，但这里的其余部分非常不一致。它们现在都设置为 line-height 18px，我也尝试了 line-height: 1，但无济于事。

我在本次测试中使用的 html/CSS：

<style type="text/css">

    @font-face  font-family: "Helvetica Neue Std"; src: url( 'HelveticaNeueLTStd-Md.otf' ) format( "opentype" ); 
    @font-face  font-family: "Helvetica Neue Pro"; src: url( 'HelveticaNeueLTPro-Md.otf' ) format( "opentype" ); 

    .box 
        float: left;
        padding: 10px;
        border: 1px solid red;
        font-size: 18px;
        line-height: 18px;
    

    .box .text_1  font-family: Arial; 
    .box .text_2  font-family: "Helvetica Neue Std" 
    .box .text_3  font-family: "Helvetica Neue Pro" 

</style>

<div class="box">
    <span class="text_1">Aw Nuts</span>
</div>

<div class="box">
    <span class="text_2">Aw Nuts</span>
</div>

<div class="box">
    <span class="text_3">Aw Nuts</span>
</div>

我是不是运气不好？我现在正在考虑只使用 Arial，因为试图制作文本垂直居中的工具栏和按钮被证明是一场噩梦。我当然不想嗅探操作系统和浏览器并为每个元素编写自定义行高。

【问题讨论】：

您是否尝试过调整 ems 中的字体和行高？

@Erik，刚刚尝试过，使用 1.1em 而不是 18px。这里和那里有一些 1px 的变化，但总体效果保持不变。

我认为这个问题可能比行高更宽。这可能是浏览器实际呈现字体的方式，在这种情况下，完成一些应该很简单的事情可能有点困难。尝试通过google.com/webfonts 包含字体，看看您是否遇到了同样的问题。

【参考方案1】：

请试试这个。

*
   margin: 0px;
   padding: 0px;
   font-size: 100%;
   vertical-align: baseline;
 

font-size: 100% 会自动重置您的字体默认值，您需要在 p a div 等上手动指定字体大小。

【讨论】：

感谢您的想法，虽然它在这里和那里收紧了一些东西，但浏览器之间的差异仍然存在。

【参考方案2】：

我可以在why line height is a pain 上提供这篇深入的背景文章。

总之，不同浏览器处理垂直间距度量的方式可能是导致这些不一致的原因。有的从字体最高升序的顶部开始计算，并在下方添加所有行间距，而另一些则分割文本行前后的间距。

【讨论】：

我想我以前读过这个，但感谢你的链接。看来我只是运气不好，归根结底。是宋体！

【参考方案3】：

这看起来像是vertival metrics 问题。字体永远不会正确对齐，因为它的垂直指标很差。使字体在浏览器中一致呈现的唯一方法是修复其垂直指标。

大多数字体提供商允许您在下载字体之前更新和修复垂直指标。不过，他们可能会以不同的方式调用该选项。例如：Fontsquirrel 称之为 Auto-Adjust Vertical Metrics，myFonts.com 称之为 Line Height Adjustments，等等。

Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?