1

我有一个在 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.5em 高（在基线下方延伸 0.375em，在上方延伸 1.125em。上升为 1024（em 为 1024 个单位），下降为 0，在 OS/2 表中，所有上升和下降都设置为包含最大字形（上升 1152 和下降 -384，或者在“Win Descent”的情况下，+384）。

我在做什么可怕的事情吗？我已经通过 FontSquirrel @font-face 生成器运行了这个字体，你在上面的示例中看到的结果是关闭了“修复垂直度量”。打开该设置会产生同样奇怪但不同的结果。

4

3 回答 3

0

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

当文本被放大或缩小时，浏览器会计算文本的最终大小（即指定的字体大小和应用的比例），并从平台的字体系统请求计算出的字体大小。但是，如果您请求字体大小为 9 且比例为 140%，则生成的 12.6 字体大小不会明确存在于字体系统中，因此浏览器会将字体大小四舍五入为 12。这导致文本的阶梯式缩放。

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

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

于 2013-09-24T16:17:17.840 回答
0

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

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

  • 这辆车来自@font-face 字体。
  • 雪人在@font-face 字体中不可用，因此来自默认浏览器字体。
  • 不同的字体！因此不同的 x 高度、上升和下降比率。

将我的小提琴视为身体和轮廓位置变化的证据。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;

铬合金：

铬屏幕截图

火狐：

火狐截图

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

FontForge 字体信息对话框

小事：汽车不在正确的 Unicode 插槽中。但在私人使用区的某个地方。它应该在AUTOMOBILE (U+1F697)。

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

于 2013-09-27T22:38:23.983 回答
0

我通过 FontSquirrel 处理的客户自定义字体遇到了类似的挑战。在桌面版 Chrome 中，浏览器将使用在 FontForge 中的 Element > Font Info > OS/2 > Metrics 中找到的“Win Ascent”值，但移动版 Chrome 使用的是在 Element > Font Info > General 选项卡中找到的 Ascent 值。这导致两个浏览器中的行高看起来不同。

我的解决方案是显式覆盖 CSS 中的 ascent 值，在您的示例中如下所示：

@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;
  ascent-override: 100%;
}
于 2021-09-13T15:31:22.087 回答