加crossorigin对字体加载无效，因字体由@font-face触发子请求，须在CSS中为@font-face块内显式声明crossorigin: anonymous;并配服务端Access-Control-Allow-Origin响应头。
link rel="stylesheet" 加 crossorigin 属性根本不管字体加载
加了 crossorigin 到 <link rel="stylesheet"> 标签上，对字体加载完全无效——浏览器压根不认这个配置。因为字体实际是 CSS 解析后由 @font-face 触发的子请求，<link> 自身的 crossorigin 只影响 CSS 文件本身（若它跨域），不影响里面 @font-face 发起的字体请求。
常见误操作：
- 在 <link rel="stylesheet" href="https://cdn.example.com/app.css" crossorigin="anonymous"> 上加 crossorigin
- 以为这样就能让里面 src: url('icon.woff2') 跨域成功
结果：CSS 加载了，但字体仍被拦截，控制台报 Font from origin 'https://cdn.example.com' has been blocked...
@font-face 必须显式声明 crossorigin: anonymous
真正要加 crossorigin 的地方，是 @font-face 块内部，且必须写成 crossorigin: anonymous;（注意结尾分号，是 CSS 声明，不是 HTML 属性）。
正确写法示例：
@font-face {
font-family: 'IconFont';
src: url('https://cdn.example.com/fonts/icon.woff2') format('woff2');
font-display: swap;
crossorigin: anonymous;
}
要点：
- crossorigin: anonymous 必须和 src 在同一个 @font-face 块内
- 它只对当前 src 生效；多个 src 时，每个都要单独配（或统一用带 crossorigin 的 URL）
- 不支持 crossorigin: use-credentials；字体请求不携带凭证，设了也无效
- 若使用 Google Fonts 等托管服务，它们已内置处理，你无需、也不能手动加此声明
服务端响应头缺 Access-Control-Allow-Origin 就白搭
前端加了 crossorigin: anonymous 只是“发起请求的方式”，服务端不返回 Access-Control-Allow-Origin 头，浏览器立刻丢弃字体内容——Network 面板里能看到请求发出去了（状态码 200），但 document.fonts.check() 返回 false，文字回退成系统字体。
关键配置要求：
- 响应头必须包含 Access-Control-Allow-Origin: https://your-site.com（不能是 *，如果字体 URL 含凭证或需兼容某些旧环境）
- Nginx 中必须用 location 精确匹配字体后缀，并加 always 标志：location ~* \.(woff2?|ttf|eot|otf)$ { add_header Access-Control-Allow-Origin "https://your-site.com" always; }
- Apache 需启用 mod_headers，用 Header set（非 always set）避免重复头
- CDN 用户务必确认它透传源站的 CORS 响应头；很多默认不缓存 header，需手动开启“缓存响应头”选项
本地开发时 file:// 协议会让所有跨域字体静默失败
双击打开 HTML，或用 VS Code 插件以 file:// 协议预览，即使配置全对，字体请求也会在 Network 面板中消失——没报错、没请求、没日志，纯静默丢弃。这是因为浏览器将 file:// 视为 origin: null，所有跨源字体加载直接被同源策略封锁。
验证和解决方法：
- 打开 DevTools → Network → 过滤 font，刷新页面，若列表为空，极大概率是 file:// 导致
- 必须启动本地 HTTP 服务：
• python3 -m http.server 8000
• npx serve
• VS Code Live Server 插件
- 不要用 --allow-file-access-from-files 启动 Chrome：新版已废弃，且仅限调试，不可靠
最容易被忽略的一点：字体跨域失败不会阻断页面渲染，也不会抛 JS 错误，只会让文字悄悄换回 Arial 或 sans-serif——你得盯着 “Computed” 面板里的 font-family 实际值，或主动调用 document.fonts.load() 检查加载状态，才能确认是否真失败了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
