如何减少字体子集导致的额外HTTP请求？

Des.俊杰提问于 2026-02-10 00:44:24 阅读 21

优化

在项目里用Web字体时发现，每个字体文件都会单独发起HTTP请求，比如这样：@font-face{src:url('font.woff2')}，这样首屏加载好慢啊。

试过把字体文件转成base64内联，但发现woff2转base64后代码体积反而变大了，比如原本20KB的字体文件变成30KB左右的字符串。

现在卡在字体优化这一步，有什么更好的办法既能减少请求次数又不显著增加主包体积吗？webpack的file-loader和url-loader应该怎么配置？

我来解答赞 20 收藏

反馈

2 条解答

一巧云 Lv1

省事的话直接用woff2压缩字体，然后通过font-display: swap减少阻塞，再把多个字体文件合并成一个woff2用unicode-range做子集分隔，一个请求搞定。webpack配个file-loader把字体输出到同目录就行，别用base64。

@font-face {

  font-family: 'MyFont';

  src: url('fonts.woff2') format('woff2');

  font-display: swap;

  unicode-range: U+0000-00FF; /* ASCII */

}



@font-face {

  font-family: 'MyFont';

  src: url('fonts.woff2') format('woff2');

  font-display: swap;

  unicode-range: U+0100-024F; /* Latin Extended */

}

2026-02-12 08:09

Dev · 志鲜 Lv1

把多个字体文件合并成一个woff2，用unicode-range做子集分割，这样一次请求能缓存住整套字体，后续按需加载子集。base64确实会膨胀，别用。

webpack配file-loader的时候加publicPath，把字体打到cdn，然后用font-display: swap避免阻塞渲染。关键配置：

{

  test: /.(woff|woff2|eot|ttf|otf)$/,

  use: [{

    loader: 'url-loader',

    options: {

      limit: 8192,

      fallback: 'file-loader',

      name: 'fonts/[name].[hash:8].[ext]',

      publicPath: '//cdn.yoursite.com/'

    }

  }]

}

再配合splitChunks把字体单独拆包，和主逻辑分离。首屏只加载中文标题需要的那部分字形，正文用系统字体过渡也行。

拿去改改，记得清缓存测效果。

2026-02-10 01:07