自定义字体

如何使用自定义字体

// 先定义
@font-face {
  font-weight: normal;
  font-family: 'HongLeiBanShuJianTi';
  font-style: normal;
  src: url('./assets/HongLeiBanShuJianTi.woff2') format('woff2'),
    url('./assets/HongLeiBanShuJianTi.woff') format('woff');
  font-display: swap;
}


// 使用
font-family: HongLeiBanShuJianTi, serif;

这里 font-display: swap;很重要，对性能有相关影响！！

swap 基本上没有阻塞期，直接进入交换期，使用后备字体渲染文本，等用到的字体加载完成之后替换掉后备字体。 它确保文本在网页字体加载期间保持可见状态，解释就是说利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。

参考

https://cloud.tencent.com/developer/article/2232476 谷歌PageSpeed提示利用font-display控制网页字体可见性的加载和替换

https://www.cnblogs.com/cangqinglang/p/14692891.html Web 性能优化：使用 CSS font-display 控制字体加载和替换