最全免费公共 CDN,字体库,图标库资源汇总:JSDelivr, BootCDN, Iconfont

作为开发者或博主，都希望自己的网站访问速度“快如闪电”。要实现这一点，除了优化代码和图片，高效加载 JavaScript 库、CSS 框架、网页字体 (Fonts) 和 图标 (Icons) 这四类静态资源至关重要。

使用公共 CDN (内容分发网络) 就是最高效、最简单的提速方法。

公共 CDN 不仅能为你的用户提供更快的下载速度（得益于全球节点和浏览器缓存），还能极大减轻你源站服务器的带宽压力。

本篇文章，ZOIO将为你汇总目前网络上最流行、最稳定的免费公共 CDN 资源，涵盖 JS/CSS 库、字体库、图标库三大类别，并详细介绍它们的特点和使用方法，帮助你为你的项目选择最佳方案。

JS/CSS 库公共 CDN

这是我们最常接触的 CDN 类型，用于加载 jQuery, Vue, React, Bootstrap 等框架和库。

第一梯队 (首选推荐)

这一梯队的 CDN 兼具速度、稳定性和资源广度，是大多数项目的首选。

1. JSDelivr (全球首选)

JSDelivr 是目前全球最受欢迎的公共 CDN 之一，它结合了 Cloudflare, Fastly 等多家 CDN 的优势，并且是唯一拥有国内 ICP 备案的国际公共 CDN。

特点：

• 全能：可自动抓取并分发 npm、GitHub 和 WordPress 插件库的任何公共资源。
• 国内极速： 在国内有正式节点，访问速度无与伦比。
• 资源全： 只要在 npm 或 GitHub 上有，它就能加载。

使用方法：

a. 加载 npm 包 (推荐)

格式：https://cdn.jsdelivr.net/npm/包名@版本号/文件路径 示例：加载 Vue.js 3

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js"></script>

b. 加载 GitHub 仓库文件

格式：https://cdn.jsdelivr.net/gh/用户名/仓库名@分支或Tag/文件路径 示例：加载你自己的 GitHub 仓库中的 CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/your-username/your-repo@main/assets/style.css">

2. BootCDN (国内项目首选)

BootCDN 是一个国内的公益项目，专门为国内开发者优化，速度极快。

特点：

• 国内速度顶尖： 服务器和节点均在国内，延迟极低。
• 更新及时： 对 VUE, React, ElementUI 等国内常用库的跟进非常快。
• 界面友好： 网站搜索体验好。

使用方法：

格式： https://cdn.bootcdn.net/ajax/libs/库名称/版本号/文件名 示例：加载 Element Plus (国内源)

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.17/index.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.17/index.full.min.js"></script>

3. Staticfile (七牛云)

由国内知名的云服务商 七牛云 赞助和支持的公益项目，同样是国内开发者的首选之一。

特点：

• 国内顶尖速度： 依托七牛云强大的国内节点，速度和稳定性极佳。
• 同步 CDNJS： 它同步了 CDNJS 的源站，因此国际库资源也非常丰富。

使用方法：

格式： https://cdn.staticfile.org/库名称/版本号/文件名 示例：加载 ECharts

<script src="https://cdn.staticfile.org/echarts/5.3.3/echarts.min.js"></script>

4. CDNJS (Cloudflare)

CDNJS 是一个由 Cloudflare 强力支持的项目，它可能是目前全球收录库数量最多的 CDN。

特点：

• 极其稳定： 背靠 Cloudflare 的海量节点，全球可用性极高。
• 库数量庞大： 收录了超过 4000 个常用库。
• 国内速度： 速度良好，但可能略逊于 JSDelivr 和 BootCDN。

使用方法：

格式： https://cdnjs.cloudflare.com/ajax/libs/库名称/版本号/文件名 示例：加载 jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

第二梯队 (大厂维护)

这些 CDN 由国内互联网大厂维护，虽然可能在库的收录速度和数量上不及第一梯队，但胜在稳定可靠，且与自家云服务或生态契合度高。

360 前端静态资源库

• 由奇舞团（360 前端团队）维护，以其域名 baomitu.com (爆米兔) 闻名，国内速度优秀，支持 HTTP/2。
• 格式： https://cdn.baomitu.com/库名称/版本号/文件名
• 博主在发文前查看，静态资源库出现500错误，只有Google 字体库正常。

百度 CDN 公共库

• 老牌 CDN，稳定性高，但库的更新可能偏慢。
• 格式： https://code.bdstatic.com/libs/库名称/版本号/文件名

字节跳动 (今日头条) 静态资源库

• 背靠字节跳动，资源更新快，国内速度有保障。
• 格式： https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/库名称/版本号/文件名 (建议从官网搜索)

腾讯 CDN 公共库

• 由腾讯云支持，适合在腾讯云、微信生态中开发的项目。
• 格式： https://cdn-go.cn/npm/包名@版本号/文件路径

第三梯队 (国际与特定用途)

unpkg

• 100% 同步 npm 注册表，非常适合用于测试、原型设计或加载 npm 上的任何包。国内速度一般。
• 格式： https://unpkg.com/包名@版本号/文件路径

Microsoft Ajax CDN

• 微软提供的 CDN，全球稳定，是 ASP.NET 或 .NET 技术栈项目的好伴侣。
• 格式： https://ajax.aspnetcdn.com/ajax/库名称/文件名

Google Hosted Libraries

• 谷歌出品，缓存命中率极高。但由于众所周知的原因，在国内无法访问，仅限海外项目使用。
• 格式： https://ajax.googleapis.com/ajax/libs/库名称/版本号/文件名

JS/CSS 库 CDN 快速对比

公共字体库 (Web Fonts)

Web Fonts 允许我们在网页上使用自定义字体，但字体文件通常很大（几 MB 到几十 MB），严重拖慢速度。使用字体 CDN 是解决此问题的最佳实践。

1. Google Fonts (谷歌字体)

Google Fonts 是全球最大、最流行的免费字体库，收录了上千种开源字体。

• 特点： 字体全，质量高，调用方便。
• 国内访问问题： fonts.googleapis.com 和 fonts.gstatic.com 在国内访问极其困难。
• ✅ 国内解决方案 (镜像加速)： 我们可以使用国内的镜像服务器来完美解决此问题。推荐使用 loli.net (由 @xz-mirror 维护) 或 geekzu.org (极客族) 提供的反代。

使用方法：你只需要将 Google Fonts 官方的 URL 替换为镜像 URL 即可。示例：加载 Noto Sans SC (思源黑体 简体中文)

原 Google URL (国内勿用):

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">

替换为 loli.net 镜像 (推荐):

<link href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">

CSS 中使用:

body {
  font-family: 'Noto Sans SC', sans-serif;
}

2. Adobe Fonts (原 Typekit)

Adobe Fonts 提供了大量高质量的商业字体库，许多是 Google Fonts 所没有的。

• 特点： 字体精美，多为商业版权字体，品质极高。
• 使用： 它不是完全免费的 CDN。你需要一个 Adobe Creative Cloud 订阅（部分订阅包含），或者它也提供了有限的免费套餐。你需要在其网站上创建“Web 项目”来获取专用的 CSS 链接。

公共图标库 (Icon Libs)

图标是现代网页设计的点睛之笔。使用图标库 CDN 可以避免自己托管大量的 SVG 或图片。

1. Iconfont.cn (阿里巴巴矢量图标库)

这是国内开发者和设计师的首选，没有之一。它不是一个“公共” CDN，而是一个允许你创建自己专属图标库的“平台型” CDN。

特点：

• 资源海量： 拥有数百万个由用户上传的矢量图标。
• 按需取用： 你可以像逛超市一样，把你需要的图标（比如“首页”、“设置”、“用户”）加入你的“购物车”（项目库）。
• 三种 CDN 模式： 平台会为你生成的专属项目，提供三种 CDN 加载方式。

使用方法：

1. 在 iconfont.cn 网站搜索你需要的图标，并“添加入库”。
2. 进入你的“项目”，选择“Font class / Symbol / SVG”三种引用方式之一。
3. 平台会为你生成一个 CDN 链接（例如：//at.alicdn.com/t/c/font_...css）。
4. 在你的 HTML 中引入这个 CSS 链接，然后按文档说明使用图标。

示例 (Font class 模式):

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_123456_abcde.css">

<span class="iconfont icon-home"></span>
<span class="iconfont icon-user"></span>

2. Font Awesome

Font Awesome (FA) 是全球最老牌、最流行的图标字体库。

• 特点： 图标规范，覆盖面广 (fa-solid, fa-brands 等)，社区生态好。

使用方法：

你可以直接通过 CDNJS, BootCDN 或 JSDelivr 加载它。示例：通过 CDNJS 加载 Font Awesome 6

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />

<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-github"></i>

3. Google Material Icons (谷歌材料图标)

如果你遵循 Google 的 Material Design 设计规范，这是你的首选。

特点：谷歌官方出品，设计风格统一。

使用方法：

它通常通过 Google Fonts CDN 加载，因此同样存在国内访问问题。

原 Google URL (国内勿用):

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

替换为 loli.net 镜像 (推荐):

<link href="https://fonts.loli.net/icon?family=Material+Icons" rel="stylesheet">

4. 其他图标库 (Bootstrap Icons, Feather 等)

还有许多优秀的图标库，如 Bootstrap Icons, Feather Icons, Ionicons 等。

使用方法：使用 JSDelivr (npm) 加载它们。这又回到了我们第一部分的内容

示例：通过 JSDelivr 加载 Bootstrap Icons

<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css](https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css)">

<i class="bi bi-house-door-fill"></i>

总结与建议

最后，为你提供一个简单的决策建议：

1. 加载 JS/CSS 库：

• 首选 JSDelivr (全能冠军，国内速度顶尖，支持 npm/GitHub)。
• 如果项目仅面向国内，BootCDN 或 Staticfile (七牛云) 是同样优秀的选择。

2. 加载图标库：

• 如果需要高度自定义，首选 Iconfont.cn (阿里巴巴)。
• 如果需要标准化、快速的图标集，使用 Font Awesome (通过 JSDelivr 或 CDNJS 加载)。

3. 加载网页字体：

• 不要用 fonts.googleapis.com！
• 使用国内镜像，如fonts.loli.net ，来加载 Google Fonts 上的字体。