Vue 3 项目初始化即集成字体子集化与离线加载：通过 fontmin 自动提取实际用字生成精简字体，配合 Vite 静态拷贝、内联 CSS 声明及 preload，实现零手动、可复用、构建时自动化。
Vue 3 项目初始化阶段就集成字体子集化与离线加载，关键在于把字体当作可构建、可按需处理的资源，而不是手动丢进 assets/fonts 然后写一堆 @font-face。Vite 生态下没有现成的“开箱即用”插件像 Webpack 那样直接支持字体自动化，但通过合理组合配置和轻量脚本，完全可以做到零手动、可复用、构建时自动完成。
字体子集化：只保留实际用到的字符
中文字体动辄几 MB，但一个后台系统可能只用到「首页、用户、设置、导出、成功、失败」等几十个字。子集化就是剔除冗余字符，体积直降 70%+。推荐在项目初始化时就固化流程：
- 安装
fontmin作为本地 CLI 工具：npm install --save-dev fontmin - 在
scripts/font-subset.js中定义子集逻辑（支持中文、英文、数字、常用符号）：
const text = '首页 用户 设置 导出 成功 失败 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !？。、；：“”（）【】《》'; - 运行命令生成子集字体：
node scripts/font-subset.js，输出src/assets/font/LXGWWenKai-Medium-subset.woff2等压缩格式 - 配合
vite-plugin-static-copy或自定义插件，在build阶段自动拷贝子集字体到public/fonts/目录，确保静态可访问
离线加载：不依赖 CDN，字体文件随包部署
避免使用 Google Fonts、阿里图标字体等在线链接——它们会拖慢首屏、触发 FOIT、且私有环境不可用。离线加载的核心是：字体文件进构建产物，CSS 声明走内联或预加载。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 将子集后的
.woff2文件放在public/fonts/（Vite 默认静态托管目录），路径如/fonts/brand-regular.woff2 - 在
src/assets/styles/fonts.css中统一声明@font-face，并启用font-display: swap防止文字隐形：
@font-face { font-family: 'BrandSans'; src: url('/fonts/brand-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } - 在
main.ts或全局样式入口中import '@/assets/styles/fonts.css'，确保构建时 CSS 被收集并注入 - 如需更高控制力，可用
vite-plugin-html在index.html的<head>中插入<link rel="preload">提前加载关键字体
Vite 配置联动：让字体参与构建优化
字体不是“静态资源”而是“可优化资产”，需要纳入 Vite 构建链路：
立即学习“前端免费学习笔记（深入）”；
- 在
vite.config.ts中启用build.rollupOptions.output.manualChunks，把字体 CSS 单独拆包（例如fonts.css），便于 CDN 缓存分离 - 添加
build.assetsInlineLimit: 0确保字体文件不被转为 base64（woff2 不适合 inline，体积大且无法缓存） - 配合
vite-plugin-pwa可选：将字体文件加入 PWA 的 precache 列表，实现离线可用 - 开发阶段可加 watch 脚本：监听
src/assets/font/*.ttf变更，自动触发子集化 + 重载服务（用chokidar实现）
整个流程不需要改动组件代码，也不依赖设计师提供新格式——只要明确文本范围，一次配置，后续新增页面只需更新子集文本列表，字体就始终精简、离线、可控。
