一文带你详细了解网站字体优化加载方案

文章摘要

白衣 DeepSeek

前言

网上很多文章有写这些的，但写的过于笼统，大多只是流于表面，并没有告诉大家该怎么去实际优化，下面我将给大家说一下我的思路和具体该怎么去做。

一.CSS代码

@font-face{
    /* 定义字体名称为baiyi*/
    font-family:'baiyi';
    /* 优先使用本地已缓存的名为baiyi的字体，若不存在则依次尝试加载woff2、woff和truetype格式字体 */
    src:local('baiyi'),url('font.woff2') format('woff2'),url('font.woff') format('woff'),url('font.ttf') format('truetype');
    /* 设置字体粗细为正常 */
    font-weight:normal;
    /* 设置字体样式为正常 */
    font-style:normal;
    /* 采用swap加载策略，先以系统默认字体显示，字体加载完成后替换 */
    font-display:swap;
}
body{
    /* 使用baiyi字体，若加载失败则使用sans-serif系统字体 */
    font-family:'baiyi',sans-serif;
}

这是我经过多次完善总结出来的网站字体CSS代码。下面我将介绍为什么这样写：

1.字体格式

网站字体应当优先使用woff2，同时提供woff与ttf作为备用，以便应对不支持woff2的浏览器。在@font-face规则中按顺序列出字体格式，浏览器会按顺序查找支持的格式加载。

字体格式转换我提供两个网站，你可以更换自己想要的文件格式，来转换成woff2或者woff文件：

2.swap加载

CSS3引入了font-display属性，允许开发者控制字体不可用时的行为。它有以下几个取值：

属性值	描述
block	字体加载前，短暂隐藏文本
swap	先以默认字体显示，加载后替换
fallback	短时间用默认字体，随后切换
optional	网络良好时才加载字体

一般我们选用swap，它允许浏览器在自定义字体加载期间先使用系统默认字体进行文本渲染，等自定义字体加载完成后再替换为自定义字体。这样用户能快速看到页面文本内容，不会因字体加载而出现长时间空白。

3.local缓存

local()函数在@font-face规则中，优先检查本地是否已缓存了指定字体。如果有，则直接使用本地缓存，避免重复下载。

二.异步加载

默认情况下，字体加载会阻塞页面渲染，导致页面显示延迟。通过异步加载，字体加载过程不会影响页面的初始渲染，提高用户体验。FontFaceObserver库提供了一种方便的方式来监听字体加载状态，确保在字体加载完成后再应用字体。

<script src="https://unpkg.com/fontfaceobserver@2.1.0/fontfaceobserver.min.js"></script>
    <style>
        /* 定义默认字体样式 */
        body {
            font-family: sans-serif;
        }
        /* 当字体加载完成后应用的样式 */
        body.fonts-loaded {
            font-family: 'baiyi', sans-serif;
        }
    </style>
    <script>
  //创建FontFaceObserver实例
        const baiyi = new FontFaceObserver('baiyi', {
            weight: 'normal',
            style: 'normal'
        });
        baiyi.load().then(() => {
  //字体加载成功，给body添加fonts-loaded类
            document.body.classList.add('fonts-loaded');
        }).catch(() => {
            console.error('字体加载失败');
        });
    </script>
<style>
      @font-face {
        font-family:'baiyi';
        src:local('baiyi'),url('font.woff2') format('woff2'),url('font.woff') format('woff'),url('font.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }
    </style>