针对国内网络环境，对比主流 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">优点：零配置、全球可用。缺点：国内速度不稳定、无法自定义。
仅加载您需要的特定风格 CSS 文件（solid.min.css、brands.min.css 等）
<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">优点：文件更小、加载更快。缺点：需要了解使用了哪些风格。
使用 SVG 框架通过 JavaScript 渲染图标，支持按需加载
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css">优点：tree-shaking、最小包体积。缺点：需要 JavaScript、配置稍复杂。
下载 FontAwesome 文件并托管到您自己的阿里云或腾讯云 OSS
部署步骤：
<link rel="stylesheet" href="https://cdn.yourdomain.com/font-awesome/6.7.2/css/all.min.css">优点：完全可控、国内速度最快。缺点：需要服务器配置和维护。
添加 preconnect 提示以提前建立与 CDN 服务器的连接
<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">控制字体加载时的显示方式以提升感知性能
/* 防止 FOIT */
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: swap; /* 在自定义 CSS 中覆盖 FontAwesome 的 font-display 行为 */
src: url('.../fa-solid-900.woff2') format('woff2');
}创建自定义图标子集以减小 CSS 和字体文件大小
# 使用官方的 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 链接，确保即使主 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>