企业官网建设流程全解析

思源宋体CN七字重免费商用实战：从TTF下载到网页上线一次走通

【免费下载链接】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子集，拿来就能用。

老周是个做独立开发的前端，上个月给一位读书博主做阅读小程序。代码逻辑、交互、配色都改过三轮，评论区还是有人留言："界面总有种廉价感，说不清哪里不对劲。"他连夜把字号、行距、间距逐个排查，最后才找到元凶是字体——系统默认字体在中文正文里笔画发虚，一放大就露怯。换上思源宋体CN之后，同一套排版，观感立刻不一样了。

如果你的项目里正好缺一套拿得出手的中文正文与标题字体，这篇就沿着"该不该用→怎么用对→用多深算熟"这条线走，跟着操作，半小时内你的项目也能用上它。

先别急着装：三个问题判断你的项目该不该用它

市面上的中文宋体不少，但先别急着下载，用三个问题自测一下，答案自然就出来了。

问题一：你的项目里，中文是主角还是配角？

如果以英文为主、偶尔几个汉字，用系统字体就够了，没必要为字体折腾。但中文是内容主体时——文章、界面、海报、课件——字体直接决定"读起来舒不舒服"，这时才值得认真选。

问题二：预算里有没有"字体授权"这一项？

商业字体质量确实高，但授权费对个人和中小团队不友好，一年几千块，改个使用场景可能还要加钱。如果预算表里根本没有这一栏，免费可商用的字体就是唯一现实选项。

问题三：你要的是一套能搭层次的完整字重，还是单个文件？

很多免费字体只给1-2个字重：正文用Regular排好了，想找同风格的重字重做标题，发现没有，只能硬搭别的字体，视觉上总差一口气。

思源宋体CN恰好把这三个问题一次性答完：Adobe与Google联合打造，简体中文专门优化；SIL开源许可证允许免费商用；七种字重成套出现，从ExtraLight到Heavy一应俱全。这个仓库还替你想好了最后一公里——TTF是Web和设计工具最通用的格式，简体中文子集也按地区拆好了，进入SubsetTTF/CN/就能直接拿到7个文件。

判断完"该不该用"，下一节说说"怎么用对"——因为多数人第一步就下载错了。

从下载到安装：三个最常见的错误示范和正确做法

错误一：去下全字符集的大文件，回来再折腾格式

思源宋体官方原版动辄几十MB一个文件，而且是OTF格式，很多人下载完还要找工具转格式，白白浪费时间。这个仓库存在的意义就是省掉这一步。

正确做法：直接在终端克隆仓库：

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

完成之后进入SubsetTTF/CN/目录，你会看到7个.ttf文件，文件名直接标注字重：SourceHanSerifCN-ExtraLight.ttf、SourceHanSerifCN-Light.ttf、SourceHanSerifCN-Regular.ttf、SourceHanSerifCN-Medium.ttf、SourceHanSerifCN-SemiBold.ttf、SourceHanSerifCN-Bold.ttf、SourceHanSerifCN-Heavy.ttf。按文件名挑需要的复制即可，每个文件独立可用。

错误二：把7个文件一股脑全装进系统

全装不会出错，但没必要——多数项目真正高频使用的就两三个字重。按系统装，一分钟内完成：

• Windows：双击任意.ttf文件，点"安装"，稍等几秒即可。
• macOS：打开"字体册"App，把.ttf文件拖进去，系统自动完成安装。
• Linux：执行三条命令，创建个人字体目录、复制文件、刷新缓存：

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

错误三：装完在软件里搜不到名字，以为没装上

思源宋体CN的字体全名是英文"Source Han Serif CN"，多数软件的字体列表按字母顺序排列，你搜"思源"两个字大概率搜不到。记住这个名字，在Word、Photoshop、Figma里直接输入"Source Han"，就能看到它了。

装进系统只是准备工作，网页项目才是重头戏。下一节，我们完整回放一遍从clone到字体上线的全过程。

网页实战回放：从clone仓库到字体上线

以最常见的场景为例：一个中文内容站点，正文用Regular，标题用Bold。我们一步步来。

第一步：拿到字体文件

按上一节的方式克隆仓库，在项目里建一个fonts/目录，把SourceHanSerifCN-Regular.ttf和SourceHanSerifCN-Bold.ttf复制进去。

第二步：声明字体

在CSS里用@font-face告诉浏览器字体文件在哪、对应什么字重：

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

font-display: swap这句很关键：它让页面先用备用字体把文字画出来，等思源宋体加载完再无缝替换，避免用户对着白屏干等。

第三步：应用到元素上

在样式里加一句：

body { font-family: 'Source Han Serif CN', serif; }

刷新页面，正文和标题的观感会立刻不同——中文字形更饱满、笔画更干净，放大后不再发虚。

第四步：检查加载情况

打开浏览器的开发者工具，切到Network面板，确认两个.ttf文件确实被加载、且是在页面文字显示之后才到达——这正是font-display: swap的功劳。

到这里，基础的网页集成就算完成。如果想让页面更快，记住一个原则：用哪个字重就引哪个，千万别把7个文件一次性全部引入——单个.ttf通常在2MB左右，7个就是10多MB，首屏会明显变慢。进阶做法是子集化：只保留页面实际用到的字符，文件体积还能再缩一个量级。

基础跑通了，怎么把七种字重真正"用出层次"，看下一节的三个场景。

三个真实场景：把七种字重用出层次感

场景一：公众号或内容平台的长文排版

长文阅读最怕花哨。正文用Regular、15-16px、行高1.6倍左右，读起来像纸书；小标题用SemiBold，和大段正文拉开层次；文末的"往期推荐"这类辅助信息降到Light。一个界面三种字重，清爽又有秩序。

场景二：产品官网的中文站

官网首屏需要冲击力，主标语直接上Heavy，字号拉到最大，笔画粗、识别度高；导航和按钮用SemiBold，保证可点感；正文回落到Regular；页脚注释这类存在感越低越好的文字用Light。视觉重心自然落在主标语上。

场景三：课程课件或演示文稿

课件最怕"一马平川"。正文用Regular，需要强调的关键词切成Medium，页码和备注用Light，章节页标题用Bold。观众一眼就能分清"哪些是内容、哪些是重点、哪些是边角料"。

三个场景通用的心法只有一句：正文字重打底，标题往上加重两档，辅助信息往下减轻一档，层次感自然就出来了。字重不是越多越好，而是每一档都有它该出现的位置。搞清楚了怎么用，接下来把新手最常问的几个问题一并答掉。

新手常问的五个问题，一次答清楚

思源宋体CN真的可以免费商用吗？

可以。它采用SIL开源字体许可证1.1版，商业项目免费使用，只要不把修改后的字体单独拿来卖、不违反保留名称等条款即可。

这个仓库为什么专门做TTF版本？

因为TTF格式在Web字体构建和多数软件里的兼容性最好。仓库把官方字体转成TTF，并按地区拆好子集，省去了开发者自己转换格式的步骤。

TTF和OTF，用起来差别大吗？

对绝大多数场景没有差别。如果主要是做网页、跨平台设计工具，选TTF更省心；日常使用，本仓库的TTF完全够用。

只做简体中文内容，CN子集够用吗？

够。SubsetTTF/CN/就是专门为简体中文用户拆出来的子集，文件体积比全字符集小得多，日常中文内容所需的汉字都在里面。

七种字重都装进系统，会打架吗？

不会。它们共享同一个字体家族名"Source Han Serif CN"，系统会按字重自动匹配。你只要在软件里选择"Regular"或"Bold"，对应的文件就会被调用，互不干扰。

最后一张检查清单：照着勾完就能放心商用

仓库里值得深挖的就三处：项目说明看README.md，商用条款读LICENSE.txt，字体文件在SubsetTTF/CN/。动手前花两分钟把许可证过一遍，比事后担心强得多。

给你的行动清单：

• 克隆仓库，确认SubsetTTF/CN/下7个.ttf文件齐全
• 按你的系统完成安装，记住字体全名"Source Han Serif CN"
• 网页项目按需引入字重，记得加 font-display: swap
• 定下正文字重，向上两档做标题、向下一档做辅助
• 通读LICENSE.txt，确认商用条款

下一次打开编辑器时，把 font-family 里的默认字体换成 Source Han Serif CN，你会发现：中文第一次有了"被认真排过"的样子，而这一切的成本，只是几分钟和一次clone。

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