InAngular如果我在组件字体上使用font: inherit样式，则停止工作并显示为▢
app.component.html
<i class="fas fa-car"></i>
app.component.css
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
i {
font: inherit;
}
堆栈闪电战：角度示例
我以为我在字体真棒库中破坏了一些东西，但令人惊讶的是，与原始HTML/CSS完全相同的标记工作正常
<head>
<style>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
i {
font: inherit;
}
</style>
</head>
<body>
<i class="fas fa-car"></i>
</body>你不需要font: inherit.字体真棒已经设置了正确的字体系列。
为什么它在纯HTML/CSS中工作：
在你的html/css示例的情况下，它的工作原理是因为css的特殊性，你的样式i { font: inherit; }被font-awesome css覆盖，因为类优先于HTML 标记
为什么它在 Angular 中不起作用
Angular 添加了范围，以便您为一个组件应用的 css 不会影响另一个组件。如果你检查你的html，你会发现像_ngcontent-*这样的属性和你的css的范围是这样的。
i[_ngcontent-*] {
font: inherit;
}
标签+属性优先于字体真棒的css类，这就是为什么图标没有出现的原因。
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
在您的情况下，元素i样式是使用随机属性生成的，该属性覆盖了绘制汽车图标所必需的font-family: "Font Awesome 5 Free"。