如何更改後備字體的字體大小和樣式

我正在使用'自由式腳本'字體來將我的網站標題和格式設置爲後備字體。我已經從松鼠下載了'freestyle'webfontkit，並使用@ font-face來呈現標題樣式。對於那些支持@ font-face的瀏覽器，但對於那些不支持@ font-face的瀏覽器，比如較老的Android版本的默認瀏覽器，我都遇到了問題。如何更改後備字體的字體大小和樣式

的問題是，與自由式腳本我想保持

h1 
    { 
    font-size:25px; 
    font-style:normal; 
    }

但我的備用字體（格魯吉亞）我想保持

h1 
    { 
     font-size:18px; 
     font-style:italic; 
    }

一個解決方案，我在網上發現是使用modernizr ... http://webdesignerwall.com/tutorials/css3-font-face-design-guide 但我在尋找一個更簡單，沒有js的解決方案，因爲我的網站在頁面加載之前已經使用了很多js，並且由於該頁面的加載速度有點慢

我發現了一個類似的問題對SO ... Selectively Style Fallback Fonts Without JavaScript? 但was'nt除了Modernizr的解決方案的任何明確的答案......

這將是很大的幫助，如果有人可以提供一些解決這個問題。

...在此先感謝

來源

2013-12-18 kruxatur

這是一個真正的問題？自從2.2版本開始，Android支持'@ font-face'。 –

沒有方法，我知道那不使用modernizer。把它放在你的html頭部。不知道沒有它，人們如何生活。爲了保持它的小，只需使用@ font-face的選擇即可使用Modernizer的最小副本。另外，如果你在Apache服務器上，通過向.htaccess添加一小段代碼來GZIP你的html，css和js。這會加快你很多。

然後執行以下操作：

.fontface h1 
{ 
    font-size:25px; 
    font-style:normal; 
}

或者單獨和剛剛離開的現代瀏覽器做：

.no-fontface h1 
{ 
    font-size:18px; 
    font-style:italic; 
}

Modernizer

來源

2013-12-18 16:47:41 Christina

謝謝出租車關於GZIP的提示。我知道最簡單的現代化裝置，但對使用它很懷疑...看起來GZIP會做的訣竅..現在我將與Modernizer ...榮譽:) – kruxatur

有沒有辦法來檢測字體面的支持，而JS 。最簡單的方法是使用modernizr作爲建議或檢查Paul Irish的this article。

由於@font-face在臺式機瀏覽器上有相當的good support我會全力以赴並假設您需要對移動瀏覽器進行回退。如果是這種情況，也許您應該查看移動瀏覽器的服務器端檢測（請參閱this question）。

最後，您可以嘗試使用font-size-adjust屬性（MDN docs和article）。我以前從來沒有使用過它，但我無法瞭解各種瀏覽器支持多好，因此您需要進行一些測試。

來源

2013-12-18 17:10:22

謝謝Teo的一些真的很不錯的鏈接......我認爲font-size-adjust將會是我正在尋找的確切的東西，但是它只能被FF支持。我可以在沒有將我的網站標題改爲不支持@ font-face的一小組瀏覽器的情況下生活，但font-size-adjust是必須的...我希望它能夠被所有瀏覽器支持...不管怎樣，再次感謝.SO岩石 – kruxatur

如果您不想使用Modernizr，我寫了一個stand-alone check that's 2.2KB minimized，並在HTML標記中添加了一個類，以指示是否支持@font-face。然後，您可以調整您的樣式相同的方式，用Modernizr的：

.fontfacerender h1 
{ 
    /* special font */ 
} 

.no-fontfacerender h1 
{ 
    /* default font */ 
}

來源

2013-12-18 19:03:33 RoelN

謝謝RoelN.I'll會試一試。 – kruxatur

如何更改後備字體的字體大小和樣式

回答

相關問題