8

因此，我正在开发一个需要跨多种浏览器运行的网站，无论是桌面浏览器、移动浏览器还是您拥有的浏览器。正如 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，因为试图制作文本垂直居中的工具栏和按钮被证明是一场噩梦。我当然不想嗅探操作系统和浏览器并为每个元素编写自定义行高。

4

3 回答 3

2

我可以提供这篇深入的背景文章，说明为什么行高很痛苦。

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

于 2012-10-04T04:21:47.983 回答
2

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

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

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

于 2016-07-05T16:04:15.470 回答
0

请试试这个。

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

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

于 2012-10-04T04:03:09.700 回答