英文字体反FOUT的策略

由于(英文)字体下载需要一定的时间,主流浏览器会先用本地的字体来渲染文字,等到指定的字体下载好之后再渲染一次字体。用户会看到FOUT(Flash Of Unstyled Text)现象,影响体验。

个人认为最佳的解决方案是:1)首次访问用户,字体内联化并缓存字体;2)二次访问用户,调用缓存

@font-face {
  font-family: 'CustomFont';
  src: url(data:font/woff;charset=utf-8;base64,<base64 string>) format('woff');
  font-weight: 400;
  font-style: normal;
}

Windows 10自带base64编码解码命令行工具。

$ base64 --help

另外,相关的CSS规则font-display 浏览器支持得还不太好(2017.10)。

中文字体的好世代还没有到。

 

via CSS font-display: The Future of Font Rendering on the Web && Inline Web Font to Avoid FOUT