如何更改元素的字体系列而不影响它的 ::before 或 ::after？

Question

许多站点在元素上使用::选择器通过客户端下载的字体文件加载图标，例如，

div {
    font: 14px/1 FontAwesome;
}

div::before {
    content: "\f1c8";
}

不幸的是，以下规则也适用于 :: 伪元素，打破图标显示：

div {
    font-family: sans-serif !important;
}

不是可能可以：not（:: :: fron） （source），因此您将如何定位元素，但不是:: :: :: /代码>？

这很好地工作了，但是它错过了元素内部的文本（如果有）：

div:not([class*="fa-"]) {
    font-family: sans-serif !important;
}

甚至可能是不可能的。请不要JavaScript。

Answer 1

不可能再次覆盖前后，

div {
  font-family: sans-serif;
}

div::before,
div::after {
  font-family: serif;
}

否则您只能将图标完全在另一个元素中使用。

<span class="fa-something"></span>
<span>Text here</span>

和asa sidenote :)
请使用文本来进行文本而不是divs（跨度也不是文本元素，它只是一个内联元素，没有任何语义信息）

Answer 2

在 @Termani 的帮助下，我解决了将我喜欢的字体注入网站的问题，同时对通过 webfont 文件加载的大多数网站图标造成的损害最小：

::before, ::after {
    font-family: FontAwesome, "Font Awesome", "Font Awesome 5 Pro",
    "Font Awesome 5 Free", "Material Icons", "Material-Design-Iconic-Font",
    Flaticon, "CBSi Fantasy icomoon", CBSi_Fantasy_icomoon, icon-moon,
    icomoon, ui-icons, icons, NewYorkIcons, sans-serif !important;
}

毫无疑问，还有其他 font-family 名称开发人员使用，所以当我偶然发现它们时，这个列表会不断增长。

如果我找到更好的解决方案，我会更新这个答案。