Firefox忽略CSS字體重量屬性

不知道我是否使用正確的過程來顯示具有3個權重的字體 - 「普通」，「粗體」和「較亮」 - 但它似乎適用於大多數瀏覽器期待Firefox。Firefox忽略CSS字體重量屬性

Firefox似乎在使用`font-weight：lighter`;作爲默認？

字體在Chrome中如何顯示是我所追求的。

@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

來源

2013-07-01 Sam Holguin

你可以嘗試使用實際數字的字體重量。 400與font-weight：normal相同。 700與font-weight：bold相同。 100,200或300是附加值。你將不得不選擇一個你想要的效果。

來源

2013-07-01 23:14:46 user1640021

謝謝你的建議。在查看Mozilla論壇時，我發現今天晚上使用了一個字體重量的數值，但在嘗試正常使用400時仍然出現短缺。如果我刪除'打火機'的字體，無論是普通的還是粗體的作品。包括'打火機'出於某種原因在Firefox中引發！？！ –

'lighter'在'@ font-face'規則中對'font-weight'不是有效的值。有關規範，請參閱。 –

我懷疑其他@ font-face樣式只是被最後一個覆蓋。

基本上font-weight: lighter;正在使用，因爲它最後出現在具有相同特異性的三條規則列表中。

我將修剪下來一個@字體面並把字體粗細上的文字內容是這樣的：

@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-style: normal; 
} 

p{ 
    font-weight: lighter; 
}

來源

2013-07-01 23:19:33 apaul

如果我使用單個字體，比如lovelo-lighter，那麼'normal'字樣肯定不會顯示？或者我誤解了你的建議？ :) –

感謝@ user1640021

我嘗試遠一點與表達數值值爲font-weight，並且它似乎在Firefox中訣竅！

@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#lovelo') format('svg'); 
    font-weight: 400; 
    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#lovelo-bold') format('svg'); 
    font-weight: 700; 
    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#lovelo-light') format('svg'); 
    font-weight: 200; 
    font-style: normal; 
}

working example

來源

2013-07-02 09:33:25

@ apaul34208，但我使用3種不同的字體？ –

對不起剛看到那個... – apaul

@ apaul34208 bo問題:) –

Firefox忽略CSS字體重量屬性

回答

相關問題