使用 font-display 控制字体加载
避免字体加载导致的空白
- block：浏览器在短暂的阻塞期内不显示任何文本，直到字体加载完成。这可能导致页面渲染被阻塞，用户看到空白内容。
- swap（推荐）：浏览器立即显示后备字体，等自定义字体加载完后替换。这能确保文字立即可见，同时确保最终显示自定义字体。
- fallback （推荐）：浏览器使用一个短暂的阻塞期，然后使用后备字体，最后加载自定义字体。这是 block 和 swap 的折衷方案
- optional：浏览器会尽快显示后备字体，并且如果自定义字体未能快速加载，则不加载。
预加载关键字体
<link rel="preload" href="myiconfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
选择合适的字体文件类型
- 选择适当的格式，使用现代的字体格式如 WOFF2，可以有效减少字体文件的大小
按需创建字体文件
- 如果只需要特定的字体，而不是整个字体库，可以使用工具如 Glyphhanger 或 Font Squirrel 来生成子集
HTTP 缓存优化
- 通过 HTTP 头（如 Cache-Control 和 Expires）配置浏览器缓存字体文件
