为什么为全文档设置font-family会导致Font Awesome图标显示异常？

问题根源 #

你的第一段CSS规则直接覆盖了Font Awesome图标渲染必需的伪元素字体配置：

• Font Awesome的图标本身不是独立DOM节点，是绑定在图标容器上的::before伪元素，它的渲染逻辑是：给伪元素指定Font Awesome专属字体族，再写入对应图标的字符编码，靠字体文件里的字形映射显示图标。
• 你使用的*, *:before, *:after选择器会选中页面所有元素和所有元素的前后伪元素，如果你这段CSS的加载顺序在Font Awesome的样式文件之后，就会以同级优先级覆盖掉Font Awesome给图标伪元素设置的font-family属性，把原本的Font Awesome字体强制替换成Fira Sans——通用字体里没有对应图标的字形，图标自然无法显示。
• 你测试的第二段规则只用了*选择器，这个选择器只能匹配真实DOM元素，无法选中::before/::after伪元素，因此Font Awesome给伪元素设置的字体规则不会被覆盖，图标就能正常渲染。

更合理的全局字体设置方案 #

不建议用通配符给所有元素（包括伪元素）强制写死font-family，很容易破坏第三方组件的样式。想要覆盖表单类默认不继承字体的元素，可以用继承方案实现全局统一字体，兼容性和稳定性更好：

/* 全局盒模型、边距重置，这里可以保留伪元素选择器 */
*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  /* 不要在这里设置font-family */
}
html {
  box-sizing: border-box;
}
/* 给body设置基础字体，所有普通子元素默认继承 */
body {
  font-family: 'Fira Sans', sans-serif;
}
/* 单独给默认不继承字体的表单类元素开启继承即可 */
input, button, select, textarea {
  font-family: inherit;
}

内容的提问来源于stack exchange，提问作者vebeo