Wordpress - 不同瀏覽器的字體重量

DUPLICATE CLARIFICATION - 此問題涉及跨瀏覽器在字體權重方面的差異，突出顯示的問題可能與正確上傳字體文件有關。Wordpress - 不同瀏覽器的字體重量

我正在使用html5blank的子主題將一個網站上傳到Wordpress，並且在不同的瀏覽器中獲取字體權重的變體，而這些變體不僅僅是獨立的前端文本文件。這就是我的意思是文本的懸停效果 -

的Chrome/Safari瀏覽器

火狐（這是我想要的）

我試圖使用這個堆棧的答案代碼question

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
}

但這並沒有奏效。如果我使用font-weight: bold;，那麼它適用於Chrome，但會拋出Firefox和Safari。這是我正在使用的字體 -

@font-face { 
    font-family: 'Gotham-Light'; 
    src: url('fonts/Gotham-Light.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 

} 

body { 
     font-family: 'Gotham-Light', sans-serif; 
     font-size: 16px; 
     -webkit-font-smoothing: subpixel-antialiased; 

    }

有沒有什麼辦法可以解決這個問題？客戶是一名設計專業人員，對這類東西非常具體。任何幫助讚賞。

來源

2017-10-18 Mike.Whitehead

您在那裏只有OTF字體。 – scoopzilla

@scoopzilla這就是我所擁有的。我需要更多嗎？如果是這樣，哪些？ –

[CSS導入字體]可能重複（https://stackoverflow.com/questions/32563123/css-import-fonts） – jmargolisvt

首先，你應該有所有與字體爲跨瀏覽器兼容性相關的字體類型：

CSS3 Web Fonts

實際上，你可以讓他們在這裏：

Font Squirrel Webfont Generator

而且有時你無法控制瀏覽器如何處理不同的字體。 Safari的行爲完全不同於Firefox等。

最後：它確實有助於使用實際的字體WEIGHTS而不是默認的「粗體」和「淺色」。

例子：

body { 
    font-family: 'Gotham-Light', sans-serif; 
    font-weight: 300; 
    font-size: 16px; 
    -webkit-font-smoothing: subpixel-antialiased; 

}

我希望這有助於。

來源

2017-10-18 16:36:14 scoopzilla

嗨，我已經上傳了所有其他字體類型，並且字體權重仍然有所不同 - 有什麼我可以做的或者是這樣嗎？ –

Wordpress - 不同瀏覽器的字體重量

回答

相關問題