预加载字体文件时为什么必须添加crossorigin属性？

1. 字体资源的加载规则是W3C规范强制要求的 #

W3C的CSS Fonts模块规范中明确约定：所有字体资源的加载，无论是否跨域，都默认使用匿名CORS模式发起请求。
这个规则的设计初衷最初是为了解决早期的字体版权保护问题：防止站点未经授权盗用其他域下的付费字体资源，要求字体资源的响应头必须携带允许当前域访问的CORS头才能正常加载，即使是同域场景下，浏览器也默认遵循该CORS模式请求字体。

2. preload的缓存命中严格匹配请求参数 #

浏览器的资源缓存匹配规则，除了匹配URL之外，还会严格匹配请求的模式、凭证模式等元数据：

• 如果你不给preload标签加crossorigin，同域下preload会默认发起no-cors模式的请求，缓存的是no-cors模式的资源条目
• 后续浏览器实际加载字体时，按照规范发起的是cors（匿名）模式的请求，和preload的缓存条目模式不匹配，无法命中缓存，相当于preload完全失效，还会额外多发起一次字体请求。

补充说明 #

即使是同域字体场景，crossorigin属性也不需要额外配置特殊值，直接写crossorigin或者crossorigin="anonymous"即可，不会对同域请求产生额外的性能或者安全影响。 #

内容的提问来源于stack exchange，提问作者jahilldev