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.

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 (this is what I want)

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

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

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.

回答1:

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

CSS3 Web Fonts

You can actually make them here:

Font Squirrel Webfont Generator

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

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

Example:

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

 }

I hope this helps.