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

字体文件格式优化

选择合适的字体格式：优先使用woff2，同时提供woff与ttf作为备用，以便应对不支持woff2的浏览器。

在 @font-face 规则中按顺序列出字体格式，浏览器会按顺序查找支持的格式加载。如：

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

这样浏览器会先尝试加载woff2，不行就woff，再不行就ttf，找到可用格式后就不会再加载其他备用字体。

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

1.文件格式转换:https://convertio.co/zh/
2.ttf转woff2:https://cloudconvert.com/ttf-to-woff2

加载后替换

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

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

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

那我们结合一下刚才的，可以变成这样:

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

媒体查询按需加载

媒体查询允许根据设备的特性（如屏幕宽度、分辨率等）来应用不同的CSS样式。结合 @font-face 规则，可以针对不同设备和屏幕尺寸加载相应字体，避免在所有设备上加载不必要的字体资源。

/* 针对大屏幕设备（如桌面电脑）加载特定字体 */
@media (min-width: 1024px) {
    @font-face {
        font-family: 'PCFont';
        src: url('pcfont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    body {
    font-family: 'PCFont', sans-serif;
}
    }

/* 针对小屏幕设备（如手机）加载另一种字体 */
@media (max-width: 767px) {
    @font-face {
        font - family: 'MFont';
        src: url('mobilefont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    body {
    font-family: 'MFont', sans-serif;
}
    }

异步加载字体：

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

//引入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: 'MyFont', sans-serif;
        }
    </style>

    <script>
  //创建FontFaceObserver实例
        const myFont = new FontFaceObserver('MyFont', {
            weight: 'normal',
            style: 'normal'
        });

        myFont.load().then(() => {
  //字体加载成功，给body添加fonts-loaded类
            document.body.classList.add('fonts-loaded');
        }).catch(() => {
            console.error('字体加载失败');
        });
    </script>

<style>
        @font-face {
            font-family:'MyFont';
            src: url('myfont.woff2') format('woff2'),
                url('myfont.woff') format('woff'),
                url('myfont.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
    </style>

缓存优化

Apache服务器

在 .htaccess 文件中添加以下内容：

<FilesMatch "\.(woff2?|ttf|otf|eot)$">
    Header set Cache-Control "public,max-age=31536000"
    Header set Expires "Thu, 31 Dec 2037 23:59:59 GMT"
</FilesMatch>
  •  FilesMatch  用于匹配特定文件名模式的文件，这里匹配以  .woff 、 .woff2 、 .ttf 、 .otf 、 .eot  结尾的字体文件。
  •  Header set  指令设置HTTP响应头。 Cache-Control  头中的  public  表示响应可被任何缓存（包括浏览器和中间代理）缓存， max - age=31536000  设定缓存有效期为1年（以秒为单位）。 Expires  头指定了一个绝对的过期时间。

Nginx服务器

在 nginx.conf 或相应的服务器配置文件中添加：

location ~* \.(woff2?|ttf|otf|eot)$ {
    expires 1y;
    add_header Cache-Control "public";
}
  •  location ~  块匹配以指定后缀结尾的文件， ~  表示匹配不区分大小写。
  •  expires 1y  设置缓存过期时间为1年。
  •  add_header Cache-Control "public"  添加  Cache-Control  头并设置为  public 。

使用浏览器缓存

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

其他

减少字体使用数量

每一种自定义字体都需要额外的网络请求和加载时间，过多字体不仅增加加载时间，还会使页面样式管理变得复杂，影响渲染性能。

尽量使用一到两种字体来设计网站，例如一种用于标题，一种用于正文。在选择字体时，确保它们在各种场景下都具有良好的可读性和视觉效果。

优化字体加载顺序

关键字体（如标题字体）对页面的视觉呈现至关重要。将相关 @font-face 规则放在CSS文件头部，浏览器会优先加载这些字体，使页面重要元素能更快以正确的字体显示。

字体子集化

提取网页实际使用的字符子集，去除多余字符，减小字体文件体积。如只展示中文的网页，可剔除字体中的英文字符等，但是过程比较繁琐。

这里我找到一个很方便的字体裁剪工具，https://font-subset.disidu.com/

还有就是https://font.89tool.com/ 这个网站也可以，就是要一个个去手动删除，有点麻烦。

总结

结合以上所有内容，我个人觉得是这样去写css，注释也给大家了。

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