Font Awesome 图标字体子集化免费在线工具让 112KB 瘦到 5KB【免费下载链接】Font-AwesomeThe iconic SVG, font, and CSS toolkit项目地址: https://gitcode.com/GitHub_Trending/fo/Font-AwesomeFont Awesome 是主流的 SVG、字体与 CSS 图标工具包。它的 webfonts/ 目录里实心图标字体 fa-solid-900.woff2 约 112KB。如果你的页面只用到其中 3 个图标用免费在线工具做一轮字体子集化就能把这份文件压到 5KB 上下——下载时间、渲染等待、带宽成本一起降下来。子集化到底在做什么字体子集化就是从完整字体里只保留你用到的字符。Font Awesome 里每个图标对应一个 Unicode 码点码点没被用到的字形对浏览器毫无价值只是白白占体积。子集化生成的新字体只含你指定的码点类名用法不变HTML 一行都不用改。先找到两份原料图标的码点在哪查看 metadata/icons.json它收录了全部 1918 个图标的元数据。找到图标名读unicode字段就是码点。以 address-book 为例address-book: { styles: [solid, regular], unicode: f2b9, free: [solid, regular] }假设你要保留 address-book、user、envelope 三个图标它们的码点分别是 f2b9、f007、f0e0。三族字体别混在一起webfonts/ 下有三族图标字体码点空间各不重叠必须按风格分开处理fa-solid-900.woff2约 112KB实心风格fa-regular-400.woff2约 18KB线性风格fa-brands-400.woff2约 99KB品牌标志你页面用哪族就子集哪族。本页全是 solid 图标只处理 fa-solid-900.woff2 就够了。在线子集化怎么配置用 Font Squirrel Webfont Generatorfontsquirrel.com/tools/webfont-generator免费无需注册账号也能用点 Upload Fonts上传刚才选定的字体文件。切到 Expert 选项卡Subsetting 选 Custom Subsetting。在 Unicode Ranges 框里填保留清单。单图标写成 U 加四位十六进制码点多个用逗号分隔Uf2b9, Uf007, Uf0e0点 Download Your Kit解压得到子集字体通常含 .woff2 和 .woff与 stylesheet.css。在项目里引入生成的样式表即可link relstylesheet hrefpath/to/stylesheet.css i classfa-solid fa-user/i子集化前后从 112KB 到 5KB文件体积fa-solid-900.woff2完整约 112KB仅含 3 个图标的子集约 5KB验证三步用文件管理器对比新旧字体大小确认量级差异符合预期。在页面打开这 3 个图标逐个检查渲染正常。看 Chrome Network 面板确认实际请求的是子集文件且响应大小对得上。不想用在线工具跑一条命令图标常更新、项目多时手动上传太慢。Font Awesome 官方提供 Node.js 命令行工具 fortawesome/fontawesome-subsetnpm install -g fortawesome/fontawesome-subset fontawesome-subset --icons user,address-book,envelope --styles solid --output ./subset输出到指定目录含子集字体与配套 CSS。需要本地 Node.js 环境适合开发流程里做自动化。避坑清单码点必须以当前版本 icons.json 为准。图标换版后码点可能变对照 CHANGELOG.md 核对。三族字体各自独立子集别把 brands 的码点填进 solid 的字体里。页面新增图标后重新生成一遍子集。确认新样式表里的字体引用路径在项目里真实可达。现代浏览器支持 woff2 即可需要兼容老浏览器时再带上 woff。更多用法可查仓库自带的 README.md 与 CONTRIBUTING.md。【免费下载链接】Font-AwesomeThe iconic SVG, font, and CSS toolkit项目地址: https://gitcode.com/GitHub_Trending/fo/Font-Awesome创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考