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

的一个示例

您可以创建所需的默认样式，例如，简单的光盘。加载字体后，您将应用一个类，例如＆＃39; ok＆＃39;到你的所有图标。

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

：在内容回退后，如果字体不存在

1 个答案: