html - 不同字体粗细的字体高度不同

Question

我刚刚在我的 CSS 文件中添加了一个 webfont。我想使用相同字体的不同粗细。 但是，如果我设置 font-size: 14px 至少 Chrome 和 Firefox 会以相当奇怪的方式呈现字体。

所有具有 font-weight: normal 的字符实际上只有 13 像素高，粗体部分高 15 像素。†

屏幕截图:(字体大小设置为 13 像素、14 像素和 15 像素):

CSS font-face 声明:

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger.eot');
    src: url('frutiger.eot?#iefix') format('embedded-opentype'),
         url('frutiger.woff') format('woff'),
         url('frutiger.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger-bold.eot');
    src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
         url('frutiger-bold.woff') format('woff'),
         url('frutiger-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

使用示例:

<p style="font-family: Frutiger; font-size: 13px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 14px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 15px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>

字体来源:

未知，文件已在我公司传递多年。我使用 Font Squirrel 生成 *.woff、*.svg 和 *.eot 文件。使用和不使用 Font Squirrel 提示功能的结果相同。

实例:

http://font-render-issue.herokuapp.com/

有办法解决这个问题吗？

_{†​​ 如果将第一行 (13px) 混合到第二行 (14px) 上，您可以看到非粗体部分完全匹配。如果您对第二行和第三行(15px)执行相同的操作，您可以看到粗体部分匹配(至少在高度方面)。}

Answer 1

1) 正如 Jukka K. Korpela 所说，没有 CSS 实际使用该字体。
2)您遇到的奇怪渲染是浏览器试图伪造粗体样式。

CSS:

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger.eot');
    src: url('frutiger.eot?#iefix') format('embedded-opentype'),
         url('frutiger.woff') format('woff'),
         url('frutiger.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger-bold.eot');
    src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
         url('frutiger-bold.woff') format('woff'),
         url('frutiger-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* You did this inline with style="...". */
/* The font from the first @font-face */
p { font-family: Frutiger; }
/* Gets the bold font from the second @font-face */
strong { font-weight: bold; } 

.small { font-size: 13px; }
.medium { font-size: 14px; }
.large { font-size: 15px; }

HTML:

<p class="small">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="medium">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="large">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>

编辑

该字体在我的机器(Mac、Firefox、Safari)上看起来很好。使用 woff 文件。

然后我将 example.html 提交到 browsershots: http://browsershots.org/http://font-render-issue.herokuapp.com/example.html#
很多不同的输出。 Windows 需要(更好的)提示。

字体的 Grid Fit('gasp' 表)有一个条目。它们的范围都定义为 65535，这是可以的。

我还碰到了版权信息。您可能需要考虑替代字体。 ;) http://joelcrawfordsmith.com/new/font/frutiger

这两种字体来自同一版本。但本地文件可能优先。您可以使用字体笑脸 hack 禁用加载本地文件。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺︎'),
         url('GraublauWeb.otf') format('opentype');
}

目前我能想到的就是这些。