真正有效的中文字体优化需从加载时机、资源体积、渲染行为三层面协同控制：按需加载、字集精简、font-display策略与渲染防抖。
直接用 @font-face 全量加载中文字体，很容易拖垮首屏——10MB 的字体文件在弱网下可能卡住整个页面。真正有效的优化不是“少加几个字重”，而是从加载时机、资源体积、渲染行为三个层面协同控制。
按需加载：只在用到时才下载字体
避免所有字体一次性塞进 CSS。优先判断使用场景再加载：
- 标题类字体（如 Bold/Black 字重）可放在首屏关键 CSS 中，用
<link rel="preload" as="font">提前触发下载 - 正文、按钮等非首屏或低优先级文本，用 JavaScript 动态注册
FontFace，配合 IntersectionObserver 或用户交互（如点击弹窗）触发加载 - Vue/React 项目中，封装成自定义 Hook 或 Composition API，例如：
useFont('NotoSansSC-Bold', { weight: '700', display: 'swap' })，内部自动管理加载状态与 fallback
字体分包：砍掉 90% 无用字符
中文字体体积大，主因是包含数万汉字。实际页面用不到那么多，必须做精简：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
font-spider扫描 HTML 模板 + 静态文案，生成最小可用字集字体；注意它不识别 JS 渲染内容，所以需把动态文案（如接口返回的标题）手动补进扫描入口文件 - 对多语言站点，拆成「中文包」「英文包」「符号包」，按语言环境异步加载对应字体
- 若使用字体服务（如阿里图标字体），启用其「子集化」功能，或导出 SVG 后转为内联
<symbol></symbol>，彻底绕过字体文件
加载策略：用 font-display 控制渲染节奏
别依赖浏览器默认行为。每个 @font-face 都要显式声明 font-display：
-
swap：最常用，立即用系统字体渲染，字体加载完再替换，避免 FOIT（空白闪烁） -
fallback：适合按钮、标签等短文本，2 秒内没加载成就放弃，保持布局稳定 -
optional：适合非核心视觉元素（如装饰性标题），连 1 秒都不等，纯靠系统字体兜底
同时搭配 FontFaceObserver 监听加载完成，在字体就绪后再激活相关 UI 动画或高亮样式，防止 FOUT（样式突变）影响体验。
渲染防抖：避免布局跳动和重绘浪费
字体切换会触发 layout shift（CLS 值飙升），尤其在移动端。需要主动干预：
- 给使用自定义字体的容器预设
font-size和line-height，并用min-height或占位符撑开空间 - 用
transform: scale()或opacity过渡替代直接替换，让字体切换更平滑 - 对 Canvas 渲染文本（如图表标注），提前缓存
ImageFont.truetype实例，避免重复解析字体文件
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
