如何正确使用font-weight和font-style来声明CSS font-face？

Question

我试图使用@font-face CSS属性定义本地我的ttf字体如下：

开sans.css

 @font-face { 
     font-family: 'Open Sans'; 
     src: url('OpenSans-Regular.ttf') format('truetype'); 
     font-weight: normal; 
     font-style: normal; 
     } 
     @font-face { 
     font-family: 'Open Sans'; 
     src: url('OpenSans-Bold.ttf') format('truetype'); 
     font-weight: bold; 
     font-style: normal; 
     } 
     @font-face { 
     font-family: 'Open Sans'; 
     src: url('OpenSans-BoldItalic.ttf') format('truetype'); 
     font-weight: bold; 
     font-style: italic; 
     } 
     @font-face { 
     font-family: 'Open Sans'; 
     src: url('OpenSans-Light.ttf') format('truetype'); 
     font-weight: lighter; 
     font-style: normal; 
     } 
     @font-face { 
     font-family: 'Open Sans'; 
     src: url('OpenSans-Italic.ttf') format('truetype'); 
     font-weight: normal; 
     font-style: italic; 
     } 
     @font-face { 
     font-family: 'Open Sans'; 
     src: url('OpenSans-ExtraBold.ttf') format('truetype'); 
     font-weight: bolder; 
     font-style: normal; 
     } 

但不幸的是，它不工作，并且浏览器（Iceweasel 38.6.1）总是向我显示最后一个（特别粗体）。我也跟着this answer，这似乎是迄今为止最好的一个。

我做错了什么？

P.S.

我需要在本地使用打开三世字体面，没有任何互联网连接，所以谷歌字体API不脚在我的情况。

编辑

1. ttf文件是在CSS的同一目录下;
2. open-sans.css作为第一个CSS文件导入;

3. 在页面文本字体属性是：

   font-family: "Open Sans",sans-serif; 
   font-size: 14px; 
   

但它总是加载在CSS中声明的最后一个。

Answer 1

可能有许多原因，为什么它不工作：

1. 你的字体文件的路径不正确（确保.css文件与.ttf文件相同的文件夹。如果他们没有，请确保您的CSS指向正确的位置的路径。

2. 您的浏览器可能无法呈现.ttf文件。请检查，如有必要，提供额外的文件格式（.eot，.woff ，.svg ）以实现跨浏览器兼容性。您可能需要为此使用Web字体生成器。我个人最喜欢的是fontsquirrel，但我不推荐或认可它。我只是用它。 :)

3. 也许你没有在你的CSS中正确引用@font-face？正确的方式是：

your-element.your-class { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: normal|bold|{exact-weight}; 
    font-style: normal|italic; 
} 

而且，请注意，您使用它之前的@font-face必须申报。 CSS只读一次，只能继续前进，并且必须能够在读取代码时解释代码。

注：bolder和lighter是不是里面@font-face描述font-weight财产有效的CSS值（由BoltClock很好指出，在评论）。建议使用精确的字体重量（100 - 900）以确保您的字体呈现为相同的跨浏览器。 （即：用font-weight: 900;和font-weight: lighter;用font-weight: 200;代替font-weight: bolder;）。 （或者使用你的首选值，当然）。