如何正確使用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;）。 （或者使用你的首選值，當然）。