企业官网建设流程全解析

思源宋体CN字体怎么选怎么装？7种字重免费商用，这份实战记录让你少走弯路

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

客户丢来一句："要宋体，有书卷气，还得免费商用。"你盯着设计稿里的占位字直发愁——中文宋体要么授权费不便宜，要么条款绕得人头晕。直到你遇到思源宋体CN字体，这个结才算解开：Adobe与Google联合出品的开源字体，免费商用，还一口气给了7种字重。这篇文章就按你从"拿到字体"到"网页上线"的真实流程走一遍，哪些地方容易翻车，我提前替你踩过。

先看家底：思源宋体CN字体到底给了你什么

这款字体是Adobe和Google联合打造的开源泛中日韩字体，你可能更熟悉它的另一个名字：思源宋体。这个仓库做的事很纯粹——官方版本对网页字体不够友好，而这里整理出的TTF格式更容易用来构建Web字体。打开仓库，你会发现核心资产都在SubsetTTF/CN/目录下，7个TTF文件一字排开。

授权方面，它采用SIL开源字体许可证1.1版，条款对设计师相当友好：

你可以免费商用、自由嵌入文档和软件、基于它修改和再分发；唯一要记住的是：不能单独出售字体文件本身，衍生产品也不能沿用原字体名。

这意味着你做的海报、网站、书籍、App界面，都可以放心用它，不需要给Adobe或Google交一分钱。下面这张表，就是你这套"家底"的全貌：

从100到900：思源宋体CN字重选择，别只盯着Regular

拿到7个文件后，最常见的误区是：正文用Regular，标题用Bold，其他5个字重从此吃灰。这太浪费了。你可以把字重想象成音量旋钮——从ExtraLight的低语到Heavy的呐喊，中间每一档都有它的位置。

以你手头这个品牌项目为例，给客户定一套"字重体系"，对方立刻会觉得你很专业：

• 主视觉标题：Heavy，900，气势直接拉满
• 栏目大标题：Bold，700，醒目但不喧宾夺主
• 强调句与卡片标题：SemiBold，600，比正文重半档即可
• 正文：Regular或Medium，400~500，长文建议Medium，更耐读
• 图注、辅助信息：Light，300，层次感一下就出来了
• 特殊氛围：ExtraLight，100，留白区域或高端活动的装饰性大字

你会发现，字重选对了，版式不用大改，层次感自动就来了。

一条命令拿到全套思源宋体CN字体，三种系统安装方法一次说清

打开终端，输入下面这条命令，把仓库克隆到本地：

# 克隆思源宋体CN字体的TTF子集仓库 git clone https://gitcode.com/gh_mirrors/so/source-han-serif-ttf # 进入字体目录，确认7个字重文件都在 ls source-han-serif-ttf/SubsetTTF/CN/

看到7个.ttf文件后，按你的系统安装：

Windows用户：进入SubsetTTF/CN/目录，全选7个文件，右键选择"为所有用户安装"，重启设计软件即可。

macOS用户：打开"字体册"，把CN/文件夹直接拖进窗口，系统会自动验证并安装，所有应用立即可用。

Linux用户：字体装到用户目录，不需要root权限：

# 创建用户级字体目录 mkdir -p ~/.local/share/fonts/SourceHanSerifCN # 把7个TTF文件全部复制进去 cp source-han-serif-ttf/SubsetTTF/CN/*.ttf ~/.local/share/fonts/SourceHanSerifCN/ # 重建字体缓存，让系统立即识别新字体 fc-cache -fv

装完后验证一下：在Photoshop、Figma或任意文档编辑器里搜索"Source Han Serif CN"，如果出现7个不同字重的选项，就说明安装成功了。

思源宋体CN网页字体配置：从@font-face到响应式排版

如果你要把这款字体用进网页，光装在本机可不够，还得在CSS里声明。先用最快的方式跑通：直接把仓库里的TTF文件复制到你的fonts/目录，然后写一条@font-face：

/* 声明字体家族，url路径换成你自己的字体文件位置 */ @font-face { font-family: 'Source Han Serif CN'; src: url('fonts/SourceHanSerifCN-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; /* 先显示备用字体，加载完再替换，避免白屏 */ }

再把字体应用到正文和标题上：

/* 正文默认用Regular，行距放宽一点更耐读 */ body { font-family: 'Source Han Serif CN', 'Noto Serif SC', serif; font-weight: 400; line-height: 1.6; color: #333; } /* 标题用Bold，颜色更深形成视觉层级 */ h1, h2, h3 { font-family: 'Source Han Serif CN', serif; font-weight: 700; color: #222; }

接着是响应式。移动端屏幕小，正文建议升到Medium提升可读性，行距再放宽：

/* 桌面端：18px正文，清爽 */ @media (min-width: 1024px) { body { font-size: 18px; font-weight: 400; } h1 { font-size: 2.5rem; font-weight: 700; } } /* 移动端：15px正文，用Medium字重提升阅读舒适度 */ @media (max-width: 767px) { body { font-size: 15px; font-weight: 500; line-height: 1.7; } h1 { font-size: 1.75rem; font-weight: 700; } }

到这里，你的网页已经能稳定显示思源宋体了。但别急着上线，下面两个坑我替你踩过了。

两个新手最容易踩的坑：伪粗体与加载缓慢

坑一：CSS写了700，浏览器却给你"伪造"粗体。很多人只引入了Regular一个字重，然后在样式里写font-weight: 700。浏览器找不到对应字重的文件，就会用算法把Regular强行拉伸加粗——笔画发虚、边缘带毛刺，宋体的笔画粗细对比全被毁了。这也是为什么前面强调，7个文件一个都别删，需要哪个字重就引哪个字重。

坑二：直接上线TTF，首屏白屏半天。TTF体积不小，全量加载会很拖累页面。上线前做三件事：把TTF转成WOFF2格式（体积能小30%~50%）；用font-display: swap避免文字不可见；再用unicode-range只让浏览器加载常用汉字区段：

/* 优化版：WOFF2 + 只加载常用汉字区段 */ @font-face { font-family: 'Source Han Serif CN'; src: url('fonts/SourceHanSerifCN-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+4E00-9FFF; /* 常用汉字范围，其余字符走系统字体 */ }

如果项目再大一点，还可以做按需加载：移动端只引入Regular和Bold，桌面端再补Medium，配合JavaScript的FontFaceAPI动态加载，首屏能再快一截。

落地之后，下一步做什么

现在你可以打开任意设计软件，搜一下"Source Han Serif CN"确认字体在；然后挑一个正在做的项目，试着建立自己的"字重对照表"——哪个场景用哪个字重，写下来贴在手边。等你熟悉了这套体系，再去研究子集化、动态加载这些进阶玩法，会顺手得多。

最后留个问题给你：很多人一提到宋体就想到书和报纸，但它在电商、品牌、甚至App界面里的潜力，其实远被低估了。你的下一个项目，准备让思源宋体CN字体当主角，还是当那个不动声色提升质感的配角？

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