@font-face引入本地下载字体不生效 直接回退至Cursive备用字体如何排查

优先打开浏览器开发者工具（按F12唤起），先核对两个核心面板的信息，不要仅凭肉眼判断路径正确：

• Console面板：查看是否存在字体加载相关报错，包括跨域拦截、资源解析失败、权限限制类提示
• Network面板：筛选「Font」类资源请求，确认自定义字体的请求返回状态为200，不存在404、403、资源被拦截类异常

具体排查方向 #

• 核对@font-face的路径基准

  src配置中的字体文件路径是相对当前CSS文件的存储位置计算的，而非相对HTML文件路径，这是最常见的路径配置错误。例如CSS文件存放在/css/style.css路径，字体存放在/fonts/custom.woff2路径，正确的路径写法应为url('../fonts/custom.woff2')，而非url('./fonts/custom.woff2')。
  标准@font-face写法参考：

  @font-face {
    font-family: 'CustomFont'; /* 自定义字体名称，后续引用需完全一致 */
    src: url('../fonts/custom-font.woff2') format('woff2'),
         url('../fonts/custom-font.woff') format('woff');
    font-weight: 400; /* 匹配对应字重，可变字体可写100 900覆盖全字重范围 */
    font-style: normal; /* 匹配对应字形，斜体字体需设为italic */
    font-display: swap;
  }
  

• 核对字体名称引用匹配度
  检查元素样式中引用font-family时，自定义字体名和@font-face中定义的名称完全一致，包括大小写、空格、特殊字符，部分浏览器对字体名大小写敏感。同时在开发者工具的「Elements -> Computed」面板中，查看元素最终生效的font-family属性，确认自定义字体名确实在属性列表中，没有被权重更高的CSS规则覆盖。
• 核对字重、字形匹配规则
  如果@font-face中仅声明了font-weight: 700（粗体）的字体规则，默认400字重的常规文本、font-style: italic的斜体文本都无法匹配到该自定义字体，会直接加载备用字体。如果不需要细分字重、字形渲染，可以在@font-face中设置font-weight: 100 900;、font-style: normal italic;，让当前字体文件匹配所有字重和字形场景。
• 核对本地访问的协议限制
  如果是直接双击HTML文件通过file://协议打开页面，Chrome、Edge等Chromium内核浏览器会因默认安全策略拦截本地字体资源加载，哪怕路径完全正确也无法读取。此时启动本地静态服务即可解决，比如使用VS Code的Live Server插件，或在项目目录执行python -m http.server命令，通过http://localhost地址访问页面。
• 核对字体文件本身有效性
  将字体文件直接拖入浏览器窗口，若无法正常打开预览字体内容，说明文件本身损坏、下载不完整，需重新获取有效字体文件。此外部分商业字体带有Web嵌入限制元数据标记，浏览器识别后会拒绝渲染该类字体，需更换为支持Web嵌入的字体版本，或通过FontForge等字体编辑工具修改字体的嵌入权限标记。
• 核对服务端配置（线上部署场景）
  如果是线上部署后出现加载异常，首先检查服务端是否配置了字体文件对应的MIME类型（例如woff2格式对应MIME为font/woff2），其次检查页面CSP规则的font-src配置，确认是否允许加载当前域名下的字体资源，不存在跨域拦截问题。

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