html - 自定义字体渲染问题

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，并且您将字体声明为正常 体重。该浏览器所做的可以说是正确的做法:由于没有粗体字，它们通过算法将字母加粗。

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

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