"字体子集优化：@font-face unicode-range 与体积控制"

概述通过在 `@font-face` 中设置 `unicode-range`，可以为特定字符范围提供独立的字体文件（子集），浏览器仅在需要渲染这些字符时下载相应子集，降低总体体积并优化首屏。示例@font-face { font-family: 'MyFontLatin'; src: url('/fonts/MyFontLatin.woff2') format('woff2'); unicode-range: U+000-5FF; /* 基本拉丁 */ font-display: swap; } @font-face { font-family: 'MyFontCJK'; src: url('/fonts/MyFontCJK.woff2') format('woff2'); unicode-range: U+4E00-9FFF; /* CJK 统一汉字 */ font-display: optional; } 工程建议规划子集：按语言覆盖与页面实际字符拆分；避免过度细分导致请求过多。MIME 与跨域：设置正确 `type` 与 `crossorigin`；CDN 缓存与版本管理。回退与可访问性：保持系统字体回退链；在低网速下使用 `optional` 避免阻塞。参考与验证MDN `unicode-range` 文档：https://developer.mozilla.org/docs/Web/CSS/@font-face/unicode-rangeweb.dev 字体优化指南：https://web.dev/articles/font-best-practices