Html 不同字体权重的字体高度不同

我刚刚在CSS文件中添加了webfont。我想使用同一字体的不同重量。 但是，如果我设置

font-size:14px

至少Chrome和Firefox会以一种非常奇怪的方式呈现字体

所有字体大小为

的字符：正常

实际上只有13px高，粗体部分为15px高。†

屏幕截图：（

字体大小

设置为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-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>

ABCABCABCDABCDASDFASDF

ABCABCabcdabcASDFASDF

ABCABCabcdabcASDFASDF

字体来源：

@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文件。使用和不使用字体Squirrel的提示功能，结果相同

现场示例：

@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>

有没有办法解决这个问题

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

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

CSS:

HTML:

---

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

向我们展示一些代码，并确定字体的来源。解释为什么您认为字符是13px高。代码仍然缺失（没有HTML，没有实际使用字体的CSS），并且您没有指定从何处获得此“Frutiger”。@JukkaK.Korpela抱歉，我添加了缺失的位。如果您需要更多详细信息，请与我联系。您能提供字体文件吗？你能试试

文本呈现：几何精度？
文本呈现
听起来很有希望，我不知道。不幸的是，它不会改变任何东西。您可以在同一
字体系列下声明不同的权重和样式，因此您可以只说
字体权重：bold
，而不是
字体系列：FrutigerBold
。@allcaps与您的解决方案相比
strong
甚至比以前更大（粗体字体+假浏览器粗体）。如果我为
strong
设置
font-weight:normal
，我最终会遇到与以前相同的渲染问题。@RoelN:谢谢您的评论。你说得对：使用相同字体的姓氏可以让事情变得简单，并提供一个后备方案。谢谢你的分析！正如你所指出的，版权显然是个问题。让我们看看我的老板是否有意购买Web使用的字体，或者是否考虑您提出的替代方案（这在我们的情况下肯定是足够的，并且将解决我的渲染问题）。