@fontface FireFox（10）渲染文字非常粗體

我已經在css中使用@ font-face實現了一種字體，並且在Safari中加載時看起來更加粗壯。有人知道可能導致這種情況嗎？@fontface FireFox（10）渲染文字非常粗體

@font-face { 
    font-family: 'SerifaBold'; 
    src: url('/css/serifbol-webfont.eot'); 
    src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/css/serifbol-webfont.woff') format('woff'), 
     url('/css/serifbol-webfont.ttf') format('truetype'), 
     url('/css/serifbol-webfont.svg#SerifaBold') format('svg'); 
    font-weight: 100; 
    font-style: normal; 

}

來源

2012-03-13 waterschaats

我發現同樣的事情發生。它幾乎就好像它的整體重量超過了它應該是的。也許嘗試用非粗體字體作爲出發點？

來源

2012-03-13 16:36:13 Dan

您的字體規則告訴瀏覽器這是一種超輕型字體（font-weight: 100部分）。那麼您大概會要求瀏覽器使用此字體來顯示正常重量（font-weight: 400）或粗體（font-weight: 700）的文本。瀏覽器看到它有一個超輕的字體（因爲你已經這麼說了），並且需要一個正常的字體，並且它實現了所謂的「合成粗體」：人爲地將字母粗體繪製幾次，並略微偏移。

合成粗體沒有標準，瀏覽器的默認行爲也不同。

如果您嘗試將此字體用於粗體文本，並且它已經是一張大膽的臉，您應該在您的字體規則中使用font-weight描述符進行說明。

來源

2012-03-13 20:21:08

我客戶網站上的同樣的問題讓我發瘋，但我終於找到了問題。當您在任何CSS類中調用「SerifaBold」時，請確保您也將font-weight: normal;

終於爲我解決了這個問題。

來源

2012-04-10 18:26:01 mayks

當使用包含字體系列中包含不同權重和/或斜體字體的「字體變體」的網頁字體時，請始終應用「font-style：normal」& font-weight：400; （或font-weight：normal）到每個樣式聲明。確保以不同的方式明確聲明每個FONT-FAMILY每個變體：

EG：我使用Helvatica從抵達Neue fonts.com

strong, b { 
    font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif; 
    font-weight: 400; 
} 

em, i { 
    font-family: 'HelveticaNeueW01-56It', Arial, sans-serif; 
    font-style: normal; 
}

Firefox會「助陣」你的字體由faux-粗體&人造斜體你的漂亮@ font-face類型使他們變得非常醜陋，毀了設計師在創建字體時所做的所有努力。

這適用於字體的所有來源，包括typekit，google，fonts.com和本地託管字體。

來源

2012-08-20 21:55:14

@fontface FireFox（10）渲染文字非常粗體

回答

相關問題