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

Question

重复澄清 - 此问题与字体粗细的跨浏览器差异有关，突出显示为可能重复的问题与正确上传字体文件有关。

我正在使用 html5blank 的子主题将网站上传到 Wordpress，并且我在不同的浏览器中获得了不同的字体权重，而仅使用独立的前端文本文件并没有获得这些变化。 这就是我对悬停效果的文本的意思 -

Chrome/Safari

Firefox（这就是我想要的）

我尝试使用此堆栈的答案中的代码question

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

但这并没有奏效。如果我使用font-weight: bold;，那么它适用于 Chrome，但会抛出 Firefox 和 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 Web Fonts

您实际上可以在这里制作它们：

Font Squirrel Webfont Generator

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

最后：使用实际字体 WEIGHTS 代替默认的“粗体”和“浅色”确实有帮助。

例子：

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

 }

我希望这会有所帮助。