字体高度因字体粗细而异

Question

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

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

屏幕截图（font-size设置为13px，14px和15px）：

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

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

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

这是我现在可以想到的全部。