自定义字体能让网站更有特色,但字体文件大,加载慢,处理不好很影响体验。这篇文章说说字体优化的技巧。
WOFF2是目前最好的格式,压缩率高,浏览器支持好。提供WOFF2和WOFF两种格式,覆盖所有现代浏览器。
font-display: swap:先用系统字体显示,自定义字体加载完再替换。避免文字不可见,但会有闪烁。
预加载关键字体:首屏必须用到的字体,用link rel="preload"提前加载。
子集化:只加载需要的字符,比如中文站只加载常用汉字,能大幅减小字体文件。
不是必须用自定义字体。系统字体加载快,体验也不差。定义一个系统字体栈,按优先级 fallback,是个不错的选择。
字体优化要平衡美观和性能,别为了好看牺牲加载速度。