font-family 继承了 overpower 的子类规范，其中包括 font-family

问题描述

我遇到了一种情况，我在一个内部元素上获得了一个我需要的字体系列，该内部元素被一个指定 font-family: inherit 的通用 '*' 选择器取消。

>

这是为了显示一个 Font Awesome 图标，所以我将 'fas' 类应用于它。这带来了：

.fa,.far,.fas {
  font-family: "Font Awesome 5 Free";
}

问题是我有一些其他的 CSS 定义了这个：

div.pq-grid * {
  line-height: normal;
  font-family: inherit;
  font-size: inherit
}

我不明白的是为什么在外部 div 上的 font-family 继承（这是最终的子级）从 CSS 的第二位继承并忽略来自类 fas 的特定 font-family。

我知道我可以在我的模块中定义一些内联 CSS，例如：

.fas {
  font-family: "Font Awesome 5 Free" !important;
}

但这似乎是一个笨拙的解决方案，因为它特别提到了可能会随着 FA 的未来升级而改变的字体系列，并且它诉诸于我尽量不使用的 !important。

谁能看到一个更合适的解决方案来解决这个问题，而不是比上面的 !important 覆盖更糟糕？

谢谢。

这是一个工作示例：

https://jsfiddle.net/tgice/s3mkjz2u

如果您删除 CSS 类上的“*”，它就会起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）