如何设置指定字体？自定义字体失效时的回退字体配置问题

安全阿岳

2026-8-4

解决方法

你可以通过调整字体回退链结合继承或CSS变量来实现需求，完全不需要使用!important：

方案1：利用继承实现

修改你的CSS代码如下：

* { font-family: 'Consolas'; }
.f1 { font-family: 'Merriweather', inherit; }
.f2 { font-family: 'erfnwienfniownsdm', inherit; }

方案2：使用CSS变量（更灵活）

如果后续需要修改基础回退字体，用变量维护会更方便：

:root {
  --base-fallback-font: 'Consolas';
}
* {
  font-family: var(--base-fallback-font);
}
.f1 {
  font-family: 'Merriweather', var(--base-fallback-font);
}
.f2 {
  font-family: 'erfnwienfniownsdm', var(--base-fallback-font);
}

原理说明

类选择器（.f1/.f2）的优先级高于通配符选择器（*），所以自定义的font-family会优先生效。
当指定的字体（比如不存在的erfnwienfniownsdm）无法加载时，浏览器会自动回退到链中的下一个选项——这里的inherit会继承全局的Consolas，或是变量定义的Consolas，而非默认的serif。
对于存在的Merriweather字体，浏览器会直接使用该字体，不会触发回退逻辑，完全保留你想要的显示效果。