crossorigin属性用于指定link标签加载跨域资源时是否启用CORS协议。默认不带值时为anonymous模式，即不发送凭据；设置为use-credentials时表示可携带凭据，但需服务器支持。当外部样式表引用跨域字体时，必须在link标签中添加crossorigin属性，并确保服务器返回正确的CORS头（如Access-Control-Allow-Origin），否则浏览器可能阻止字体加载，导致显示异常。常见用法是<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin>，等同于crossorigin="anonymous"。若使用use-credentials模式，服务器还需返回Access-Control-Allow-Credentials: true。该属性虽小但关键，尤其在引入第三方字体服务时常被忽略，进而引发资源加载失败问题。
在使用 <link> 标签引入外部资源（如字体、样式表）时，若资源来自不同域名，可能需要设置 crossorigin 属性来处理跨域请求。这在加载 CORS 保护的资源（比如自定义字体）时尤为重要。
什么是 crossorigin 属性？
crossorigin 属性告诉浏览器是否应使用 CORS（跨域资源共享）协议来获取资源。即使你只是加载一个 CSS 文件，如果它引用了跨域资源（如 @font-face 字体），浏览器仍会检查该属性。
如何在 link 标签中设置 crossorigin
只需在 <link> 标签中添加 crossorigin 属性即可。注意：该属性不带值时默认为 anonymous 模式。
常见写法如下：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin>
等同于：
<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin="anonymous">
若需携带凭据（较少见）：
<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin="use-credentials">
实际应用场景：加载跨域字体
假设你的 CSS 中使用了自定义字体，而字体文件托管在 CDN 上。如果没有正确设置 crossorigin，浏览器可能因 CORS 策略阻止字体加载。
正确做法：
<link rel="stylesheet" href="https://fonts.example-cdn.com/font.css" crossorigin>
同时确保服务器返回正确的 CORS 头，例如：
Access-Control-Allow-Origin: * 或指定具体域名。
注意事项
rel="stylesheet" 不直接触发 CORS 请求，但其内部资源（如字体）会受限制crossorigin 可能导致字体显示为方块或 fallback 字体crossorigin="use-credentials"，服务器必须返回 Access-Control-Allow-Credentials: true
基本上就这些。加上 crossorigin 能避免很多跨域字体加载问题，尤其是使用第三方字体服务时。不复杂但容易忽略。
