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

Question

因此，我正在开发一个需要在多种浏览器中运行的网站，无论是桌面设备，移动设备还是您拥有的设备。像mac设计师经常做的那样，设计师使用Helvetica Neue作为整个网站的字体。我试图让它通过@font包含起作用，它显示得很好......但是线高度给了我一个溃疡。

见下图，这是Arial，Helvetica Neue Std和Helvetica Neue Pro。 Windows Chrome会像旗舰一样处理所有三个，但其余部分则非常不一致。他们现在都设置为行高18px，我也试过行高：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，因为试图制作文本垂直居中的工具栏和按钮证明是一场噩梦。我肯定不想嗅探操作系统和浏览器，并为每个元素编写自定义行高。

Answer 1

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

总之，不同浏览器处理垂直间距指标的方法可能是导致这些不一致的原因。有些从字体最高上方的顶部开始计算，并在下面添加所有行空间，而其他人则在文本行之前和之后分割间距。

Answer 2

这看起来像 testList.sort(Comparator.comparing(ClassName::getFieldName).reversed()); 问题。该字体永远不会正确对齐，因为它的垂直指标很差。在浏览器中一致地呈现字体的唯一方法是修复其垂直指标。

大多数字体提供商都允许您在下载之前更新并修复字体的垂直指标。他们可能会以不同方式调用该选项。例如： Fontsquirrel 称之为 testList.stream().sorted(Comparator.comparing(ClassName::getFieldName).reversed()).collect(Collectors.toList()); ， myFonts.com 称之为vertival metrics等。

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

Answer 3

请试一试。

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

font-size：100％会自动重置你的字体默认值，你需要在div等手动指定字体大小。