思源宋体CN完全实战指南：7种字重免费商用字体从安装到网页落地

思源宋体CN完全实战指南：7种字重免费商用字体从安装到网页落地

【免费下载链接】source-han-serif-ttfSource Han Serif TTF项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf

假设你正在为一家茶饮品牌的官网挑选正文字体：要免费商用、要覆盖简体中文、要撑得起品牌调性，最好还能有多个字重做视觉层次。思源宋体CN（Source Han Serif CN）正是为这类需求而生的开源中文字体——本仓库把 Adobe 与 Google 联合开发的思源宋体整理为 TTF 格式，并拆出简体中文专用子集，7 种字重一次拿全。这篇文章不堆概念，直接带你从获取文件、系统安装，一路做到网页项目里真正跑起来。

一、动手之前：先掌握这套字体的4条最小知识

1.1 它到底是什么

思源宋体是 Adobe 与 Google 联合出品的开源泛中日韩（Pan-CJK）宋体，本仓库的核心价值在于两点：把字体统一转成了 TTF 格式（相比 OTF 更容易被各类 Web 工具链和设计软件处理），以及提供了简体中文专用子集，让中国大陆用户不必加载全字符集的大体积文件。

1.2 7种字重速查表

字体家族共 7 档字重，从极细到特粗，直接对应 CSS 的 font-weight 数值：

1.3 仓库目录里有什么

所有简体中文字体都集中在SubsetTTF/CN/目录下，7 个文件各约 13MB，合计约 88MB。文件命名即字重名，按需取用即可。

1.4 授权一句话版

整套字体基于SIL 开源字体许可证 1.1发布：可以免费商用、可以自由修改与再分发，唯一的大前提是不能把字体文件本身单独拿去卖。更细的合规要点放在第七节。

二、获取字体：一条命令拿到全部7种字重

在终端执行：

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

克隆完成后进入仓库，简体中文字体都在SubsetTTF/CN/下。你不需要全部 7 个文件都拷贝走，先用哪个拿哪个，其余留给后续按需加载。

💡 如果只想快速验证字形效果，可以先只取 Regular 与 Bold 两个文件，其余字重等设计稿确定后再补齐，避免前期文件混乱。

三、系统安装：三平台三步走

Windows 用户

1. 进入SubsetTTF/CN/目录
2. 右键选中需要安装的.ttf文件
3. 点击"为所有用户安装"，等待提示完成

macOS 用户

1. 打开"字体册"（Font Book）
2. 将.ttf文件直接拖入窗口
3. 确认字体状态显示为"已安装"

Linux 用户

# 创建用户级字体目录（若已存在会提示，可忽略） mkdir -p ~/.local/share/fonts/ # 复制全部字重 cp SubsetTTF/CN/*.ttf ~/.local/share/fonts/ # 刷新字体缓存，否则新字体不生效 fc-cache -fv

⚠️ Linux 上最容易翻车的就是最后一步：忘记执行fc-cache -fv，导致字体文件明明在目录里，应用却始终找不到。安装完成后用fc-list | grep -i "Source Han Serif CN"验证是否注册成功。

四、从零到一：企业官网接入思源宋体CN的完整流程

这是整篇文章的核心示例：假设你要为一家茶饮品牌官网接入思源宋体CN，按下面四步走即可上线。

4.1 用 @font-face 声明字体

在 CSS 中为每个用到的字重单独声明：

@font-face { font-family: 'Source Han Serif CN'; src: url('fonts/SourceHanSerifCN-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Han Serif CN'; src: url('fonts/SourceHanSerifCN-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

font-display: swap的作用是让文字先用回退字体渲染、字体加载完成后替换，避免出现文字空白闪烁（FOIT）。

4.2 正文与标题的字重分配

参考这套经过验证的分配方案，直接照抄即可：

4.3 移动端适配要点

移动端优先用 Light 与 Regular 控制信息密度：设置项与辅助说明用 Light（13–14px），正文用 Regular（15–16px），按钮文字用 SemiBold（16–17px）。宋体在低分辨率屏幕上容易显得细碎，建议同时开启抗锯齿优化：

body { font-family: 'Source Han Serif CN', 'Noto Serif SC', 'Songti SC', serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

4.4 设置回退字体栈

字体文件加载失败或未加载时，回退顺序决定了用户的兜底体验。上面的示例栈就是标准做法：思源宋体CN → Noto Serif SC → 系统宋体 → 通用衬线字体。

五、横向对比：它和常见中文字体差在哪

很多新手纠结"选思源宋体还是别的"，一张表说清楚：

结论很明确：需要衬线质感和多字重层级，选思源宋体CN；需要无衬线的现代感，选思源黑体CN；微软雅黑与系统中易宋体仅在无法引入自定义字体的封闭环境里作为兜底。

六、新手最常踩的5个坑

1. 只装了 Regular 一个字重：页面里所有 Bold、Light 都找不到对应文件，浏览器会自行合成或退化为系统字体，视觉全乱。按需把用到的字重全部安装或声明。
2. @font-face 的 font-weight 写错：200/300/400/500/600/700/900 必须与文件实际字重一一对应，否则浏览器匹配不到正确的字形。
3. 把 13MB 的 TTF 直接丢上线：单字重 13MB、7 个字重 88MB 的体积对网页是灾难，必须做子集化与格式转换（见第八节）。
4. Linux 装完不刷缓存：fc-cache -fv忘了执行，字体就像没装一样，排查时先跑这条命令。
5. 改个名就对外分发商用：SIL 许可证规定派生字体不能使用"Source Han Serif"保留名称，擅自改名再分发有合规风险。

七、商用合规：动工前确认这4件事

1. 确认许可证：项目根目录的LICENSE.txt就是 SIL 开源字体许可证 1.1 全文，商用前通读一遍，重点看"PREAMBLE"和"PERMISSION & CONDITIONS"两节。
2. 保留版权声明：再分发字体时，必须随附版权声明与许可证文本，可以单独放一个文本文件，也可以写进字体文件的元数据字段。
3. 尊重保留名称：对字体做修改后，不允许继续使用原保留名称对外发布，除非获得 Adobe 的书面许可。
4. 明确分发边界：字体可以捆绑进软件、随文档嵌入、随产品再分发，但不能把字体文件本身作为商品单独出售；用字体排出来的文档则完全不受限制。

📜 如果你要在项目说明或产品页声明字体来源，参考写法："本项目使用思源宋体CN（Source Han Serif CN），由 Adobe 与 Google 联合开发，遵循 SIL 开源字体许可证 1.1。"

八、进阶优化：让思源宋体CN在网页里跑得更快

8.1 子集化：只保留用到的字符

用 Python 的 fonttools 对字体做字符子集提取，体积可从 13MB 降到 1MB 以内：

pip install fonttools brotli pyftsubset SourceHanSerifCN-Regular.ttf \ --text="品牌口号中的文字示例" \ --output-file=subset-regular.ttf \ --flavor=woff2

💡 中文站点字符覆盖广，更稳妥的做法是按字重 + 按页面模块（首页 / 文章页 / 后台）分别做子集，配合unicode-range分段加载。

8.2 预加载关键字体

首屏要用的字重加 preload 提示，让浏览器尽早发起请求：

<link rel="preload" href="fonts/subset-bold.woff2" as="font" type="font/woff2" crossorigin>

8.3 字体搭配建议

• 现代科技风：思源宋体CN 正文 + 英文无衬线（如 Inter、SF Pro 类）做数据与代码展示
• 传统雅致风：思源宋体CN + 衬线英文（如 Palatino 类），适合文化、艺术、出版类站点
• 学术专业风：思源宋体CN 正文 + 经典英文衬线做论文与报告排版

8.4 把字重选择写进设计规范

在团队里固定一份字重使用规范（哪个字重对应标题、正文、注释），配一套字号阶梯，避免每个人各用各的，最终页面层级混乱。

现在就开始：4步行动清单

1. ✅ 执行git clone https://gitcode.com/gh_mirrors/so/source-han-serif-ttf拿到 7 种字重
2. ✅ 按你的系统完成安装，并用fc-list（Linux）或字体册（macOS）验证生效
3. ✅ 从SubsetTTF/CN/中挑出项目实际用到的字重，按第四节配置 @font-face 与回退栈
4. ✅ 上线前完成子集化与 woff2 转换，并在页面里加上版权声明

思源宋体CN 的价值在于：免费商用、7 字重齐全、简体中文专项优化，而本仓库的 TTF 版本让你能直接把它们接进几乎任何设计或开发流程。现在就开始，把第一套字体装进你的下一个项目里。

【免费下载链接】source-han-serif-ttfSource Han Serif TTF项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf