答案：通过设置crossorigin: anonymous和配置服务器cors响应头可解决图标字体跨域问题。具体需在@font-face中声明crossorigin: anonymous，确保服务端返回access-control-allow-origin等必要响应头，使浏览器以cors模式正确加载外部域名下的字体资源，避免因同源策略导致的加载失败。
使用 @font-face 加载图标字体时，如果字体文件与页面不在同一个域名下，浏览器会因同源策略限制触发跨域错误（CORS），导致字体无法加载。常见报错信息如：“Font from origin has been blocked from loading” 或 “CORS header ‘Access-Control-Allow-Origin’ missing”。可以通过正确配置 crossorigin 属性和服务器响应头来解决。
1. 确保 font-face 正确设置 crossorigin 属性
在使用 @font-face 引入外部字体时，需显式设置 crossorigin 属性，即使资源同源也建议加上，避免潜在问题。
@font-face { font-family: 'MyIconFont'; src: url('https://cdn.example.com/fonts/iconfont.woff2') format('woff2'), url('https://cdn.example.com/fonts/iconfont.woff') format('woff'); font-display: swap; crossorigin: anonymous; }crossorigin: anonymous 表示以匿名 CORS 模式请求资源，不会携带 cookie 等凭证，是推荐方式。若不加此属性，浏览器可能以非 CORS 方式请求，服务端未允许则被拦截。
2. 配置服务器返回正确的 CORS 响应头
字体文件所在服务器必须在响应头中包含：
立即学习“前端免费学习笔记（深入）”；
-
Access-Control-Allow-Origin：允许访问的域名，例如：
Access-Control-Allow-Origin: https://your-site.com，也可设为*允许所有域名（注意：若使用凭证模式，不能设为 *） - 可选但推荐：Access-Control-Allow-Methods: GET
- 可选：Access-Control-Max-Age 缓存预检结果时间
例如 Nginx 配置：
3. 前端加载字体时使用匿名模式
如果通过 JavaScript 动态加载字体或使用 FontFace API，也需指定 display 和 crossorigin：
const font = new FontFace('MyIconFont', 'url(/fonts/iconfont.woff2)', { display: 'swap', style: 'normal', weight: '400' }); font.load().then(loaded => { document.fonts.add(loaded); }).catch(err => { console.error('字体加载失败:', err); });该方式自动遵循 CORS 规则，前提是服务端支持。
4. 验证是否生效
打开浏览器开发者工具，查看 Network 面板中字体文件的请求：
- 状态码应为 200
- 响应头包含 Access-Control-Allow-Origin
- 没有 CORS 报错信息
若仍有问题，检查 CDN 是否缓存了旧响应头，尝试清除缓存或使用新 URL 参数测试。
基本上就这些。只要前端声明 crossorigin: anonymous，后端返回正确 CORS 头，字体跨域问题就能解决。不复杂但容易忽略。
