字体放到独立域名之后 标题一直显示回退字体 数字和英文看着还行 中文一眼就不对 控制台报 Access to font at https://static.a.com/f.woff2 has been blocked by CORS policy。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
curl -sI -H 'Origin: https://example.com' \ https://s.a.com/f.woff2 | grep -i access-control
字体请求被浏览器当作跨域资源 必须带 CORS 头 而图片同域引用不需要 很多人只给图片域名配了规则 字体目录漏掉了 这类问题只在字体域名上出现。这一点先确认清楚,后面就不用反复试。
「字体跨域 CORS」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。
改完隔一天再看一次,当场正常不代表能稳住。
具体做法是,在字体域名上返回 Access-Control-Allow-Origin 并指定主站域名 不要写星号;@font-face 里加 crossorigin 让请求按 CORS 模式发出去 属性漏了照样被浏览器挡下;用 curl 带 Origin 头验证一次 不带 Origin 的返回结果不能作为依据。
改完照着核一遍,字体请求返回 200 且带 access-control 头 标题用上了自定义字体 中文不再回落。
