Wordpress -字体权重因浏览器而异

Question

重复澄清-这个问题涉及跨浏览器的字体权重差异，突出显示可能重复的问题与正确上传字体文件有关。

我正在使用html5blank的一个子主题将一个站点上传到Wordpress上，并在不同的浏览器上获得字体权重的变化，而我并不是只使用独立的前端文本文件。这就是我在文字上对悬停效应的意思-

浏览器/Safari

​

​

火狐(这是我想要的)

​

​

我尝试使用这个堆栈问题的答案中的代码

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

但这没什么用。如果我使用font-weight: bold;，那么它适用于Chrome，但却抛弃了火狐和Safari。这是我用的字体-

@font-face {
    font-family: 'Gotham-Light';
    src: url('fonts/Gotham-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

 body {
      font-family: 'Gotham-Light', sans-serif;
      font-size: 16px;
      -webkit-font-smoothing: subpixel-antialiased;

    }

有什么办法能解决这个问题吗？客户是一个专业的设计人员，并且在这样的事情上非常具体。任何帮助都很感激。

Answer 1

首先，为了实现跨浏览器兼容性，您应该拥有与该字体相关联的所有字体类型：

CSS3网络字体

你真的可以在这里做：

字体松鼠Webfont字体生成器

有时，您无法控制浏览器将如何处理不同的字体。Safari将与Firefox完全不同，等等。

最后:它确实有助于使用实际的字体权重，而不是默认的“粗体”和“轻型”。

示例：

 body {
  font-family: 'Gotham-Light', sans-serif;
  font-weight: 300;
  font-size: 16px;
  -webkit-font-smoothing: subpixel-antialiased;

 }

我希望这能帮到你。