CSS - Chrome / Safari相同的字体重量在上传到Wordpress时不适用

Question

我有一个前端网站，我使用HTML5 Blank子主题上传到Wordpress。在某些悬停文本上以及页脚中的字体权重存在很明显的差异 - 我在单独的前端版本中没有看到。

示例 - 页脚

示例 - 悬停文字

这就是我的风格 -

的style.css

@font-face {
    font-family: 'GothamLight';
    src: url('fonts/GothamLight.eot');
    src: url('fonts/GothamLight.eot') format('embedded-opentype'),
         url('fonts/GothamLight.woff2') format('woff2'),
         url('fonts/GothamLight.woff') format('woff'),
         url('fonts/GothamLight.ttf') format('truetype'),
         url('fonts/GothamLight.otf') format('opentype'),
         url('fonts/GothamLight.svg#GothamLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {

    font-family: 'GothamLight', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
     -webkit-font-smoothing: subpixel-antialiased !important;

}

我已经搜索谷歌和SO寻找答案 - 我已经尝试了所有这些但是似乎都没有。有什么我想念的吗？

Answer 1

为您要使用的每个字体权重指定字体：

@font-face {
font-family: 'GothamLight';
src: url('fonts/GothamLight.eot');
src: url('fonts/GothamLight.eot') format('embedded-opentype'),
     url('fonts/GothamLight.woff2') format('woff2'),
     url('fonts/GothamLight.woff') format('woff'),
     url('fonts/GothamLight.ttf') format('truetype'),
     url('fonts/GothamLight.otf') format('opentype'),
     url('fonts/GothamLight.svg#GothamLight') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'GothamLight';
src: url('path/to/weight500font');
src: url('path/to/weight500font') format('embedded-opentype'),
     url('path/to/weight500font') format('woff2'),
     url('path/to/weight500font') format('woff'),
     url('path/to/weight500font') format('truetype'),
     url('path/to/weight500font') format('opentype'),
     url('path/to/weight500font') format('svg');
font-weight: 500;
font-style: normal;
}

Answer 2

看起来它与CSS中的权重混淆有关，并与webkit-font-smoothing结合使用。 “轻”字体通常为300重量，然后您尝试以500重量渲染。我可以想象许多浏览器都是“虚假加粗”字体。我怀疑Wordpress有一些字体平滑/重量覆盖。

我建议删除您的font-weight: 500和webkit-font-smoothing属性并从那里开始。如果你想要一个500重量的字体，我还建议找到500重量的Gotham - 如果它存在的话。如果没有，我建议不要试图强制浏览器使用它！