Firefox忽略CSS font-weight属性 [英] Firefox ignoring CSS font-weight property

问题描述

不知道如果我使用正确的过程来显示一个有3个权重的字体 - normal，bold和lighter - 但是，它似乎适用于大多数浏览器。

Firefox似乎使用`font-weight：lighter`;作为默认值？

字体在Chrome中的显示方式是我的后续。

 code> @ font-face {
 font-family：'lovelo'; 
 src：url（'../ fonts / lovelo.eot'）; 
 src：url（'../ fonts / lovelo.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / lovelo.woff'）format 'woff'），
 url（'../ fonts / lovelo.ttf'）format（'truetype'），
 url（'../ fonts / lovelo.svg＃loveloblack'）format 'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
 
 @ font-face {
 font-family：'lovelo'; 
 src：url（'../ fonts / lovelo-bold.eot'）; 
 src：url（'../ fonts / lovelo-bold.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / lovelo-bold.woff '）format（'woff'），
 url（'../ fonts / lovelo-bold.ttf'）format（'truetype'），
 url（'../ fonts / lovelo-bold .svg＃loveloblack'）format（'svg'）; 
 font-weight：bold; 
 font-style：normal; 
} 
 
 @ font-face {
 font-family：'lovelo'; 
 src：url（'../ fonts / lovelo-light.eot'）; 
 src：url（'../ fonts / lovelo-light.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / lovelo-light.woff '）format（'woff'），
 url（'../ fonts / lovelo-light.ttf'）format（'truetype'），
 url（'../ fonts / lovelo-light .svg＃loveloblack'）format（'svg'）; 
 font-weight：lighter; 
 font-style：normal; 
} 
  

工作示例

解决方案

您可以尝试使用字体的实际数字，重量。
400与font-weight：normal相同。
700与font-weight：bold相同。
100,200或300是附加值。你必须选择一个你想要的效果。

Not sure if I'm using the correct process for displaying a font that has 3 weights - `normal`, `bold` and `lighter` - but, it seems to work in most browsers expect Firefox.

Firefox seems to be using `font-weight: lighter`; as default?

How the fonts appear in Chrome is what I'm after.

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo.eot');
    src: url('../fonts/lovelo.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo.woff') format('woff'),
         url('../fonts/lovelo.ttf') format('truetype'),
         url('../fonts/lovelo.svg#loveloblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-bold.eot');
    src: url('../fonts/lovelo-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-bold.woff') format('woff'),
         url('../fonts/lovelo-bold.ttf') format('truetype'),
         url('../fonts/lovelo-bold.svg#loveloblack') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-light.eot');
    src: url('../fonts/lovelo-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-light.woff') format('woff'),
         url('../fonts/lovelo-light.ttf') format('truetype'),
         url('../fonts/lovelo-light.svg#loveloblack') format('svg');
    font-weight: lighter;
    font-style: normal;
}

working example

解决方案

You could try using the actual numbers for the font-weight. 400 is the same as font-weight: normal. 700 is the same as font-weight: bold. 100, 200, or 300 are the additional values. You would have to choose one that is the effect you want.

这篇关于Firefox忽略CSS font-weight属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！