必须加crossorigin属性，尤其是跨域字体；值只能是anonymous或空字符串，且需服务端返回access-control-allow-origin响应头，否则浏览器静默失败。
font-face 的 crossorigin 属性到底该不该加
大多数情况下，crossorigin 不是必须加的——只有当你用 @font-face 加载的字体文件来自跨域（比如 CDN）且字体文件本身没带 CORS 响应头时，浏览器才会因缺少权限而静默失败（控制台可能只报“Failed to decode downloaded font”，不提示跨域问题）。
关键判断依据是：打开浏览器开发者工具 → Network → 找到字体请求（如 xxx.woff2）→ 看 Response Headers 里有没有 Access-Control-Allow-Origin: * 或对应域名。没有？那才需要干预。
crossorigin 属性值只能是 "" 或 "anonymous"
@font-face 中的 crossorigin 是 CSS 属性，但它的取值规则和 HTML 的 crossorigin 属性一致，仅支持两个合法值：
-
crossorigin（空字符串，等价于crossorigin="anonymous"）：发送请求时不带 cookies 和认证头，服务器需返回Access-Control-Allow-Origin -
crossorigin="anonymous"：显式声明，行为同上 -
crossorigin="use-credentials"：不支持 —— CSS 的@font-face规范里根本没定义这个值，设了也无效
正确写法示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
@font-face {
font-family: 'MyFont';
src: url('https://cdn.example.com/font.woff2') format('woff2');
crossorigin: anonymous; /* ✅ 合法 */
/* crossorigin: ''; ✅ 也合法，但可读性稍差 */
}
设了 crossorigin 却仍加载失败？检查这三处
加了 crossorigin: anonymous 还报错，大概率不是写法问题，而是后端或部署环节卡住了：
- CDN 或源站未配置 CORS 响应头：字体资源响应中必须包含
Access-Control-Allow-Origin: *（或具体域名），否则浏览器直接拒收 - 字体文件路径返回了 302 重定向：如果 CDN 返回 302 跳转到另一个域名，第二次请求不会自动携带
crossorigin，导致二次请求跨域失败 - 本地开发时用了
file://协议：此时所有跨域策略失效，crossorigin会被忽略，字体反而可能因 MIME 类型问题加载失败 —— 务必用本地 server（如python3 -m http.server）测试
Web Font Loader 或 CSS @import 场景下怎么处理
这些方式不走 @font-face，所以 crossorigin 属性完全不生效：
-
<link rel="stylesheet">引入的字体 CSS：里面@font-face的crossorigin依然有效，但外链 CSS 文件本身若跨域，需确保该 CSS 响应头有 CORS（不过通常不影响字体加载） - JavaScript 动态创建
@font-face：无法通过 JS 设置crossorigin，只能靠提前注入带该属性的样式块 - 使用
font-display: swap时：它和crossorigin无关，但能缓解加载失败时的空白问题，建议始终加上
真正跨域字体加载的脆弱点从来不在前端写法，而在服务端是否愿意、能否正确返回 CORS 头 —— 写对 crossorigin 只是把“请求权”交出去，能不能拿到字体，还得看对方配不配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
