CSS设置的Calibri字体在HTML页面中部分不生效问题

阿华AIGC实验室

2026-5-25

解决部分文本不显示Calibri字体的问题

首先我注意到你的CSS代码里有个明显的语法错误——h4选择器后面多了一个闭合大括号，这会导致后续的body样式无法被浏览器正确解析，这大概率是部分样式失效的核心原因之一。先把CSS修正得更简洁且正确：

h1, h2, h3, h4, p, body {
  color: black;
  font-family: Calibri, sans-serif;
}

（把重复的选择器合并了，既减少冗余也方便后续维护）

接下来针对部分文本显示衬线字体的问题，我们逐一排查解决：

修复CSS语法错误：刚才提到的多余大括号会破坏整个CSS的结构，修正后要确保所有目标元素都能正确应用字体样式。
添加字体 fallback 选项：Calibri是微软专属字体，只有Windows系统（或安装了Office的部分Mac设备）自带该字体。如果页面在非兼容设备上打开，浏览器找不到Calibri就会默认使用衬线字体。所以一定要在font-family里添加无衬线备选字体，比如上面代码里的sans-serif，这样即使没有Calibri，也会显示系统默认的无衬线字体，不会出现衬线样式。
检查CSS文件路径：你使用的是file://本地绝对路径，可能存在路径拼写错误或者浏览器对本地文件的加载限制，导致部分样式未生效。建议改用相对路径（比如CSS和HTML在同一文件夹时，直接写href="style.css"），确保样式文件能被稳定加载。
强制刷新浏览器缓存：浏览器可能缓存了旧的错误CSS文件，按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面，让浏览器重新加载最新的CSS代码。
排查样式覆盖问题：如果页面里还有div、span、ul这类未被你CSS选中的标签，虽然body的样式应该会被继承，但如果存在内联样式、第三方CSS等优先级更高的样式覆盖了字体，也会出现异常。可以检查这些元素的样式，或者按需扩展选择器范围，确保所有文本元素都能继承到Calibri字体设置。