应直接用<link>标签引入远程CSS，放在<head>靠前位置以避免FOUC；确保使用HTTPS绝对URL，不加crossorigin除非必要；注意CDN跳转导致的静默失效问题，优先选用无重定向的CDN。
直接用 <link> 标签引入远程 CSS，别套构建工具
浏览器原生支持通过 <link rel="stylesheet"> 加载任意可访问的 CSS URL，这是最简单也最可靠的方式。构建工具（如 Webpack、Vite）在开发期会拦截和重写资源路径，反而容易导致 CDN 地址被本地代理或 base 路径污染，尤其在热更新时 CSS 404。
- 确保 CDN 链接是完整 HTTPS 绝对 URL，比如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css - 把
<link>放在<head>内靠前位置，避免 FOUC（内容闪动） - 不要加
crossorigin除非你真要读取 CSS 中的字体或图片错误——加了但 CDN 不配 CORS 响应头，会导致控制台报Cross-Origin Read Blocking (CORB)或样式加载失败
CDN 域名不带 www 却强制跳转？检查 Location 响应头
有些 CDN（如某些自建 Nginx 反代、Cloudflare Page Rules）会对无 www 的域名做 301 跳转。而浏览器对 <link> 的重定向有严格限制：如果首次请求返回 301，且跳转目标域不满足 CORS，CSS 就会被静默丢弃，页面无报错但样式不生效。
- 用浏览器开发者工具的 Network 面板，过滤
css，点开请求看Status和Response Headers中的Location - 若发现跳转，优先换用不跳转的 CDN 地址（例如改用
unpkg.com替代某个跳转严重的镜像） - 不要指望
integrity属性能绕过这个问题——它只校验最终下载内容，不干预跳转逻辑
rel="preload" 提前加载 CSS？小心阻塞渲染反效果
有人想用 <link rel="preload" as="style"> 把 CDN CSS 提前抓下来，再用 JS 动态挂载。这看似优化，实则极易出问题：preload 不保证执行顺序，也不等 CSS 解析完成；若在 DOM Ready 前手动 appendChild，可能触发两次解析或样式闪烁。
- 普通项目直接用
rel="stylesheet"就够了，现代浏览器对它的加载和解析已高度优化 - 只有在极少数场景下才考虑 preload：比如你明确知道该 CSS 是首屏关键样式，且它体积小（
- 若真要用，必须配
onload回调并动态改rel：link.rel = 'stylesheet'，否则不会应用
CDN 返回 404 或 MIME 类型错误？先查 Content-Type 响应头
CSS 文件必须返回 Content-Type: text/css，否则 Chrome/Firefox 会拒绝解析，控制台报 The stylesheet … was not loaded because its MIME type (“text/plain”) is not “text/css”。很多静态托管服务（如 GitHub Pages、某些对象存储）默认不设正确类型，尤其当你用非 .css 后缀（比如 ?v=1.2.3）时更易触发。
立即学习“前端免费学习笔记（深入）”；
- 打开 Network 面板，选中 CSS 请求，看 Response Headers 里的
Content-Type - 临时验证：把 URL 粘贴到新标签页，看是否显示为纯文本（说明 MIME 错）还是乱码（说明正常）
- 解决方式取决于 CDN：jsDelivr/unpkg 通常没问题；若用自建或私有 CDN，请确认 Web 服务器配置了
.css的 MIME 映射
