针对国内网络环境，对比主流 CDN 方案的速度与可靠性，并提供详细接入代码
FontAwesome 的 CSS 文件和字体文件通常托管在国外的公共 CDN 上，对于中国境内的用户来说，直接引用这些 CDN 链接可能面临加载缓慢甚至无法访问的问题。选择一个适合国内网络环境的 CDN 方案，可以显著提升网站图标资源的加载速度，改善用户体验。本文从中国开发者的实际需求出发，对比目前主流 CDN 方案在国内的访问速度和可靠性，并给出最优配置建议和完整的接入代码。
| CDN | 国内速度 | 可靠性 | 配置难度 | 推荐指数 |
|---|---|---|---|---|
| cdnjs (cloudflare) | 一般 | 高 | 简单 | ★★★☆☆ |
| jsDelivr | 较好 | 高 | 简单 | ★★★★☆ |
| BootCDN | 快 | 中 | 简单 | ★★★★☆ |
| 自托管阿里云OSS+CDN | 最快 | 最高 | 中等 | ★★★★★ |
cdnjs 是全球最流行的公共 JavaScript/CSS CDN 服务，底层由 Cloudflare 提供加速。在国内部分地区的访问速度尚可，但整体表现受国际网络出口带宽影响较大，可能出现不稳定的情况。对于面向海外用户或对国内访问速度要求不高的项目来说，这是一个零配置、零维护的便利选择。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">优点：历史悠久、稳定性高、自动处理 CORS。 缺点：国内无节点，部分地区访问速度慢。
jsDelivr 是一个支持 npm 包的开源 CDN 服务，在全球拥有众多节点，包括亚洲节点。相比 cdnjs，jsDelivr 在国内的访问速度和稳定性通常更好。它支持语义化版本范围语法（如 @6 表示最新 v6 版本），方便保持版本更新。jsDelivr 还内置了可靠的负载均衡和故障转移机制，是公共 CDN 中的优秀选择。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
<!-- 也可以使用缩写形式，自动指向最新版本 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">优点：全球节点覆盖广、国内速度尚可、支持 npm 包名引入。 缺点：高峰期偶有抖动，极端情况下国内部分地区连接不稳定。
BootCDN 是国内知名的前端公共 CDN 服务商，由 Bootstrap 中文网社区运营。它在国内部署了多个加速节点，访问速度和稳定性优于国外 CDN。BootCDN 同步了 FontAwesome 的官方发布版本，适合面向国内用户的项目。需要注意的是，BootCDN 是一个由社区维护的非盈利项目，其更新时效性和长期可用性略逊于商业 CDN。
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css">优点：国内节点、速度快、中文社区维护。 缺点：更新可能滞后，长期稳定性不如商业 CDN。
这是对国内用户最理想的加速方案。将 FontAwesome 的 CSS 和字体文件上传到阿里云 OSS（对象存储），开启 CDN 加速后，资源将从离用户最近的边缘节点提供。这样不仅加载速度最快、最稳定，还能完全掌控缓存策略和版本管理。虽然配置步骤比使用公共 CDN 多一些，但一旦完成，后续的维护成本很低，且不受第三方 CDN 故障的影响。
部署步骤：
npm install @fortawesome/fontawesome-freecss/ 和 webfonts/ 目录上传到阿里云 OSS Bucket。<link rel="stylesheet" href="https://cdn.yourdomain.com/font-awesome/6.7.2/css/all.min.css">优点：国内速度最快、完全可控、可自定义缓存策略。 缺点：需要手动部署和维护，产生 OSS 和 CDN 流量费用。
使用 <link rel="preconnect"> 提前建立与 CDN 域名的网络连接，使用 <link rel="preload"> 提前加载关键 CSS 文件。这样可以减少 DNS 查询、TCP 连接和 SSL 握手的延迟，让浏览器尽早开始下载字体文件。将此配置放在 <head> 的最前面效果最好。
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" as="style">使用 font-display: swap 确保在字体文件加载完成之前，浏览器先用系统后备字体渲染文字内容。这样即使用户网络较慢、字体文件加载延迟，页面上的文字也不会出现"不可见文本"（FOIT）的问题，图标位置会先展示占位空间，等字体加载完成后自动替换为正确图标。
/* 在自定义 CSS 中覆盖 FontAwesome 的 font-display 行为 */
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: swap; /* 防止 FOIT */
src: url('.../fa-solid-900.woff2') format('woff2');
}FontAwesome 的完整字体文件体积较大（Solid 样式约 200KB+），而实际项目中可能只需要用到其中的几十个图标。通过图标子集化工具（如 Iconly、Fontello 或官方的 Subsetter 工具），可以只打包项目中实际用到的图标，将字体文件体积减少 90% 以上。对于面向移动端或流量敏感的项目，这一优化尤为重要。
# 使用官方的 npm 按需导入方式（SVG 框架）
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons'
library.add(faHome, faUser, faGear)
dom.watch() // 只注入用到的 3 个图标对应的 SVG任何单一 CDN 都可能有宕机或被 DNS 污染的风险。通过配置多个 CDN 备用源，可以在主 CDN 不可用时自动切换到备用 CDN，保证 FontAwesome 图标始终可用。可以使用 JavaScript 检测 CSS 是否加载成功，如果失败则动态插入备用 CDN 的链接。对于面向国内用户的关键业务网站，建议至少配置一个国内 CDN 和一个海外 CDN 作为双保险。
<script>
// 检测 FontAwesome 是否加载成功，失败则降级到备用 CDN
window.onload = function() {
var test = document.createElement('i');
test.className = 'fa-solid fa-star';
test.style.cssText = 'position:absolute;visibility:hidden';
document.body.appendChild(test);
var ok = getComputedStyle(test).fontFamily
.indexOf('Font Awesome') !== -1;
if (!ok) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css';
document.head.appendChild(link);
}
document.body.removeChild(test);
};
</script>font-display: swap 和 preconnect 优化，可以最大程度保证图标加载的速度和可靠性。