Wordpress - 不同浏览器的字体粗细

Question

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

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

铬/ 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而不是默认的＆＃34;粗体＆＃34;和＆＃34;光＆＃34;。

示例：

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

 }

我希望这会有所帮助。