黄宜洁

除了常见的图片💯压缩📌、代码精简等方法， 字体显示与交换优化 也是一个常被忽视但效果显著的环节

建议在实际项目中根据自身字体使用情况测试不同❤️策略，找到加载速度与视觉呈现的最佳平衡点

更多精选文章

具体实现方式如下： 在 @font-face 规则中添加 font-display: swap; ，例如： @font-face { font-family: 'MyFont'; src: url('myfont

woff2') format('woff2'); font-display: swap; } 如果使用Google F🎆onts等在线字体服务，通常可以在引用URL中添加 &display=swap 参数来启用该行为

设置合理的过期时间 ：通过服🤔务器缓存头部，让浏览器对字体文件进行长时间缓存

通过 font-dis🔮play: fallback 或 optional 值在速度与视觉一致性之间取得平衡