如何把 7 个字重装进 1 个文件：思源黑体可变字体完整实践指南

如何把 7 个字重装进 1 个文件思源黑体可变字体完整实践指南【免费下载链接】source-han-sansSource Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕项目地址: https://gitcode.com/gh_mirrors/so/source-han-sans一个文件覆盖 ExtraLight250到 Heavy900共 7 个字重——这就是思源黑体可变字体给泛 CJK 排版提供的能力。它是 Adobe 与 Google 共同维护的开源字体项目仓库里保留了重建静态字体与可变字体的全部源材料。本文基于仓库内真实文件讲清楚可变字体如何写 CSS、如何从源码构建以及它的取舍在哪。 一条 wght 轴单文件如何覆盖 250 到 900两个极端母版加一张插值表可变字体Variable Font不存 7 套轮廓只存 ExtraLight 与 Heavy 两个端点中间字重由渲染端实时插值。设计空间文件 Masters/designspaces/SourceHanSans-VF.designspace 里source只指向两份文件SourceHanSansVF-ExtraLight.otf与SourceHanSansVF-Heavy.otf。轴的定义如下axis default250 maximum900 minimum250 nameweight tagwght map input400 output390 / !-- Regular -- map input900 output1000 / !-- Heavy -- /axismap标签负责外部字重值到内部插值坐标的换算Regular400对应内部坐标 390Heavy900被拉伸到 1000为插值留足空间。7 个具名实例instances里列出 7 个标准点位ExtraLight250、Light300、Normal350、Regular400、Medium500、Bold700、Heavy900。Masters/STAT.fea 再把这些点位注册进 STAT 表操作系统字体菜单因此能正常显示每个实例的名称思源黑体可变字体在旧版软件里也会退化成这 7 个具名版本而不是乱序。按投放范围分组的 3 套设计空间通用版Masters/designspaces/下 5 个文件SourceHanSans-VF.designspace及 SC简体、TC繁体、K韩文、HC繁体·港各一子集版Masters/designspaces/Subset/ 下按 CN、HK、JP、KR、TW 地区拆分的 5 个文件半角版Masters/designspaces/HW/ 下 5 个文件适配日文中混排半角拉丁字符的场景。仓库根目录的FontMenuNameDB.VF、FontMenuNameDB.VF.SUBSET、FontMenuNameDB.VF.HW三份菜单名文件与上述三组一一对应。 文件布局可变字体源文件都在哪里VF 源文件只出现在 4 个字重目录Masters/ExtraLight/VF/与Masters/Heavy/VF/插值两端各含cidfont.VF.地区.unhinted与features.VF.地区成对文件Masters/Regular/OTC/VF/与Masters/Bold/OTC/VF/半角可变字体的两端文件名为cidfont.VF.HW.地区.unhinted。.unhinted后缀表示尚未加 hintinghinting 是一套改善小字号屏幕渲染的指令表构建后可在后处理步骤补上。每个字重目录都是完整一套源码ExtraLight 到 Heavy 的 7 个字重目录里各有三类文件cidfont.ps.*CFF 轮廓数据、features.*OpenType 特性、cidfontinfo.*字体元信息。仓库根目录还有 10 个UniSourceHanSans*-UTF32-H文件是 Unicode 到 CID 的映射表COMMANDS.txt 中的构建命令通过-ch参数引用它们。构建文档入口COMMANDS.txt 记录了全部静态字体的makeotf命令行文件末尾注明可变 OTF 应改用 build/ 目录下的两个脚本构建。️ 两种接入方式Web 端写 CSS或从源码构建方式 A用 font-face 声明可变字体拿到构建好的字体文件后声明如下font-weight区间要与设计空间的 wght 范围 250 900 一致否则浏览器会吸附到最近的具名实例平滑过渡失效font-face { font-family: Source Han Sans VF; src: url(./SourceHanSansSC-VF.otf) format(opentype); font-weight: 250 900; font-display: swap; } h1 { font-family: Source Han Sans VF, sans-serif; font-weight: 620; /* 250–900 间任意值不限 7 个预设点 */ }方式 B从源码构建可变字体先安装 AFDKOAdobe Font Development Kit for OpenType字体构建工具链再获取源码git clone https://gitcode.com/gh_mirrors/so/source-han-sans cd source-han-sans接着按顺序执行 build/ 下两个脚本build-source-otfs.py先生成 ExtraLight 与 Heavy 两个母版 OTFbuild/buildVFs.py 再生成全部可变字体python build/build-source-otfs.py python build/buildVFs.pybuildVFs.py内部调用 AFDKO 的buildcff2vf依次处理 15 个设计空间通用 5 子集 5 半角 5输出默认写入 designspaces 目录可用-o改到别处。常见问题只想构建简体中文一份怎么办不必跑满 15 个直接对单个设计空间执行buildcff2vf --omit-mac-names -d Masters/designspaces/SourceHanSansSC-VF.designspace这与buildVFs.py中 SC 分支单次循环执行的命令一致-d即指定设计空间文件路径。⚠️ 边界与代价哪些情况别用可变字体单文件体积并非零成本思源黑体可变字体要完整保存 ExtraLight 与 Heavy 两端轮廓数据。泛 CJK 字体字形量大单个可变 OTF 往往比一个字重的静态子集 OTF 更大。若产品只用 2~3 个字重多个静态字体文件的总体积反而可能更小。兼容与渲染可变字体依赖渲染端支持 OpenType 1.8 的可变表较老的浏览器与部分办公套件只能使用具名实例。源文件均为.unhinted版本若要在小尺寸屏幕上保证渲染质量构建后需补充 hinting 工序。组合建议Web 端需要全部字重用 1 个可变字体文件1 次请求、1 份缓存桌面单字重或嵌入设备用对应字重目录的静态子集 OTF构建命令都在 COMMANDS.txt。下一步建议先执行buildcff2vf -d Masters/designspaces/SourceHanSansSC-VF.designspace拿到简体中文一份加载到浏览器字体测试页里把 font-weight 从 250 拖到 900确认思源黑体可变字体在任意中间值下笔画都能平滑插值之后再按Masters/designspaces/下Subset与HW两个子目录里的文件逐个构建地区子集或半角版本。【免费下载链接】source-han-sansSource Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕项目地址: https://gitcode.com/gh_mirrors/so/source-han-sans创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考