Django项目如何上传配置自定义字体 解决移动端字体不显示问题

移动端无法加载自定义字体是几个配置错误叠加导致的：

• format参数值写错：.otf（OpenType）字体对应的标准format值是opentype，写otf会被大部分移动端浏览器（尤其是iOS Safari）识别为无效规则，直接跳过字体加载。
• 内联样式语法错误：HTML里的@font-face把format()写在了url()的引号内部，浏览器会把format声明当成文件路径的一部分发起请求，返回404。
• 相对路径冗余易错：main.css和字体文件同属static/interface目录，不需要写../interface/做路径跳转，冗余路径在部分移动端静态资源解析逻辑下会出现匹配错误。
• 字体格式兼容性差：.otf格式在低版本安卓、iOS系统上兼容性不足，优先使用woff2格式可覆盖绝大多数移动端场景。
• 重复规则冲突：同时在HTML内联样式、CSS文件中定义同名Folsom字体，规则覆盖逻辑在移动端和PC端实现有差异，容易出现加载异常。

1. 清理重复定义：删除HTML内联<style>标签里的@font-face代码，所有字体规则统一放在main.css中维护。
2. 替换main.css中的字体配置为正确写法：

@font-face {
  font-family: 'Folsom';
  /* 同目录文件直接写文件名，优先加载兼容性最好的woff2格式，回退支持otf */
  src: url('folsom-black.woff2') format('woff2'),
       url('folsom-black.otf') format('opentype');
  /* 明确声明字重和样式，对应Black粗体，避免浏览器匹配失败 */
  font-weight: 900;
  font-style: normal;
  /* 优化加载体验，字体加载完成前先用系统字体显示文字，避免空白 */
  font-display: swap;
}

注：可以用免费在线字体转换工具把otf转成woff2格式，转换后体积能小40%左右，加载速度更快。

3. 静态文件配置校验

• 开发环境：确认settings.py中STATIC_URL配置正确，访问http://你的域名/static/interface/folsom-black.woff2能直接打开下载字体文件，没有404错误。
• 生产环境：执行python manage.py collectstatic收集所有静态文件，如果用Nginx托管静态资源，确认配置中包含字体文件的MIME类型映射，避免移动端因类型不符拦截资源：

location /static/ {
    # 保留已有的静态文件根目录配置
    types {
        font/woff2 woff2;
        font/opentype otf;
    }
}

4. 引用字体时明确对应字重：因为你用的是Black字重的字体，写样式时要对应声明font-weight: 900，否则浏览器会去找对应font-family下的常规字重，匹配不到就会回退到系统字体。

打开浏览器开发者工具，切换到移动端模拟模式，查看Network面板的字体资源请求：

• 状态码200：资源加载正常，清除缓存刷新即可看到字体生效
• 状态码404：路径配置错误，检查CSS里的文件路径、Django静态文件配置
• 控制台报MIME类型错误：调整服务端静态文件的MIME配置即可

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