控制@ font-face瀏覽器下載

在css中使用@ font-face時，瀏覽器會在字體之前加載我的頁面文本，這會導致字體從一種樣式跳到另一種樣式（從Arial到myfont）。例如，使用濃縮字體時，問題在視覺上非常明顯。控制@ font-face瀏覽器下載

我只想顯示我用@ font-face選擇的一種字體。做這個的最好方式是什麼？

2012-04-06 Nick B

這是一個很好的問題:)的 – tybro0103 2012-04-06 01:28:52

可能重複【予壓@字體 - 面對字體停止Firefox閃爍/延遲]（http://stackoverflow.com/questions/3379645/preload-font-face-fonts-to-stop-firefox-flicker-delay） – Knu 2012-04-06 03:59:06

在某些瀏覽器（Firefox 3.5/3.6，IE 7-9）中這是一個非常有名的問題。 WebINK有一個JavaScript文件可用，這將允許您解決該問題。

來源

2012-04-06 01:45:05 goric

這就是所謂的閃存的無風格文本，正如你所提到的，字體文件與頁面的其餘部分一起加載，其文本將使用默認或備用字體樣式，直到新的字體已加載並可應用。

看來最大限度地減少這種影響發生的最好方法是儘量減少客戶端加載自定義字體的時間。您可以通過gZip採取兩項措施來實現此目標：compressing your font files，並通過瀏覽器的瀏覽器指定字體文件進行長期緩存，以便通過far-future expires header進行後續查看。

如果FOUT對用戶來說仍然很刺耳，您可以指定一個類似形狀的字體，這個字體可能會安裝在大多數瀏覽者的機器上作爲回退，以便在自定義字體加載時保持頁面大小相對一致。例如，對於濃縮字體，大多數觀看者已經將Impact作爲可用字體或Arial Narrow，它們都遵循「濃縮」風格。

如果一切都失敗了，您可以始終使用color: rgba(0,0,0,0)對文檔的整個文本進行樣式設置，並使用JavaScript在定時器結束時刪除該規則。

來源

2012-04-06 03:37:31 Aaron

這就是所謂的FOUT處理它在我的經驗，最好的方法是使用谷歌的字體裝載機：

https://developers.google.com/webfonts/docs/webfont_loader

基本上你做的是讓頁面加載正常（在此期間，身體被隱藏樣式化的字體塊是隱藏的，你的選擇），一旦它們被加載了一個類被添加到頁面的主體，這觸發了樣式字體的顯示。

該腳本將這些類，所以你可以適當風格：

.wf-inactive - failed to load 
.wf-loading - during load 
.wf-active - loaded fine

唯一的缺陷是，它需要Javascript ..

來源

2012-04-06 03:42:47

控制@ font-face瀏覽器下載

回答

相關問題