热门推荐
WebFont 字体优化
01/11
字体通常是大文件，需要一段时间才能加载。一些浏览器会隐藏文本，直到加载字体为止，从而导致显示不可见文本（FOIT）。
如何避免显示隐形文字
避免在加载自定义字体时显示不可见文本的最简单方法是临时显示系统字体。通过包含font-display: swap您的@font-face样式，可以避免在大多数现代浏览器中使用FOIT：
@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; // 重点是这个
}swap告诉浏览器使用字体的文本应立即使用系统字体显示。自定义字体准备好后，它将替换系统字体。
预加载网页字
用于更早获取字体文件。比如：
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>as = "font" type =" font / woff2" 属性告诉浏览器以字体形式下载此资源，并有助于确定资源队列的优先级。
crossorigin 属性指示是否应该使用CORS请求获取资源，因为字体可能来自不同的域。如果没有这个属性，预加载的字体将被浏览器忽略。
万水千山总是情，给个打赏行不行。
打赏
版权属于：
即刻学术-学术论文写作-linux前后端开发-体系结构-存储架构-分布式-VPS
本文链接：
https://ijkxs.com/archives/87/（转载时请注明本文出处及文章链接）
作品采用：
