首页 / 资讯中心 / 文章详情

思源黑体可变字体:一个文件搞定 250–900 连续字重的完整方案

思源黑体可变字体:一个文件搞定 250–900 连续字重的完整方案 ★ FEATURED ARTICLE
思源黑体可变字体一个文件搞定 250–900 连续字重的完整方案【免费下载链接】source-han-sansSource Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕项目地址: https://gitcode.com/gh_mirrors/so/source-han-sans把正文设为 450 字重、大标题拉到 620不需要准备两份字体文件——这是思源黑体可变字体带来的直接变化每个地区变体一个文件覆盖 250–900 的 OpenType 可变字体字重范围450 这种在传统静态字体里不存在的值也能直接用。以前35 个文件轮着管现在一个文件调字重传统静态部署可变字体VF版本文件数量5 个地区 × 7 个字重共 35 个 OTF每个地区 1 个可用字重仅 250/300/350/400/500/700/900 七个固定值250–900 之间任意取值版本更新同步改 35 个文件同步改 5 个字重轴上的中间值如 420、580由渲染端按轮廓插值生成而不是从另一份文件里加载。designspace 定义字重轴STAT.fea 定义系统菜单里的 7 个名字可变字体的核心在 Masters/designspaces/ 下的.designspace文件。以最通用的 SourceHanSans-VF.designspace 为例Masters/ ├── designspaces/ │ ├── SourceHanSans-VF.designspace # 泛中日韩 │ ├── SourceHanSansSC-VF.designspace # SC / TC / JP / K / HC 各一份 │ ├── Subset/ # CN / HK / JP / KR / TW 子集版 │ └── HW/ # 半角版字重范围 400–700 ├── ExtraLight/ Heavy/ # 两个端点母版 ├── Regular/OTC/VF/ # 构建中间源文件*.unhinted features └── STAT.fea # 系统字重菜单的命名实例轴定义只有两个端点母版中间全部靠插值axis default250 maximum900 minimum250 nameweight tagwght map input250 output0 / !-- ExtraLight -- map input400 output390 / !-- Regular -- map input900 output1000 / !-- Heavy -- /axismap把外部字重值font-weight写的数映射到内部坐标sources指向 ExtraLight 和 Heavy 两个母版。Masters/STAT.fea 则声明了 ExtraLight 250、Light 300、Normal 350、Regular 400、Medium 500、Bold 700、Heavy 900 这 7 个命名实例操作系统字体菜单里看到的名字就来自这里。多语言分片由三组 designspace 承担根目录下的 SC/TC/HC/J/K 是泛CJK 全量版Subset/是单语言子集HW/是半角版字重轴只有 400–700。前端接入font-weight 写区间响应式字重是最大收益 以 CN 子集版构建后 familyname 为SourceHanSansCN为例font-face { font-family: SourceHanSansCN; src: url(fonts/SourceHanSansCN-VF.woff2) format(woff2); font-weight: 250 900; } body { font-family: SourceHanSansCN, sans-serif; font-weight: 400; } h1 { font-weight: 700; } /* 移动端改用更细的字重 */ media (max-width: 768px) { body { font-weight: 350; } }font-weight: 250 900声明了字体支持的字重区间之后任何元素在 250–900 之间取值都不需要换字体文件。响应式字重是实际收益最明显的一点小屏正文降到 350、桌面端回到 400一行媒体查询的事且字重可以带transition做平滑变化。桌面端接入则靠命名实例macOS 的 Core Text、Windows 的 DirectWrite 以及主流设计软件已支持 OpenType 可变字体。字体菜单显示 STAT.fea 里的 7 个名字选中 Regular 后支持可变字重的应用如新版 Adobe Creative Suite允许在 250–900 之间继续滑。最短构建路径两个脚本两条命令仓库只提供源文件和构建脚本不含预编译二进制自己构建的路径是git clone https://gitcode.com/gh_mirrors/so/source-han-sans cd source-han-sans pip install afdko # 依赖AFDKO 工具链 cd build python build-source-otfs.py # 第一步先构建 ExtraLight / Heavy 母版 python buildVFs.py # 第二步按 designspaces/ 插值出全部可变字体build/build-source-otfs.py 用 makeotf 打出两端母版build/buildVFs.py 内部调用buildcff2vf遍历 Subset、全量、HW 三组 designspace 批量出文件COMMANDS.txt 末尾也注明可变字体就是用这两个脚本构建的。选型建议什么场景值得切到可变字体适合中文为主的 Web 页面想要连续字重或 hover/媒体查询里的字重变化需要同时覆盖简繁日韩、又不想维护几十个字体文件的团队桌面排版项目需要 450、350 这类菜单之外的自定义字重混排半角/全角场景可直接选HW/下的半角版注意其字重轴只有 400–700不适合目标环境只认静态字体较老的浏览器引擎可变字体会被降级到默认实例中间字重无效此时用静态 OTF 更稳妥只需要单一字重、且渲染环境不支持可变字体时静态文件体积和实现都更简单回到项目本身思源黑体可变字体把7 个字重 × 5 个地区的文件矩阵收敛为每地区一个文件字重轴完整暴露给 CSS 和桌面渲染管线。designspace、STAT 声明和构建脚本全部开源可查想改字重映射或新增实例时可以直接在 Masters/designspaces/ 里看到每一处是怎么定义的。【免费下载链接】source-han-sansSource Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕项目地址: https://gitcode.com/gh_mirrors/so/source-han-sans创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
阅读完成 · 觉得有帮助?
咨询建站