背景

Nuxt 需要使用系统字体之外的字体，使用 Google Font 可能在国内速度不佳，可以将字体内置到项目中使用

步骤

1. 准备静态文件

获取字体文件，将字体文件放到 public/fonts 目录下

2. 声明字体

在项目的公共 css 文件内声明字体，这个 css 文件一般在 assets/css 目录下，如果没有可以在 nuxt.config.js / nuxt.config.ts 中的 css 属性中确定

format 取值参考： developer.mozilla.org/en-US/docs/…

@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

可以根据自己的文件格式自定义 format

3. 使用字体

.some-css {
  font-family: OpenSans;
}

4. 验证字体

在一台没有安装这个字体的设备上访问网页，观察字体生效情况