WebFontLoader：爲什麼香草字體系列聲明不足以用於後備？

我喜歡用WebFontLoader加載字體。這是一個很好的解決方案，對我來說效果很好。我通常異步通過把這樣的事情在我的<head>頁面使用它：WebFontLoader：爲什麼香草字體系列聲明不足以用於後備？

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script> 

WebFontConfig = { 
    google: { 
    families: ['Droid Sans', 'Droid Serif'] 
    } 
};

然後，在我的CSS，我會做這樣的事情：

h1 { 
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif; 
}

我最近一直唸叨WebFontLoader，雖然和大多數的我看到的例子（這裏有一個article吧），而不是做這樣的事情，使用WFL適用於<html>元素的類來檢測字體是否被加載並準備使用：

h1 { 
    font-family: Helvetica, Arial, sans-serif; 

    .wf-active & { 
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif; 
    } 
}

我的問題是：爲什麼用系統備份聲明一個正常的字體堆棧不夠？是不是字體的點 - 家庭，如果第一個不被識別，它會自動回落到其他人？

如果瀏覽器發現堆棧中的第一個字體不是系統字體，默認情況下會隱藏該元素，儘管存在備份 - 或者類似的東西？

來源

2017-02-09 Andrew Gibson

這不是「font-family」的意思;字體系列是由一個或多個表達式組成的一種總體類型設計的字體集合，例如「Droid Sans」是一個家族，具有單獨的字體「Droid Sans Regular」，「Droid Sans Bold」，「Droid Sans UltraThin「等。這些都是不同的*字體*（即磁盤上的單個文件），但它們都是單個字體*系列*的一部分。在CSS中，你可以爲瀏覽器的'font-family'屬性列出多個*字體系列，以便「通過」（就像你可以爲單個'@ font-face'的'src'屬性指定多個值一樣） –

爲什麼聲明帶有系統備份的正常字體堆棧不夠？

這是足夠了，如果你想要做的就是用你的字體，一旦他們都可用。但是，在你保證你的字體已經可以使用的時候，或許你想做更多的事情，在這種情況下，使用CSS類有助於做更強大的事情。因此，大多數示例將向您展示「更強大」的版本，而不是有限的使用案例：使用<html>元素上的類可以觸發的任何功能和重新設定，您可能想要在網頁字體準備就緒後進入。

例如，您可以將其用作開關，以關閉僅在您的網頁字體未準備好時纔可見的對話框。例如::

<html> 
    ... 
    <div class="font-loading">Please wait while the fonts load.</div> 
    ... 
</html>

某種形式的CSS，做

.font-loading { 
    background: red; 
    color: white; 
    border: 1px solid black; 
    opacity: 1; 
    height: 4em; 
    transition: opacity 1s ease-in, height 1s ease-in; 
} 

.wf-active .font-loading { 
    opacity: 0; 
    height: 0; 
}

有了這樣的wf-active類添加到<html>元素明確賦予你的整個頁面，它可以被用來「做的事情，需要一個信號當我所有的網頁字體都可以使用時發生「，這與與非常不同，只是」一旦它們準備好就使用字體「。

來源

2017-02-09 04:24:06

謝謝。更重要的是，我想通過不使用.wf-active方法來驗證我沒有做出可怕的錯誤。非常感激。 –

WebFontLoader：爲什麼香草字體系列聲明不足以用於後備？

回答

相關問題