Laravel修改CSS文件后字体未生效的问题排查与解决

常见原因 #

1. CSS优先级/加载顺序冲突：若自定义CSS在Bootstrap之前加载，Bootstrap的样式会覆盖你的设置；此外Bootstrap的部分组件选择器（如p、h1等）比body选择器更具体，会直接指定字体，跳过继承。
2. 未覆盖Bootstrap核心字体变量：Bootstrap绝大多数文本元素依赖:root中定义的--font-family-sans-serif变量，而非直接继承body的字体设置，只改body无法影响这些元素。
3. 字体加载失败：@import的字体URL有误、网络限制或广告拦截器阻止了字体文件加载，浏览器会自动 fallback 到后备字体（如sans-serif/cursive）。

解决步骤 #

1. 调整CSS加载顺序 #

确保你的自定义CSS文件在Bootstrap CSS之后加载，让自定义样式获得更高优先级。

2. 覆盖Bootstrap字体变量（推荐方案） #

直接修改:root中的--font-family-sans-serif变量，所有使用该变量的Bootstrap组件会自动应用新字体：

/* 先导入目标字体 */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap");

/* 覆盖Bootstrap根变量 */
:root {
  --font-family-sans-serif: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 可选：给body设置一次，确保全局继承逻辑正常 */
body {
  font-family: var(--font-family-sans-serif);
  line-height: 1.5;
  color: #2D2B3A;
}

3. 强制提高样式优先级（仅应急使用） #

若不想修改变量，可通过更具体的选择器或!important强制覆盖（不推荐长期使用，易引发样式混乱）：

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap");

body, body p, body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: "Work Sans", sans-serif !important;
  line-height: 1.5;
  color: #2D2B3A;
}

4. 排查字体加载状态 #

打开浏览器开发者工具（F12）→「网络」标签，刷新页面检查字体请求：

• 若返回404，核对@import的URL中字体名称拼写（如Work Sans的空格、大小写是否正确）；
• 若请求被拦截，检查是否有广告拦截器或网络限制阻止了字体资源加载。

「Stint Ultra Condensed」字体的适配处理 #

该字体属于手写类，需注意：

1. 确保导入URL正确：@import url("https://fonts.googleapis.com/css2?family=Stint+Ultra+Condensed&display=swap");
2. 同样通过覆盖变量或直接指定实现生效：

@import url("https://fonts.googleapis.com/css2?family=Stint+Ultra+Condensed&display=swap");

:root {
  --font-family-sans-serif: "Stint Ultra Condensed", cursive;
}

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