如何更简便处理多字体文件 优化@font-face本地字体引入方式

完全不需要手动逐条编写@font-face规则、逐个匹配文件路径，按下面的方法处理，单款字体的配置工作量可以压缩到原来的10%以内：

第一步：先砍掉无效配置，从根源减少工作量 #

绝大多数人写的20条规则、5种格式配置，大部分都是十年前的过时兼容要求，现在完全没必要保留：

• 字体格式只需要保留woff2+woff两种即可，eot、ttf、svg这三类格式对应的浏览器市场占比已经不足2%，直接删掉相关配置，单条@font-face的源文件配置从5个砍到2个。
• 非必要不引入全量字重：绝大多数业务场景只需要常规（400）、中粗（500）、粗体（700）三个字重，剩下的超细、超粗等冷门字重直接删掉，需要配置的规则数量直接从20条砍到3-5条。

注意：同一款字体的所有字重、斜体样式，要共用同一个font-family名称，只修改规则内的font-weight、font-style参数即可，后续写业务样式时直接通过font-weight属性切换字重，不需要给不同字重单独命名字体家族名，能省掉大量重复的样式代码。

第二步：用工具自动生成配置，零手写规则 #

不需要自己逐行写CSS、核对文件路径：

• 单项目少量字体引入的场景，直接用本地运行的字体处理工具，把整理好的字体文件夹拖入，勾选需要的woff2、woff格式，工具会自动识别每个文件对应的字重、斜体属性，直接生成整段可用的@font-face代码，复制到CSS里就能用，全程不需要手动匹配参数。
• 用Vite、Webpack等构建工具的工程化项目，直接安装对应的字体处理构建插件，把字体文件按统一命名规则（比如SourceHanSans-400.woff2、SourceHanSans-700-italic.woff2）放到项目的字体目录下，插件会在构建时自动扫描文件、解析文件名里的字重和样式信息，自动把@font-face规则注入到最终产出的CSS里。后续新增字体、新增字重时只需要把文件丢进对应目录，不需要修改任何CSS代码。
• 有中文等大体积字体需求的场景，可以搭配子集化插件，自动裁剪掉项目里没用到的字符，十几MB的中文字体裁剪后通常只有几百KB，还能自动配置分块懒加载，不会拖慢首屏加载速度。

第三步：统一文件管理规则，避免后续混乱 #

• 固定字体命名规范：所有字体文件统一按字体名-字重-样式.后缀的格式命名，斜体文件加italic标识，不管是手动维护还是工具扫描，都不会出现参数匹配错误的问题。
• 目录分层存放：在静态资源目录下单独建fonts文件夹，每个字体家族单独建一个子文件夹存放对应文件，不要把不同字体的文件散落在图片、图标等其他资源目录里，查找、替换文件时不需要逐个翻找。

最简配置参考 #

/* 同字体家族只需要修改字重、文件路径即可，无冗余代码 */
@font-face {
  font-family: 'LocalFont';
  src: url('./fonts/LocalFont/LocalFont-400.woff2') format('woff2'),
       url('./fonts/LocalFont/LocalFont-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LocalFont';
  src: url('./fonts/LocalFont/LocalFont-700.woff2') format('woff2'),
       url('./fonts/LocalFont/LocalFont-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

内容的提问来源于stack exchange，提问作者Arctomachine