：內容後退後，如果字體不存在

Question

如果字體不存在，是否有辦法回退？

我有一個圖標字體，即使用content: '\E5CC';但是，如果字體不存在，我可以回退到content: '/';？

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 

a:after { 
    font-family: 'Material Icons'; 
    content: '\E5CC'; 
    // Fallback 
    content: '/'; 
} 

在這個CSS庫中，我希望能夠備份如果材料圖標未使用或使用不同的圖標框架。

Answer 1

這裏有一篇文章關於它： https://www.zachleat.com/web/comprehensive-webfonts/

基本上，你需要一些JavaScript來檢查字體加載。
下面是js的一個示例：https://github.com/bramstein/fontfaceobserver

您可以創建所需的默認樣式，例如簡單的光盤。加載字體後，您可以應用一個類，例如'ok'到所有圖標。

CSS會是這個樣子：

.icon:after { 
    content:""; 
    display:block; 
    width:10px; 
    height:10px; 
    border-radius:50%; 
    background-color:#ccc; 
} 

.icon.ok:after { 
    content: '\E5CC'; 
    font-family: 'Material Icons'; 
}