vite生产构建中优化字体资源需从格式、拆分、加载策略三方面入手：优先转为woff2格式（体积减半）、按字重拆分@font-face声明、配合font-display:swap去阻塞。
Vite 生产构建中优化字体资源，核心是减体积、去阻塞、控加载节奏。不是简单扔进 public 就完事，得从格式、拆分、加载策略三方面动手。
转成 WOFF2 格式，体积直接砍一半
中文字体动辄几 MB，TTF/OTF 是罪魁祸首。WOFF2 是现代浏览器标配，压缩率高、兼容性好（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+），IE 不在考虑范围内就果断切换。
- 用 Font Squirrel Webfont Generator 上传 TTF/OTF，勾选 WOFF2，一键导出
- UI 设计师交付资源时，明确要求提供 WOFF2 版本，避免开发再转换
- 对比验证：一个 12MB 的思源黑体 TTF，转 WOFF2 后通常压到 4–5MB，节省超 60%
按需拆分 @font-face，避免全量加载
一个字体包含 Regular、Bold、Italic、Black 等多个字重，但页面可能只用到 Regular 和 Bold。全量引入等于白下 80% 的字节。
- 每个字重单独声明
@font-face，src 指向对应 WOFF2 文件 - 示例：
@font-face { font-family: 'HarmonyOS Sans'; src: url('./fonts/harmony-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'HarmonyOS Sans'; src: url('./fonts/harmony-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } - Vite 会把每个 WOFF2 当作独立静态资源处理，小文件（
用 font-display: swap + preload 关键字体
解决 FOIT（文字隐形）和 FOUT（字体闪烁）问题，让内容可读性不中断。
-
font-display: swap强制浏览器先用系统字体渲染文字，等自定义字体加载完成再替换，首屏不白屏 - 对首页标题等关键文字用的字体，加
<link rel="preload">提前触发加载：<link rel="preload" href="/fonts/harmony-bold.woff2" as="font" type="font/woff2" crossorigin>
- 注意：
crossorigin属性必须加，否则字体预加载会失败（WOFF2 加载受 CORS 限制）
进阶：按需子集化（适合极简场景）
如果某个 Banner 只显示“限时抢购”4 个字，完全没必要加载整套中文字体。
- 用 glyphhanger 或在线工具如 Transfonter 提取指定字符子集
- 生成仅含所需汉字的精简 WOFF2，体积可压到几十 KB 级别
- 适用场景：运营活动页、海报编辑器中的固定文案、图标字体等，通用正文不建议滥用（影响 SEO 和可访问性）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
