企业官网建设流程全解析

思源宋体CN开源字体7字重全攻略：免费商用字体从下载到网页上线一次讲透

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

给网站挑中文字体，你是不是也卡在过这个坎上——好看的字体要收费，免费的授权又说不清楚，好不容易找到开源的，下载回来却是 OTF 或一长串看不懂的文件，塞进网页里还不兼容？别急着妥协，思源宋体CN（Source Han Serif CN）正是专门解开这个结的答案：Adobe 与 Google 联合打造的开源宋体，这个仓库已经帮你把 7 种字重整理成了网页兼容性最好的 TTF 格式，全部免费商用。接下来这份攻略，会带你从拿到文件到正式上线，一路不踩坑。

5分钟速通：拿到字体并装进电脑的最短路径

先别研究什么复杂概念，最快的路线只有三步：拉取仓库 → 找到文件 → 装进系统。走完这三步，你的电脑里就有一套完整的思源宋体CN了。

第一步，拉取仓库。在终端里执行这一条命令，字体文件就会落到本地：

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

第二步，找到字重文件。打开克隆下来的目录，进入SubsetTTF/CN/，里面躺着 7 个以.ttf结尾的文件，从ExtraLight（超细）到Heavy（特粗）一字排开。对中文用户来说，认准这一个目录就够了。

第三步，按系统安装。Windows 双击文件点"安装"；macOS 打开"字体册"把文件拖进去；Linux 在终端跑下面三行命令并刷新缓存：

mkdir -p ~/.local/share/fonts/ cp SubsetTTF/CN/*.ttf ~/.local/share/fonts/ fc-cache -fv

装完之后可以用下面这行命令验证一下，看到 7 条记录就说明全部就位了：

fc-list | grep -i "Source Han Serif"

到这里，5 分钟已经足够你在 Word、PS、Figma 里用上这套字体了。接下来我们聊聊：7 个字重，到底该选谁？

7个字重各就各位：按使用场景挑字体，不纠结

一句话结论：7 个文件共用同一套字形设计，区别只在笔画粗细，也就是"字重"。所以你不该按文件名去背，而该按场景去挑。

场景A：长文阅读（公众号、博客、电子书）。正文用 Regular 打底，标题用 SemiBold 提气，行高拉到 1.6 到 1.8，读者连续读上半小时也不累眼。

场景B：商务界面（官网、产品文档、汇报PPT）。正文 Regular，重点数据用 Medium 轻轻强调，大标题上 Bold。层次清楚，又不花哨。

场景C：视觉冲击（活动海报、品牌封面、落地页首屏）。大胆只用 Heavy，配合大量留白，字少、字大、对比强，存在感直接拉满。

再把这 7 个字重的"脾气"汇总成一张表，方便你随时对号入座：

记住一条规律：字号越大越需要细字重来展示细节，字号越大反而越要粗字重撑住气场。拿不准时，正文用 Regular 永远不出错。

从零到一：给个人博客配一套宋体的完整链路

理论聊完，我们走一遍完整流程。假设你要给个人博客换上这套字体，按下面四步来，十分钟内就能看到页面"脱胎换骨"。

第一段：把字体放进项目。在博客项目里新建fonts/目录，把SubsetTTF/CN/下你需要的几个 ttf 文件复制进去。这一步在做什么？让网页在构建时能找到字体文件。

第二段：在 CSS 里声明字体。用@font-face告诉浏览器"这个字体叫什么、文件在哪、对应什么字重"。这一步在做什么？注册字体，页面才能调用它：

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

第三段：把字体应用到正文和标题。给 body 挂上字体栈，给 h1、h2 分别指定字重和字号。注意字体栈末尾一定要留一个通用兜底，浏览器不认识时至少还能显示 serif：

body { font-family: 'Source Han Serif CN', 'Noto Serif SC', serif; line-height: 1.6; } h1 { font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); } h2 { font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.25rem); }

第四段：刷新页面验收。打开页面，你应该能看到正文和标题的宋体效果。这里font-display: swap很关键——它让文字先用回退字体显示，字体加载完再无缝替换，用户完全感知不到等待。

到这里，一条"下载 → 安装 → 声明 → 应用"的完整链路就打通了。

两个进阶玩法：字体瘦身与效果速览

基础跑通之后，这两个玩法能让你比多数人更进一步。

玩法一：给字体瘦身，10MB 变 1MB。中文字体文件动辄好几 MB，全量加载会拖慢首屏。你可以用子集化工具只提取页面实际出现的字符，体积能砍掉大半。基于 fontTools 的pyftsubset是常用选择，命令长这样：

pyftsubset SourceHanSerifCN-Regular.ttf --text="页面里会出现的所有字符" --output-file=subset.ttf

页面用几个字重，就只引入几个子集文件，再给静态资源配一个合理的长缓存时间，二次访问基本秒开。

玩法二：做一张"字重对比卡"，一分钟看清差异。7 个字重光看名字想象不出效果，不如写一个最简单的 HTML 页面，把 7 个文件依次声明出来，同一句话分别用 7 个字重展示并排对比。这样做的好处是：选字重不再是拍脑袋，而是直接看视觉结果决策，尤其适合在团队里快速对齐审美。

新手翻车实录：五个常见坑，绕开就走

以下五个坑，几乎每个新手都踩过，提前知道就能省下半天排查时间。

坑一：一页堆了四五个字重，视觉乱成一锅粥。⚠️ 铁律：一页最多用三个字重，层次靠字号和字重两个维度共同拉开，而不是靠字重数量堆。

坑二：字体栈末尾忘了写兜底字体。⚠️ 同一段文字在不同设备显示不一样，多半是回退链没写全。末尾务必加上serif之类的通用字体。

坑三：Linux 装完字体重启软件还是找不到。✅ 别忘了先跑fc-cache -fv刷新字体缓存，再用fc-list | grep验证。

坑四：打印出来发虚看不清。⚠️ 优先在打印媒体样式（@media print）里给文字指定粗一级的字重，同时检查打印机是否开了"草稿/灰度"模式。

坑五：设计软件里搜不到已安装的字体。⚠️ 常见原因是安装时选了"仅当前用户"，而软件是以管理员身份运行的。重新以管理员身份安装一遍，或在软件设置里手动刷新字体列表即可。

商用红线画清楚：这些能做，这些别碰

思源宋体CN采用SIL 开源字体许可（OFL 1.1），对商用非常友好，但仍有几条红线需要记住。

✅放心做的事：

• 用于商业项目、企业官网、印刷品，无需付费
• 把字体嵌入网站、App、电子书等产品中
• 修改字体生成衍生版本，并在相同许可下分发
• 随软件一起打包、再分发

❌不能碰的事：

• 把字体文件本身单独拿出来售卖
• 修改后改用其他许可闭源发布
• 未经授权，在衍生字体上继续使用"Source Han Serif CN"作为保留名称
• 借 Adobe 或 Google 的名义为衍生品做背书推广

📝 在项目里附带版权声明是好习惯，参考写法如下：

本产品使用思源宋体CN字体 Copyright © 2014-2021 Adobe Systems Incorporated, with Reserved Font Name 'Source Han Serif CN'. This Font Software is licensed under the SIL Open Font License, Version 1.1.

照着勾就行：一份可直接照做的行动清单

理论再多，不如上手点几下。这份清单按顺序做完，你的项目里就能正式用上思源宋体CN：

1. ☐ 克隆仓库：git clone https://gitcode.com/gh_mirrors/so/source-han-serif-ttf
2. ☐ 打开SubsetTTF/CN/，确认 7 个字重文件齐全
3. ☐ 按系统安装字体（Linux 记得跑fc-cache -fv）
4. ☐ 正文用 Regular、标题用 SemiBold 或 Bold，搭出第一版排版
5. ☐ 网页项目按上文 CSS 片段接入，做子集化并配置缓存
6. ☐ 项目附上LICENSE.txt或版权声明，安心上线

思源宋体CN最可贵的地方，是把"专业印刷品质"和"零成本商用"两件事同时做到了。你不需要为授权纠结，也不需要为字体格式折腾——下载、安装、应用，三步走完，中文排版立刻上一个台阶。现在就去试试吧。

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