必须在@font-face中显式声明crossorigin: anonymous，并确保服务端返回Access-Control-Allow-Origin响应头，否则浏览器以非CORS模式请求字体将被拦截；同时需配置font-display: swap防止FOIT。
font-face 里必须加 crossorigin: anonymous
跨域字体加载失败，90% 是因为漏了 crossorigin: anonymous。浏览器默认以非 CORS 模式请求字体，服务端没返回 Access-Control-Allow-Origin 就直接拦截，控制台报错类似：Font from origin 'https://cdn.example.com' has been blocked by CORS policy。
正确写法是显式声明该属性，哪怕你暂时没配服务器响应头，也得先加上——它告诉浏览器：“请用 CORS 模式发起请求”：
@font-face {
font-family: "InterCdn";
src: url("https://cdn.example.com/fonts/inter-var-latin.woff2") format("woff2");
font-display: swap;
crossorigin: anonymous;
}
-
crossorigin: anonymous是安全默认值，不带 cookie，服务端只需返回Access-Control-Allow-Origin: https://your-site.com即可 - 别写
crossorigin: use-credentials，除非你明确需要携带凭证，且服务端已配好Access-Control-Allow-Credentials: true - 这个声明必须出现在
@font-face规则内部，不能放在 CSS 其他位置
tailwind.config.js 中的键名必须和 font-family 值完全一致
Tailwind 不解析字体文件，只把配置项原样转成 CSS 的 font-family 值。如果你在 @font-face 里写的是 font-family: "InterCdn"，那么 tailwind.config.js 里就必须用一模一样的字符串作键名：
theme: {
extend: {
fontFamily: {
interCdn: ['"InterCdn"', 'ui-sans-serif', 'system-ui', 'sans-serif']
}
}
}
- 键名
interCdn决定类名：生成font-interCdn，不是font-intercdn或font-InterCdn - 数组第一项必须是带双引号的字符串
'"InterCdn"'，否则 Tailwind 编译后会丢掉引号，导致浏览器找不到该字体族 - 中英文混用或含空格的字体名（如
"PingFang SC"）同理，必须在外层单引号内用双引号包裹
服务端必须返回 Access-Control-Allow-Origin 响应头
前端加了 crossorigin 只是第一步；如果 CDN 或静态资源服务器没配响应头，字体照样 403 或静默失败。常见托管平台处理方式：
- GitHub Pages：不支持自定义响应头 → 改用
public/目录本地托管，或换 Vercel/Netlify - Vercel：在
vercel.json中加 headers 规则，匹配*.woff2等后缀 - Nginx：在字体 location 块里加
add_header Access-Control-Allow-Origin "https://your-site.com"; - Cloudflare R2 / OSS：需在对象元数据中手动设置
Access-Control-Allow-Origin，不是上传时自动继承
验证是否生效：打开 DevTools → Network → 找到字体请求 → 查看 Response Headers 是否包含 Access-Control-Allow-Origin。没有？说明服务端配置还没生效。
font-display: swap 是防止 FOIT 的硬性要求
远程字体加载慢时，不加 font-display: swap 会导致文字长时间空白（FOIT），尤其在弱网或首次访问时。这不是样式问题，是用户体验断层。
-
swap表示“先用 fallback 字体渲染，等自定义字体加载完再替换”，用户始终可见文字 - 别用
auto（默认值）或block，它们会让文本不可见长达 3 秒以上 - 所有
@font-face规则都应包含它，无论本地还是远程字体
真正容易被忽略的是：即使字体文件已缓存，font-display: swap 仍影响首次渲染时机——它决定了浏览器是否愿意用 fallback 过渡。没加它，就等于把首屏文字交付权交给了网络延迟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
