为 CSS-Tricks 开发健壮的字体加载策略

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

Zach Leatherman 与 Chris 密切合作,为您正在阅读的这个网站确定了字体加载策略。Zach 在本文中详细介绍了设计过程,并分享了可应用于其他项目的技巧。

剧透警告:字体加载是项目中复杂且重要的部分。

这篇文章真正有趣的部分是 Zach 如何根据代码库的最佳实践来改变设计——或者 正如 Harry Roberts 所说,“规范化设计”。用户真的会注意到 font-weight: 400font-weight: 500 之间的区别吗?好吧,如果我们可以放弃整个字体文件,那么这可能会对性能产生重大影响,进而改善用户体验。

我想我们可以这样重新构建讨论:这种字体的用户体验是否胜过网站略微更快的用户体验?

这绝不是对设计的批评!我认为 Zach 向我们展示了设计师和开发人员之间健康的合作关系是什么样的:基于上下文和手头的问题进行协作并做出联合决策,而不是将静态模型视为最终的、具体的真理来源。

直接链接 →