字体加载：FOIT 与 FOUT 的取舍

字体没加载完，文字要么空白（FOIT）要么闪一下（FOUT）。font-display:swap 与预加载能缓解这个。

示例代码

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face{
  font-family:Main;
  src:url(/fonts/main.woff2) format("woff2");
  font-display:swap;
}
</style>

要点速览

• font-display:swap 用回退字体先顶着，避免白屏。
• 预加载关键字体，缩短切换等待。
• 只引用到的字重，别把整套字库拉下来。

字体加载的两难 FOIT/FOUT，用 swap + 预加载取平衡。