自托管字体在本地开发服务正常 生产环境无加载请求如何排查解决

问题排查和解决方案 #

第一步：检查生产打包产物的CSS规则

先找到生产构建输出的最终CSS文件，搜索@font-face、Roboto、Material Icons关键词，确认你写的字体定义规则是否存在：

• 如果规则不存在，说明构建环节删除了这部分CSS，排查两个方向：
  • 查看postcss配置是否启用了purgecss等无用CSS清理插件，如果有，把字体CSS的路径加入排除列表，或者将@font-face相关规则添加到purgecss的安全保留列表（safelist）
  • 确认生产环境webpack配置中，CSS处理规则是否把style-loader替换成了mini-css-extract-plugin，如果替换了，检查css-loader的url配置是否为开启状态（默认开启，若手动关闭需要改回开启，否则webpack不会处理CSS内的url引用）
• 如果规则存在，说明CSS已经正常下发，是浏览器没有触发加载：
  • 打开生产页面的元素审查工具，查看body元素最终生效的font-family是否被更高优先级的CSS（比如MUI自动注入的主题样式）覆盖，可以临时在你写的body样式里加!important测试是否能触发字体加载：

    body {
      font-family: 'Roboto' !important;
    }
    

  • 确认页面内确实存在使用.material-icons类的元素，若没有用到对应类，浏览器不会主动加载未使用的字体文件

第二步：修正MUI主题配置避免字体覆盖

你使用了MUI的ThemeProvider，默认MUI会注入自带的字体家族配置，优先级高于你写的全局body样式，需要在你的theme.ts里显式指定自托管字体：

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  typography: {
    fontFamily: 'Roboto, sans-serif',
  },
  // 其余原有主题配置
});

第三步：额外适配webpack配置（可选）

如果你全局开启了CSS Modules，会导致你导入的全局字体CSS不生效，可以给字体类全局CSS单独配置loader规则，或者导入时显式关闭模块解析：

import '../../assets/font/index.css?css-modules=false';

如果生产环境出现字体404请求而非完全无请求，检查webpack的output.publicPath配置是否和生产环境的静态资源部署路径匹配。

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