世纪哥特式字体渲染

Question

我在网站上遇到过Century Gothic一段时间的麻烦。似乎当font-weight为粗体时， l和i字符之间没有区别（检查图像）。

看起来如何

它应该是什么样子

所有浏览器（包括Chrome和Firefox）都会发生这种情况，我正在导入这样的字体，因为所有不同的样式和权重都使用不同的文件。大胆是这样的：

@font-face {
    font-family: 'CenturyGothicStd';
    src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot');
    src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot?#iefix') format('embedded-opentype'),
        url('./fonts/CenturyGothicStd/3099F9_2_0.woff2') format('woff2'),
        url('./fonts/CenturyGothicStd/3099F9_2_0.woff') format('woff'),
        url('./fonts/CenturyGothicStd/3099F9_2_0.ttf') format('truetype');

    font-weight: bold;
    font-style: normal;
}

并在身体上调用它：

body {
  font-family: CenturyGothicStd, "Century Gothic", CenturyGothic, AppleGothic, "Glyphicons Halflings", sans-serif;
}

我不明白这个问题是否会在我的网站或字体上显示出来。 什么可能引发这个问题？

Answer 1

我假设您需要添加另一种字体，其字体看起来像这样：

@font-face {
    font-family: 'CenturyGothic';
    src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot');
    src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot?#iefix') format('embedded-opentype'),
        url('./fonts/CenturyGothicStd/3099F9_2_0.woff2') format('woff2'),
        url('./fonts/CenturyGothicStd/3099F9_2_0.woff') format('woff'),
        url('./fonts/CenturyGothicStd/3099F9_2_0.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'CenturyGothicBold';
    src: url('./fonts/CenturyGothicBold/3099F9_2_0.eot');
    src: url('./fonts/CenturyGothicBold/3099F9_2_0.eot?#iefix') format('embedded-opentype'),
        url('./fonts/CenturyGothicBold/3099F9_2_0.woff2') format('woff2'),
        url('./fonts/CenturyGothicBold/3099F9_2_0.woff') format('woff'),
        url('./fonts/CenturyGothicBold/3099F9_2_0.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}