2012-08-05 32 views
5

我使用@ font-face將兩個外部字體加載到我的網頁中。它們在Chrome中加載完美,但是當我在IE中嘗試時,瀏覽器在加載頁面時顯示一些默認字體,然後根據我的css @ font-face將字體更改爲正確的字體。在CSS中加載@ font-face時如何去除瀏覽器中的默認字體? 「FOUT」

如何在頁面加載時從IE和其他瀏覽器中刪除默認字體?我想刪除所謂的FOUT(無格式文本的閃光)。我有沒有辦法通過樣式表來完成它?

感謝您的幫助!

+0

user1577346,因爲我的答案適用於您,請**接受**答案,該答案將在其上放置綠色複選標記。謝謝。 – arttronics 2012-08-07 20:54:17

回答

0

您可以使用CSS轉換在N毫秒之後淡入您的文本,或者您覺得足夠加載字體資產的任何內容。 css3 transition animation on load?

+0

不是一個好的答案。您提供的鏈接顯示如何在鼠標懸停事件期間「淡出」文本。 – arttronics 2012-08-05 13:28:23

+0

我改變了你的鏈接 – 2012-08-05 15:03:24

+1

在沒有提供任何實際回答這個問題的相關代碼的情況下發佈一個鏈接到其他SO問題是一個禁忌,通常是作爲評論。 – arttronics 2012-08-05 20:08:17

3

對於您不希望瀏覽器默認字體,font-size CSS屬性設置爲0px,並確保您已聲明在@font-face類名CSS 規則font-size

如果您還想使用專用腳本解決此問題(Firefox 3.5/3.6或Internet Explorer 7-9),請查閱FOUT-B-Gone JavaScript解決方案。

+0

這會工作,但我想要一個像modernizr一樣的功能檢測器的後備,以防萬一font-face不可用,並且您可以將字體大小設爲正值 – 2012-08-05 13:15:37

+0

您可以始終在字體期間恢復字體大小後退規則的網頁,但這是OP可能不需要的不同要求。 – arttronics 2012-08-05 13:18:11

+0

你確定'@ font-face'中允許有'font-size'嗎?它不在http://www.w3.org/TR/css3-fonts/#font-prop-desc – atlavis 2012-08-05 13:35:21

相關問題