企业官网建设流程全解析

思源黑体可变字体完整指南：250-900 字重一个文件全搞定

【免费下载链接】source-han-sansSource Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕项目地址: https://gitcode.com/gh_mirrors/so/source-han-sans

思源黑体（Source Han Sans）是 Adobe 与 Google 联合维护的开源泛中日韩字体项目，遵循 SIL Open Font License 授权。它不只提供现成的 OpenType 字体，还完整开放了用 AFDKO 工具链构建字体的全部源文件——其中可变字体（Variable Font）方案把 ExtraLight 到 Heavy 共 7 个字重压缩进单一文件，是这套项目里对前端和桌面开发最有实用价值的能力。

亮点速览

• 单文件覆盖wght轴 250–900 全字重范围，ExtraLight（250）到 Heavy（900）平滑插值
• 一套源文件同时产出 SC / TC / HC / J / K 五个地区变体，加上半角（HW）与子集（Subset）版本
• 完整开放构建链路：designspace 设计空间、OpenType features 脚本、字体命名数据库齐全，可二次定制
• 提供命名实例（Named Instances），字体菜单中可直接显示 "Light""Bold" 等标准名称

为什么值得：一个文件替代几十个文件

传统部署思源黑体的方式，是每个字重、每个地区各一个文件：7 个字重 × 5 个地区就是 35 个 OTF，再加上 OTC 合集、半角版本，动辄上百个文件。页面想同时用到 3 种字重，就得发 3 次请求；更新一个字重的轮廓，就得同步分发整批文件。

可变字体把这件事倒过来了：wght轴上，ExtraLight 与 Heavy 两个"母版"（master）之间由渲染引擎按数学插值计算中间状态，于是font-weight: 450这种过去只能四舍五入到最接近字重的取值，现在可以精确呈现。文件数量从 35 降到 5（每个地区一个 VF），请求数和缓存维护成本随之减半再减半。

快速上手：三条最短路径

第一步：获取源文件

仓库本身只包含构建源文件，不含编译好的字体二进制。如果你只需要"拿来就用"的字体，从官方 release 下载对应 ZIP 即可；若要自己构建或定制，先克隆源码：

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

第二步：按 COMMANDS.txt 构建

项目根目录的 COMMANDS.txt 收录了构建各类 OTF / OTC / Super OTC 的完整命令行，每条命令对应一种部署形态。以构建简体中文子集 OTF 为例（在对应字重目录下执行，$dir替换为字重名）：

makeotf -f cidfont.ps.CN -omitMacNames -ff features.CN \ -fi cidfontinfo.CN -mf ../FontMenuNameDB.SUBSET -r -nS \ -cs 25 -ch ../UniSourceHanSansCN-UTF32-H \ -ci ../SourceHanSans_CN_sequences.txt

可变字体的构建则由buildVFs.py等脚本完成（见 COMMANDS.txt 末尾说明）。前提只有一个：安装 AFDKO 工具包。

第三步：在你的项目里引用

Web 端只需一段@font-face声明字重范围，后续所有字重都落在同一文件内：

@font-face { font-family: 'SourceHanSansSC-VF'; src: url('SourceHanSansSC-VF.woff2') format('woff2'); font-weight: 250 900; }

之后font-weight取 250–900 间任意值均可，配合transition还能做字重渐变的动效。

核心能力拆解

250–900 全字重轴，七个标准命名实例

Masters/designspaces/SourceHanSans-VF.designspace 定义了字重轴的全部参数：最小值 250、最大值 900、默认值 250，并给出内部插值坐标的映射——250→0、300→160、350→320、400→390、500→560、700→780、900→1000。对应的 Masters/STAT.fea 则声明了 7 个命名实例（ExtraLight / Light / Normal / Regular / Medium / Bold / Heavy），保证在支持命名实例的系统里，字体菜单能直接选中标准字重名，而不必手动输入数值。

一套轮廓，五个地区变体

各字重目录（如 Masters/Bold/）下按CN / HK / JP / KR / TW分列cidfont.ps.*、cidfontinfo.*、features.*三件套，差异主要在字符集与排版细节：每个地区绑定专属字符集文件（如 UniSourceHanSansJP-UTF32-H）和字符顺序表（如 SourceHanSans_JP_sequences.txt），处理的是同一字符在不同地区字形偏好不同的问题（例如 U+5348 在日本与中文环境下形状不同）。可变字体源文件同理，Masters/Regular/OTC/VF/ 与 Masters/Heavy/OTC/VF/ 各放一对母版源（cidfont.VF.*.unhinted+features.VF.*）。

半角版本与子集版本

• 半角（HW）系列：Masters/designspaces/HW/ 下有 5 个 designspace，字重范围收窄到 400–700（Regular / Medium / Bold 三档），适合 UI 界面中紧凑排布的场景，Masters/STAT.HW.fea 对应其命名实例。
• 子集（Subset）系列：Masters/designspaces/Subset/ 提供 CN / HK / JP / KR / TW 五个面向子集 OTF 的 designspace，配合 FontMenuNameDB.SUBSET 命名库，产出按地区精简的独立 OTF。

构建链路全透明

从 PostScript 轮廓（cidfont.ps.*）到最终字体的每一步都有据可查：makeotf合成、tx提取 CFF 子集、sfntedit修表、otf2otc打包集合字体，命令行逐条写在 COMMANDS.txt 里。字体菜单命名由 FontMenuNameDB、FontMenuNameDB.VF、FontMenuNameDB.HW 三套数据库管理。这意味着任何一环——轮廓、特征、命名、字符集——都可以被审计和定制。

实战场景

Web 项目的字体瘦身。资讯类站点常用正文 Regular + 标题 Bold + 导语 Medium 三种字重。旧方案下是 3 个 WOFF2 文件 3 次请求；换成思源黑体可变字体后，1 个文件、1 次请求，@font-face声明font-weight: 250 900即可，font-display: swap还能避免字体加载期的空白闪烁。

设计稿到成品的字重自由。用 Figma、Illustrator 等工具排版时，可变字体允许设计师在 250–900 间取非标准值（如 550）做实验性标题，不用事先决定"到底是 Medium 还是 Bold"。确认后再回落到命名实例，交付时系统按 Masters/STAT.fea 里的标准名称展示。

字体工程二次开发。若要基于思源黑体做定制字体（换轮廓细节、加私有序列、改命名），完整源文件意味着不必从零搭工具链：改对应的features.*脚本或 designspace 后按 COMMANDS.txt 重跑即可，许可证（SIL OFL）也允许商用衍生。

原理速览

可变字体的核心是"多母版插值"。以思源黑体为例，designspace 文件 只声明两个源：ExtraLight 母版（插值坐标 0）和 Heavy 母版（插值坐标 1000）。OpenType 的glyf/CFF2 表里为每个字形存下两个母版的轮廓差异，渲染时按wght取值在两者之间线性插值，生成 450、630 这类"不存在于文件中的字重"。<map>节点把标准字重值换算为内部插值坐标，让 250–900 的 CSS 取值与轮廓实际粗细的对应关系更均匀。你只需要知道：一个 VF 文件 = 两个母版轮廓 + 一张轴映射表，插值本身由系统完成。

常见问题与避坑

Q：仓库里为什么找不到现成的 .otf / .woff2？这个仓库只存放构建源文件（轮廓、features、designspace、命名库等），成品字体在官方 release 里。要构建需自行安装 AFDKO。

Q：font-weight: 450在浏览器里没生效，还是粗的/细的？浏览器必须支持可变字体（现代 Chrome / Firefox / Safari 均支持），且@font-face里必须声明font-weight: 250 900区间；若写成font-weight: 400，非 400 的取值会退回到标准字重。另外注意本项目的轴范围是 250 起，不存在 100–249。

Q：SC 和 CN 有什么区别？SC 是"简体中文版"（Source Han Sans SC），CN 是"中文字形子集版"（按大陆字库习惯精简后的 Subset 版）。两者的 designspace 分别位于 Masters/designspaces/SourceHanSansSC-VF.designspace 和 Masters/designspaces/Subset/。选哪个取决于你要的是地区字形版本还是精简体积版本。

Q：半角（HW）版本为什么只有 400–700？半角系列设计上只覆盖 Regular / Medium / Bold 三档（见 Masters/designspaces/HW/SourceHanSansHWSC-VF.designspace 的轴定义），因为半角形态主要服务于界面文字，粗细需求集中在常规区间。

Q：构建 OTC 时报找不到.tmp文件？COMMANDS.txt 中 OTC 构建流程有严格顺序：先sfntedit -x抽出 CFF、cp出.tmp副本、逐个删 DSIG 表，最后才能otf2otc打包。逐字重、按文档顺序执行，不要跳步。

适合谁用，下一步做什么

• 前端 / Web 开发者：值得直接用——单文件多字重对首屏加载是实打实的收益。下一步：从 release 取 SC 或 TC 的 VF 转成 WOFF2，按"快速上手"第三步接入页面。
• 平面 / UI 设计师：可变字体让你摆脱"7 选 1"的字重约束。下一步：在支持可变字重的工具里安装 VF 版，体验 250–900 全区间拖拽。
• 字体工程师：这是极佳的参考实现。下一步：通读 COMMANDS.txt 与 Masters/designspaces/ 下的 designspace，理解"母版 → 轴 → 实例"的完整链路，为定制字体打底。
• 只需要静态字体的用户：不必折腾可变字体，直接按字重从 release 下载常规 OTF / OTC 更省事。

许可方面见 LICENSE.txt（SIL OFL），可商用、可修改、可再分发；更完整的背景与设置说明可参考 README-CN.md 中指向的官方设计指南。

【免费下载链接】source-han-sansSource Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕项目地址: https://gitcode.com/gh_mirrors/so/source-han-sans