html - :after content fallback if font doesn't exist

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 库中，如果未使用 Material Icons 或使用不同的图标框架，我希望能够回退。

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';
}