开源字体思源黑体：3步搞定选型、安装与跨平台适配-平芜编程栈

开源字体思源黑体：3步搞定选型、安装与跨平台适配

上个月重构一个多语言电商详情页，我踩了两个坑：同一个"骨"字在日文版和简中版长得不一样，首屏字体加载还直接超时。根因是把思源黑体（Source Han Sans）这套开源字体整个塞进了项目——7个字重、5个区域版本，跨平台适配全乱了。这篇文章不聊设计史，只讲三件事：该拿哪个文件、装到哪里、Web端用哪种格式。

先看懂文件命名：思源黑体区域版本怎么选

这一节解决"面对一堆文件不知道从哪下手"的问题。

source-han-sans 仓库的核心是 Masters/ 目录，按 7 个字重组织：ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy，每个字重下面再分 5 个区域版本：

SC（CN）简体中文 ·TC（TW）繁体中文（台湾） ·HC（HK）繁体中文（香港）
J（JP）日文——整套字体的基准版本
K（KR）韩文

⏱30秒速查：同一个字，在不同区域不共用同一套字形。日文版的"骨""直"和标点形态都单独调过。你的页面只面向中文就取 CN 版，做日文排版就取 JP 版，别凭直觉选区域版本，这是"同一个字长得不一样"的第一大来源。

仓库根目录还配了每个区域的 Unicode 映射表（UniSourceHanSansCN-UTF32-H 等）和字形序列表（SourceHanSans_CN_sequences.txt），自建字体需要的构建命令全部写在 COMMANDS.txt 里，不用自己翻文档。

📌选型口诀：先定目标语言，再定字重，最后才看格式。

三步把思源黑体装进系统

这一节解决"字体从哪拿、装到哪里"的问题。

第一步：拿源码

git clone https://gitcode.com/gh_mirrors/so/source-han-sans

第二步：按用途挑文件

直接用现成字体：仓库内是构建源文件与可变字体文件，OTF/OTC/Super OTC 的现成发布包按 README-CN.md 的下载说明获取
自建字体：用 makeotf 从源文件构建 OTF/OTC，命令见 COMMANDS.txt
可变字体：designspace 源文件在 Masters/designspaces/，单个文件覆盖 wght 轴250–900共 7 个字重实例，轴与命名定义见 Masters/STAT.fea

第三步：各平台安装位置速查

平台	安装位置	备注
Windows	`C:\Windows\Fonts`	重启应用生效
macOS	Font Book 或`~/Library/Fonts`	无需额外操作
Linux	`~/.local/share/fonts`（用户级）或`/usr/share/fonts`（系统级）	装完跑`fc-cache -f`更新缓存，否则"装上了却找不到"

按场景选格式：WOFF2、可变字体、OTC 怎么挑

这一节解决"不同类型的项目该用哪种格式"的问题。

先用决策树缩小范围：

用于网页：
- 首屏性能是红线 →WOFF2 + 子集化，只加载用到的字形
- 需要动态调字重 →可变字体，一个文件替代 7 个静态字重
用于移动 App：可变字体，或限定字重范围的单字重文件
用于印刷 / 设计工作站：OTF 或 OTC，全字形、渲染精度最高

Web 端的核心动作是"转 WOFF2 + 思源黑体子集化"，这也是 WOFF2 字体加载提速的关键。用unicode-range把中文字形圈出来，拉丁字符交给系统字体，省掉的带宽立竿见影：

@font-face { font-family: 'SourceHanSansSC'; src: url('SourceHanSansCN-Regular.woff2') format('woff2'); unicode-range: U+4E00-9FFF; /* 只加载中文字形 */ font-weight: 400; }

子集化只保留页面实际用到的字符，首屏百来个字就能把十几 MB 的字体压到几百 KB：

pyftsubset SourceHanSansCN-Regular.otf \ --text-file=chars.txt --flavor=woff2 \ --output-file=SourceHanSansCN-Regular-subset.woff2

四种主力格式对比：

格式	里面有什么	体积感受	什么时候拿它
OTF	1 字重 × 1 区域	单文件 10MB+	只要一个区域一个字重，或印刷要全字形
OTC	同一字重的 5 个区域	比单 OTF 略大（表共享）	同页多区域、想省文件数
Super OTC	全部字重打进一个 .ttc	100MB+	设计工作站，一次装全
可变字体	单文件覆盖 wght 250–900	数十 MB	需要动态字重的 Web / App

踩坑实录：安装后 4 个高频问题

这一节解决"装了却找不到、用了却不对"的问题。

🔎Linux 装完找不到。先别怀疑字体，怀疑缓存：跑一遍fc-cache -f -v，再确认文件权限可读。
标点和字形"串味"。页面是中文却取了 JP 版，标点、异体字就全变日式。解法：字体跟着页面语言走，或显式指定lang与font-feature-settings。
可变字体不生效。旧环境不认识 VF 时会回退甚至不渲染，备一份静态字重（通常 Regular）兜底。
OTC 在印刷系统打不开。有些 RIP 软件对 .ttc 集合支持有限，送印前先拆成单文件 OTF。

📍一句话判词：八成"字体问题"其实是拿的文件和目标环境不匹配，先查文件，再查系统。