字体及渲染优化

沧烁
2021-03-17 / 0 评论 / 28 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年03月17日,已超过223天没有更新,若内容或图片失效,请留言反馈。

字体通常是大文件,需要一段时间才能加载。一些浏览器会隐藏文本,直到加载字体为止,从而导致显示不可见文本(FOIT)。
如何避免显示隐形文字
避免在加载自定义字体时显示不可见文本的最简单方法是临时显示系统字体。通过包含font-display: swap您的@font-face样式,可以避免在大多数现代浏览器中使用FOIT:

swap告诉浏览器使用字体的文本应立即使用系统字体显示。自定义字体准备好后,它将替换系统字体。
预加载网页字

@font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');

  font-display: swap; // 重点是这个

}

用于更早获取字体文件。比如:

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>

as = "font" type =" font / woff2" 属性告诉浏览器以字体形式下载此资源,并有助于确定资源队列的优先级。

crossorigin 属性指示是否应该使用CORS请求获取资源,因为字体可能来自不同的域。如果没有这个属性,预加载的字体将被浏览器忽略。

本文共 257 个字数,平均阅读时长 ≈ 1分钟
10

打赏

海报

正在生成.....

评论 (0)

取消