提问人：Jeff 提问时间：4/2/2022 最后编辑：Jeff 更新时间：4/3/2022 访问量：848
如何在不影响元素的 ：：before 或 ：：after 的情况下更改元素的字体系列？
How to change an element's font-family without affecting it's ::before or ::after?
问：
许多网站使用元素上的选择器通过客户端下载的字体文件加载图标，例如::before
div {
font: 14px/1 FontAwesome;
}
div::before {
content: "\f1c8";
}
不幸的是，以下规则也适用于元素的伪元素，这会破坏图标显示：::before
div {
font-family: sans-serif !important;
}
（来源）是不可能的，那么你将如何去定位一个元素，但不是？:not(::before)::before
这工作得很好，但它错过了元素内的文本（如果有的话）：
div:not([class*="fa-"]) {
font-family: sans-serif !important;
}
这甚至可能是不可能的。请不要使用JavaScript。
答：
2赞
christiansany
4/2/2022
#1
如果不再次覆盖之前和之后，这是不可能的
div {
font-family: sans-serif;
}
div::before,
div::after {
font-family: serif;
}
或者，您可以完全在另一个元素中使用该图标。
<span class="fa-something"></span>
<span>Text here</span>
还有一个旁注:) 请将 textelements 用于文本，而不是 divs（span 也不是文本元素，它只是一个没有任何语义信息的内联元素）
评论
0赞
Jeff
4/2/2022
我很欣赏这些信息。请注意，我不是需要修改的网站的作者。我的 css 编辑是通过 userCSS 注入到我的客户端中的。
1赞
Jeff
4/2/2022
#2
在上面@Termani的帮助下，这就是我解决将我的首选字体注入网站的问题，同时对通过网络字体文件加载的大多数网站图标造成最小的损害：
::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
如果我找到更好的解决方案，我会更新这个答案。
评论
0赞
christiansany
4/2/2022
所以，基本上我的解决方案:P
评论
font-family: "Font Awesome 5;::before{font-family: FontAwesome}