如何跨浏览器标准化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

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

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

字体：不良的垂直度量会导致跨浏览器的行高呈现不一致。解决方案？