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 实现有趣的重叠布局和纹理效果。