Wordpress-字体权重因浏览器而异 [英] Wordpress - font weight varying across browsers

问题描述

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

DUPLICATE CLARIFICATION - This question relates to cross browser differences in font weights, the question highlighted as possible duplicate relates to uploading font files correctly.

我正在使用html5blank的子主题将网站上传到Wordpress，并且在不同的浏览器中获得的字体粗细有所不同，而不仅仅是支架单独的前端文本文件。
这就是我对文本的悬停效果的意思-

I'm uploading a site onto Wordpress using a child theme of html5blank and am getting variations of font-weights across different browsers which I'm not getting with just the stand alone front-end text files. This is what I mean on text for a hover effect -

Chrome / Safari

Firefox（这就是我想要的）

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

I've tried to use the code from the answer of this stack question

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

但这没用。如果我使用 font-weight：bold; ，则它适用于Chrome，但会淘汰Firefox和Safari。这是我正在使用的字体-

But that hasn't worked. If I use font-weight: bold; then it works for Chrome but throws out Firefox and Safari. This is the font I'm using -

@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;

    }

有什么办法可以解决此问题？客户是一名设计专业人员，并且对这样的事情非常具体。

Is there any way I can fix this? The client is a design professional and was quite specific on stuff like this. Any help appreciated.

推荐答案

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

First, you should have all of the font types associated with that typeface for cross-browser compatibility:

CSS3网络字体

您实际上可以在此处制作它们：

You can actually make them here:

字体松鼠Web字体生成器

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

And sometimes you cannot control how browsers will handle different fonts. Safari will act totally different than Firefox, etc.

最后：它确实有助于使用实际字体WEIGHTS代替默认的 bold和 light。

Lastly: It does help to use actual font WEIGHTS instead of the default "bold" and "light".

例如：

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

 }

我希望这会有所帮助。

这篇关于Wordpress-字体权重因浏览器而异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！