如何覆盖CSS全局*选择器的自定义字体族并设置默认字体？

问题分析 #

你遇到的核心矛盾：

• 用*选择器全局设置Montserrat字体时，link1的自定义字体无法生效（因为*直接给所有元素包括内部的<a>标签强制设置了字体，<li>的样式无法传递给子元素<a>）
• 移除*里的字体设置后，未单独指定字体的元素（如link2）会 fallback 到浏览器默认字体

解决方案 #

优化全局字体设置逻辑 #

把全局默认字体从*选择器移到body上，让所有子元素通过继承获取默认字体，同时精确选中特定区域的<a>标签应用自定义字体：

修改后的CSS代码：

/* 保留全局重置规则，但移除font-family */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 18px;
}

@font-face {
    font-family: 'BowlbyOneSC-Regular';
    src: url('../fonts/BowlbyOneSC-Regular.ttf') format('truetype');   
    font-weight: bold;
}

@font-face {
    font-family: 'Montserrat-VariableFont_wght';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}

/* 给body设置全局默认字体，所有子元素自动继承 */
body {
    font-family: 'Montserrat-VariableFont_wght';
}

/* 精确选中link1下的Link（即<a>标签）应用自定义字体 */
.link1 a {
    font-family: 'BowlbyOneSC-Regular';
}

生效原理 #

1. body的字体样式会被页面中所有未单独设置字体的元素继承，包括link2里的<a>标签，确保全站默认使用Montserrat
2. 直接给link1下的<a>标签设置字体，优先级高于继承的样式，能确保Home链接正常显示BowlbyOneSC字体

备选方案（不推荐） #

如果一定要保留*选择器的字体设置，可以通过提高选择器优先级强制覆盖：

.link1 > a {
    font-family: 'BowlbyOneSC-Regular';
}

但这种方式会增加不必要的样式权重，不如修改全局设置的方案优雅。

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