Question

我有一个我在FontForge中构建的自定义图标字体。我遇到了一些不寻常的事情，因为它会改变HTML中块级元素的高度，但不会改变Chrome中的块级元素。

示例：

<html>
    <head>
        <style>
            html { font-family: Arial, Helvetica, sans-serif; }
            .double { font-size: 200%; }
            div { margin-bottom: 1.5em; }

            @font-face {
                font-family: iconfont;
                src: url('http://cheesefish.net/techchoicesymbol-webfont.eot');
                src: url('http://cheesefish.net/techchoicesymbol-webfont.eot?#iefix') format('embedded-opentype'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.woff') format('woff'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.svg#techchoicesymbolmedium') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            .action {
                display: inline-block;
                line-height: 1.5;
                background-color: orange;
                padding: 0 0.5em;
            }

            .iconfont { font-family: iconfont; }
        </style>
    </head>
    <body>
        <div>
            <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span>
            <span class="action">&#x2603; Have a snowman</span>
        </div>

        <div class="double">
            <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span>
            <span class="action">&#x2603; Have a snowman</span>
        </div>
    </body>
</html>

实时： http://jsfiddle.net/aGHxw/2/ 或http://cheesefish.net/symbol-test.html如果您的浏览器不支持CORS

（注意：请确保结果窗格足够宽，以使2x大小的按钮并排）。

如您所见，每个黄色按钮上的显式行高为1.5。这应该覆盖字体中的任何奇怪的指标，实际上在Chrome中它 - 它的内容是24px高（或者在2x大小的按钮的情况下高48px）。

但在Firefox和IE两者中，结果略有不同。在Firefox中，带有我自定义webfont的按钮放大到25px高（或者对于2x大小的按钮，放大49px）。在IE中，尺寸没问题，但对于2x大小的按钮，带有我字体的按钮向上偏移了一个像素。

此字体中有一些略微奇怪的垂直指标;一些字形高1.5英尺（在基线以下延伸0.375em，在1.125em以上。上升为1024（em为1024单位），下降为0，在OS / 2表中所有上升和下降都设置为包含最大的字形（上升1152和下降-384，或者在'Win Descent'的情况下，+ 384）。

我做得很糟糕吗？我通过FontSquirrel @ font-face生成器运行此字体，您在上面的示例中看到的结果是关闭了“修复垂直指标”。打开这个设置会产生同样奇怪但不同的结果。

Answer 1

我认为你正在经历楼梯缩放：

当文字按比例放大或缩小时，浏览器会计算最终尺寸文本（指定的字体大小和应用的比例）和从平台的字体系统请求该计算大小的字体。但是如果你要求字体大小为9，比例为140％，那么结果字体大小为12.6并未明确存在于字体中系统，因此浏览器将字体大小舍入为12。这个导致文本的阶梯缩放。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

作为修复，您可以将text-rendering: geometricPrecision;添加到样式表。

Answer 2

在金属类型中，点尺寸被测量为字母上升的金属体的高度。这个概念使其成为数字型浏览器按基线在同一文本行中对齐字体。但字母形状在身体上的位置各不相同。这与x高度，上升和下降的变化有关。

两个块级元素具有不同高度的原因：

汽车来自@ font-face字体。
雪人在@ font-face字体中无法使用，因此来自默认的浏览器字体。
不同的字体！因此不同的x高度，上升和下降比。

请参阅我的fiddle作为身体和轮廓位置变化的证据。 JS：

* {
    font-size: 48px;
}
@font-face {
    font-family: iconfont;
    src: url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype');
}
span {
    background-color: gray;
    color: white;
}
.iconfont {
    font-family: iconfont;
}
.arial {
    font-family: Arial;
}
.times {
    font-family: Times;
}
.helvetica {
    font-family: Helvetica;
}

HTML：

<!-- All fonts are 48px but still have diffrent body size. -->
<!-- Iconfont doens't have a-z, A-Z, 0-9 but does display a snowman! :/ -->
<span class="iconfont">&#xE013; a-z, A-Z, 0-9 &#x2603;</span>

<span class="arial">Hx</span> 
<span class="times">Hx</span>

<span class="helvetica">Hx</span> 
<!-- Snowman isn't an iconfont glyph. -->
&#x2603;

铬：

Chrome screenshot

的FireFox：

FireFox screenshot

你的车很大，因为有些价值观错了。如果在FontForge中创建新字体，则默认值为em 1000，ascent，800和descent 200。

FontForge font info dialoge

轻微的事情：汽车它不在正确的Unicode插槽中。但在私人使用区的某个地方。它应该是AUTOMOBILE（U + 1F697）。

结论：字体有所不同。这没关系，因为字体是按基线对齐的。当图标进入字体世界时，它应该像字母一样，具有合理的基线位置，x高度，上升和下降。

自定义字体覆盖Firefox和IE中的显式行高

2 个答案: