Issue with rendering Open Sans Light on Firefox

问题

I have no problem displaying html pages on IE and Chrome using Open Sans Light, however when using Firefox, it does not understand this type of fonts.

This is a .css sections defining my fonts:

 .txtName
 {
     margin-left: 18px;
     font-size: 20px;
     color: #0140be;
     font-family: 'Open Sans Light' !important;
     font-weight:normal;
     line-height: 1.4em;   
 }

This is the part of html file that need to be displayed the same on IE, Chrome and FF:

<div class="txtName-Main">
     <h1 class="txtName">Your pathway to success starts here</h1>
</div>

What can be the problem?

Thx

回答1:

'Open Sans Light' is not a valid representation of the font-family. The 'Light' (300 weight) version of 'Open Sans' is:

In the head of your document:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

In your CSS:

font-family: 'Open Sans', sans-serif;
font-weight: 300;

回答2:

I see a few suggestions, But what worked for me is loading my fonts with:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>

and in .css I had to use the following definition:

color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;

So, instead of having:

font-family: 'Open Sans Light'

I used

font-family: 'Open Sans';
font-style: Light;

and it worked

回答3:

it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:

font-family: open sans condensed light, open sans condensed;

i used it for assigning fonts to different divs. cheers, hope this helps.

回答4:

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">

Goes in the <head> element and downloads light and regular fonts

In css style: ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{ font-family:'Open Sans', sans-serif; font-weight: 300; font-style: normal; sets up (most) elements for web-based font and a (local) fall back font. font-style: normal is default, so it is not required. (Font-style:Light is not valid property.)

来源：https://stackoverflow.com/questions/25531399/issue-with-rendering-open-sans-light-on-firefox

标签

html

css

firefox

styles