Flexbox覆盖自定义字体CSS规则的问题排查求助

问题根源 #

你遇到的字体失效问题和Flex本身没有任何关系，问题出在@import导入字体的语句位置不符合CSS规范：

CSS中@import规则必须放在整个样式表的最顶部（仅可位于@charset规则之后），如果前面存在其他普通CSS规则，浏览器会直接忽略这条导入语句。

你把Flex相关的规则写在了@import的前面，导致谷歌字体没有被正确加载，才出现了字体回退到系统默认字体的情况；当你删除Flex相关代码后，@import回到了样式表顶部，字体就正常加载了。

修复方案 #

把下面这条字体导入语句移动到你所有CSS规则的最开头即可：

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@100;300;400&display=swap');

优化建议 #

• 不要滥用!important修饰符：你现在几乎所有样式都加了!important，后续维护样式会非常困难，完全可以通过提升选择器优先级（比如.modal-body .p-thin）来实现样式覆盖。
• 抽离公共字体规则：不需要给每个文本类都重复写font-family: 'Alegreya Sans SC', sans-serif;，直接给模态框根元素（比如.modal-content）统一设置字体即可，需要特殊字体的元素再单独覆盖。
• 避免样式冲突：你给底部按钮同时加了Bootstrap原生的close类和自定义的p-bolder类，Bootstrap的close类自带默认字体样式，容易和你的自定义样式冲突，建议把按钮的close类去掉，只保留自定义类。

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