Question

我正在使用Google字体中的titilium webfont。为了表现

 @font-face {
font-display:swap;
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web'),url('https://www.selltoneruk.co.uk/fonts/TitilliumWeb-Regular.eot'); 
}

我正在使用字体显示交换。这意味着，将在加载webfont之前使用本地字体。但是titilium网络字体是窄字体。因此，本地字体在字体加载之前占据更大的位置。当我刷新包含对象的页面文本时，似乎变大了一秒钟，然后正常显示。是否有窄字体？还是有办法以较小的px值显示本地字体大小？

Answer 1

font-display:swap;不是使“无样式文本闪烁”（FOUT）最小化的正确解决方案。如果您希望完全避免FOUT并只希望在加载时显示自定义字体，那么我建议使用font-display: optional;，它将仍然在后台加载自定义字体，以供下一页加载当然。此外，浏览器将为您决定是否在速度较慢的连接上加载网络字体。

交换时，Titillium字体较小

1 个答案: