自定义字体渲染问题

Question

所以我有时想强调某些像这样的词：

<h1>I want to <span class="emphasis">emphasize</span> some text.</h1>

同时，我想为h1文本使用自定义字体：

@font-face
{
    font-family: 'MuseoSlab';
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot');
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot?#iefix') format("embedded-opentype"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format("svg"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.woff') format("woff"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}

Example here.

问题是，Windows中的Chrome与范围文本重叠：

Firefox和IE似乎不能平滑地渲染字体：

Opera似乎按照我想要的方式渲染它：

有谁能告诉我发生了什么，以及如何解决这些问题？

修改：

有时候我在Chrome中遇到了这个令人震惊的问题;有时候我没有。我也安装了最新的Chrome：

Answer 1

Firefox和IE以他们的方式显示字体的原因是默认情况下h1元素具有font-weight: bold，并且您将字体声明为normal权重。这个浏览器的作用可以说是正确的举动：缺乏粗体字体，它们在算法上加粗字母。

为避免这种情况，请添加h1 { font-weight: normal; }。或者，使用字体系列的粗体字。

Chrome中的奇怪重叠听起来像是特定于安装的问题，因此您应首先考虑更新或重新安装Chrome。

Answer 2

我曾经遇到过与Chrome完全相同的问题。它似乎与Chrome中的SVG字体呈现有关。如果更改@font-face中字体文件的顺序，以便SVG位于列表的末尾，则问题将消失。您在jsfiddle上的示例在当前版本的Chrome（29.0.1547.76）中仍然呈现不正确，因此渲染错误仍然存​​在。

Answer 3

希望这有助于将来的某些人，但我可以通过以下问题中的解决方案来解决此问题：Chrome svg-Font-Rendering breaks Layout

这成功修复了非光滑边缘而不会破坏布局和/或压缩字体。