字体子集化后中文显示成方块怎么办？

UX-怡博提问于 2026-03-13 10:31:20 阅读 13

优化

我用 fontmin 做了字体子集，结果页面上的中文全变成方块了，是不是哪里配置错了？

项目是 React 的，我只保留了英文和几个常用中文字符，但实际渲染时连英文也出问题了。试过把字体文件换成 woff2 格式，还是不行。

import './App.css';

function App() {
  return (
    <div style={{ fontFamily: 'MySubsetFont, sans-serif' }}>
      Hello 你好
    </div>
  );
}

export default App;

我来解答赞 0 收藏

反馈

1 条解答

慕容梦幻 Lv1

这个问题我遇到过，子集化后显示方块一般是这几个原因：

先检查子集化过程

你用 fontmin 做子集的时候，字符是怎么指定的？如果是用文本文件传入要保留的字符，确保文件编码是 UTF-8，而且字符确实写进去了。我见过有人用记事本保存字符列表，结果编码不对，子集化出来的字体是空的。

检查 @font-face 声明

你的 CSS 里要类似这样写：

@font-face {

  font-family: 'MySubsetFont';

  src: url('./fonts/your-subset.woff2') format('woff2');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

注意 font-display: swap 这个属性，加上能避免字体加载时的闪烁问题。

回退字体链要写好

你的样式里只写了 sans-serif 作为回退，这个不够。改成：

font-family: 'MySubsetFont', 'PingFang SC', 'Microsoft YaHei', sans-serif;

这样如果子集字体加载失败或者缺字符，至少能正常显示。

快速验证方法

打开浏览器开发者工具，在 Elements 面板找到那个 div，看看 computed 里的 font-family 应用上了没有。然后在 Network 面板确认字体文件请求返回 200 并且能预览到内容。

如果字体文件请求成功了但大小是 0 或者很小，基本就是子集化过程有问题，重新跑一遍，确保字符列表正确传入。

你用的是哪个版本的 fontmin？现在项目里用的是什么方式引入子集化后的字体文件？

2026-03-13 11:04