字体文件加载与优化

主要介绍了字体文件的引入方式以及加载优化方式,如浏览器缓存、gzip压缩、字体预加载、CDN服务、异步加载字体等等

最开始是从本地加载的,没做任何处理,而字体文件本来就比较大,项目发布到服务器时,会导致浏览器加载时卡顿,影响页面渲染。

css 复制代码
// 引入字体
@font-face {
  font-family: "A01";
  src: url("../font/SourceHanSerifCN-Regular.otf") format("truetype");
}
@font-face {
  font-family: "A02";
  src: url("../font/南构烟波宋.ttf") format("truetype");
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 14px;
  // 使用字体
  font-family: "A01";
}

页面加载效果如下所示:加载字体用了 2,3 分钟

1. 字体引入优化

优化方案:

  1. 前端将文件放入静态文件夹中,利用浏览器缓存,减少请求次数,提高加载速度。
    • 使用预加载字体文件,告知浏览器尽早(优先级较高)获取这些资源,有助于减少字体加载对页面渲染的影响
    • 指定了 as="font"和正确的 MIME 类型(type="font/otf"或 type="font/ttf"),确保浏览器正确识别并处理预加载资源
    • 为标签添加 crossorigin 属性,使得跨域字体资源可以被正确缓存和使用。这对于 CDN 托管或其他跨域部署的字体资源非常重要
  2. 服务器开启 gzip 压缩和 http 缓存,减少服务器压力。
html 复制代码
// 在index.html 中引入字体
<style>
  @font-face {
    font-family: "A01";
    src: url("../font/SourceHanSerifCN-Regular.otf") format("truetype");
  }
  @font-face {
    font-family: "A02";
    src: url("../font/南构烟波宋.ttf") format("truetype");
  }
</style>
<link
  rel="preload"
  href="../font/SourceHanSerifCN-Regular.otf"
  as="font"
  type="font/otf"
  crossorigin
/>
<link
  rel="preload"
  href="../font/南构烟波宋.ttf"
  as="font"
  type="font/ttf"
  crossorigin
/>

页面加载效果如下所示:加载字体时间减少到 1 分钟以内。

使用浏览器缓存,再次访问的效果:

2. 字体加载优化

第一次加载时,还是会阻塞渲染,需要优化

优化方案:

  1. 使用 CDN 托管字体文件:通过 CDN,字体文件会被缓存在全球各地的边缘节点上,用户请求时可以从最近的节点获取,显著降低加载延迟。
  2. 异步加载字体:通过 Web Font Loader 实现字体的异步加载,即使字体未完全加载,也不会阻塞页面的初始渲染。字体加载完成后,文本内容会自动更新为指定字体。
  3. 使用 font-display 属性:在@font-face 规则中添加 font-display 属性,控制浏览器在字体加载期间的文本渲染行为。例如,使用 font-display: swap 可以在字体加载期间先使用浏览器默认字体,待字体加载完成后再替换为自定义字体,避免空白或闪动现象。
html 复制代码
<!-- 引入Web Font Loader库 -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    custom: {
      families: ["A01"],
      urls: ["../font/SourceHanSerifCN-Regular.otf"], // 包含@font-face规则的CSS文件路径
    },
    timeout: 2000, // 可选,字体加载超时时间
    active: function () {
      // 字体加载成功后的回调函数
      console.log("font成功");
    },
    inactive: function () {
      // 字体加载失败后的回调函数
      console.log("font失败");
    },
  });
</script>
<style>
  @font-face {
    font-family: "A01";
    src: url("../font/SourceHanSerifCN-Regular.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
</style>
相关推荐
果粒chenl11 分钟前
React学习(四) --- Redux
javascript·学习·react.js
CoLiuRs15 分钟前
异步任务使用场景与实践
微服务·性能优化·golang
IT_陈寒20 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start37 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied1 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏