自定義字體直到顯示時才加載（顯示時不加載：none）

Question

我有一個自定義字體，存儲爲img/roboto/Roboto-Medium.ttf。我使用初始化它在我的CSS樣式表：

@font-face { 
    font-family: robotomedium; 
    src: url("img/roboto/Roboto-Medium.ttf"); 
} 

目前只有一個DIV在使用的字體，它是在display: none;直到JQuery的消失它：

<div id="test" style="font-family: robotomedium; display: none;">Some text</div> 

需要時，JQuery的使div出現使用：

$("#test").fadeIn(); 

由於字體不存在於用戶的系統上，它需要從服務器上下載。我認爲客戶端會在頁面加載時下載字體，但它似乎要等到有可見的文本。 當用戶看到div出現時，字體會在開始顯示時被下載，並且由於這需要一些時間，因此文本在一秒鐘左右不可見。我怎樣才能防止這一點？我嘗試了預加載字體，沒有太多結果。

Answer 1

香港專業教育學院看到它發生了幾次在一些網站上，但主要是當 A.該網站是緩慢的，所以需要在服務器時間取決於當被請求的是

和

上喂字體

B.字體本身很重。

你也許可以嘗試將@font臉部儘可能高，以便它可以更快地開始加載，也可以嘗試roboto字體的谷歌CDN。

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

從技術上說，一旦一個人的計算機下載的字體，應該在高速緩存/內存呆在那裏

另外，嘗試了「回退」的字體，類似的Roboto之一，所以它顯示的同時roboto正在加載。