AI 摘要：本文是作者 Nic Chan 撰写的新网站构建系列的一部分，重点介绍了如何采用现代字体回退方法来优化网站性能，尤其是减少累计布局偏移（CLS）。作者详细阐述了利用在线工具调整 CSS 字体属性（如 size-adjust 等）以实现无缝字体切换的实践，并分享了新增艺术作品和工作展示区的设计与实现，包括使用 View Transitions 和容器查询来提升用户体验。

• 作者 Nic Chan 分享了此篇草稿延迟发布的原因，并感谢读者的支持。
• 介绍了网站新增的拖放功能（桌面端）和改进的窗口分层效果，强调了渐进增强（progressive enhancement）的应用，即在确保无 JS 可用性的基础上，通过 JavaScript 增强用户体验。
• 字体优化与回退 (Font Optimization & Fallbacks): 讨论了网站在字体加载时遇到的累计布局偏移（CLS）问题，特别是自定义字体 W95FA 较窄的特性。作者希望实现像素字体和抗锯齿字体之间的无缝切换。他利用了“Modern Font Stacks”提供的字体堆栈，并发现了一个名为“Font Fallback”的工具，通过调整 size-adjust、ascent-override 等 CSS 属性来创建视觉上无缝的字体回退效果，甚至为此修改了工具的源代码。
• 艺术作品展示 (Artwork Showcase): 作者决定在网站中添加艺术作品展示区，尽管这与专业无关。他受到 Josh Crain 网站的启发，并利用 View Transitions API 实现了窗口最大化时平滑的缩放和标题淡入效果，配合少量 JavaScript 进行状态管理和回退。
• 工作项目展示 (Work Projects Showcase): 面对多种图片尺寸和可选标题的复杂布局挑战，作者采取了非对称设计，并限制了三种核心布局模式，避免每次新增案例都需编写新样式。此处完美运用了容器查询（Container Queries）来适应可用窗口空间内的尺寸变化，并结合 CSS Grid 实现有趣的重叠布局和纹理效果。

AI 摘要：本文系统介绍了中文字体网络优化的全流程方案，涵盖字体分包、格式选择、CDN 加速、协议优化、代码级调优等核心环节，通过WOFF2格式切割、高并发 CDN、HTTP/2/3协议、Preconnect 预连接、极小量级加载及CLS布局偏移修复等技术，显著提升网页加载速度与用户体验。

1. 字体分包优化
• 工具推荐：使用 cn-font-split 插件或 vite-plugin-font （适配 Vite / Rspack / Next.js ）
• WOFF2 格式优势：
• 默认采用 Brotli 压缩算法，比 WOFF 节省30%体积
• 支持浏览器广泛，现代项目首选格式
• 代码示例展示自动转换 TTF / OTF为分片 WOFF2

2. 分包切割策略
• 分片大小：建议 70KB / 片，平衡加载速度与命中率（1.5 - 2 秒完成加载）
• 动态加载：按需加载分片，避免全量下载

3. 字体下载优化
• CDN关键要求：
• 必须支持高并发（国内 CDN 可达 1 秒内加载）
• 推荐开启 HTTP / 2 / 3 协议提升并发能力
• 缓存策略：
• 字体分片设置永久缓存（哈希命名防冲突）
• CSS 文件需谨慎设置缓存时效

4. 前端代码优化
• Preconnect 预连接：提前建立 CDN 预连接节省时间
• 禁用 Preload 陷阱：避免破坏按需加载机制
• 极小量级优化：
• 通过 vite-plugin-font 扫描代码用字范围
• ?subsets 参数实现字符级摇树优化

5. 布局偏移(CLS)修复
• 问题根源：Fallback 字体与目标字体度量差异导致重排
• 解决方案：
• 使用 ascent-override 等 CSS 属性校准 Fallback 字体度量
• 工具推荐：fontaine 库（中文适配有限）或 vite-plugin-font 1.2.0+ 自动计算

扩展资源
https://web.dev/font-best-practices/
https://web.dev/reduce-webfont-size
https://web.dev/optimize-webfont-loading/

Geek (@geekbb): 卡哇伊字体 Maple Mono
✨ 可变 - 无限的字体粗细，以及手工微调的斜体字形。
☁️ 丝滑 - 圆角，独特的 @ $ % & Q -> 字形和手写风格斜体。
💪 实用 - 大量的智能连字。
🎨 图标 - 提供 Nerd-Font 嵌入的版本，添加图标支持。
🔨 定制 - 可定制OpenType特性。
https://github.com/subframe7536/maple-font

FxTwitter / FixupX

Geek (@geekbb)

卡哇伊字体 Maple Mono
✨ 可变 - 无限的字体粗细，以及手工微调的斜体字形。
☁️ 丝滑 - 圆角，独特的 @ $ % & Q -> 字形和手写风格斜体。
💪 实用 - 大量的智能连字。
🎨 图标 - 提供 Nerd-Font 嵌入的版本，添加图标支持。
🔨 定制 - 可定制OpenType特性。
https://github.com/subframe7536/maple-font

发现一个好项目，分享给大家。
Free Font 收录商用免费字体，已收录 861 个全部字体。

GitHub

GitHub - jaywcjlove/free-font: Collection of Free English/Chinese Fonts for Commercial Use. 收录可商用的免费英文/汉字字体。

Collection of Free English/Chinese Fonts for Commercial Use. 收录可商用的免费英文/汉字字体。 - jaywcjlove/free-font