思源宋体CN字体包零基础实操7个字重从安装到网页部署全走一遍【免费下载链接】source-han-serif-ttfSource Han Serif TTF项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf上周帮一位做公众号的朋友救急她的文章排版总被吐槽像用Word随便排的。我远程看了一眼就发现了问题全文用的系统默认字体标题和正文毫无层次。换用思源宋体CNSource Han Serif CN之后气质立刻不一样了。这套由 Adobe 与 Google 联合开源的中文字体免费可商用而且在这个仓库里它还专门被整理成了对网页更友好的 TTF 子集版本7 个字重一次拿全。接下来的内容没有术语轰炸你只需要跟着走就能完成拿文件 → 装进系统 → 挑字重 → 接进网页的全流程。 图片占位说明本仓库目前没有附带截图素材。建议你在完成安装后用系统自带的字体预览工具打开SubsetTTF/CN/下的任意 .ttf 文件亲眼看看思源宋体CN的字形效果把 7 个字重排成一排截图对比就是很好的配图素材。先用一句话搞懂这个仓库存在的理由是什么很多人的第一反应是思源宋体不是早就发布了吗为什么还要专门搞一个仓库一句话回答官方发布的版本以 OTFOpenType格式为主而 OTF 在网页字体构建和部分设计软件的兼容性上不如 TTF 顺畅。这个仓库做的事情就是把思源宋体整理成TTF 子集并单独提供简体中文CN版本让你拿到手就能直接用省掉自己转换格式的功夫。打个比方OTF 像精装大部头资料全但携带不便TTF 像便携口袋本轻装上场网页场景更顺手。整个仓库的核心内容就两样SubsetTTF/CN/目录下的 7 个 .ttf 字体文件以及根目录的LICENSE.txt许可证文本。弄懂这两样后面的路就顺了。动手前先认识这7个文件每个字重该在什么场合出场文件命名很规整全是「SourceHanSerifCN-字重名.ttf」的格式看一眼就能对上号。为了方便记忆我把它们按用途分成三档正文档日常阅读的主力SourceHanSerifCN-Regular.ttf常规体对应 font-weight 400长篇正文最百搭SourceHanSerifCN-Light.ttf细体对应 300小字号辅助说明、移动端阅读标题档撑起页面骨架SourceHanSerifCN-Medium.ttf中等体对应 500次级标题、导航菜单SourceHanSerifCN-SemiBold.ttf半粗体对应 600二级标题、按钮文字SourceHanSerifCN-Bold.ttf粗体对应 700主标题、海报视觉焦点视觉档专门负责存在感SourceHanSerifCN-Heavy.ttf特粗体对应 900Logo、封面大字SourceHanSerifCN-ExtraLight.ttf超细体对应 200高端画册、大字号艺术展示为什么要先认文件因为后面无论是系统安装还是网页声明都要按字重一一对应——认错文件效果就会跑偏。三步拿到全套字体文件克隆、进目录、核对第一步克隆整个仓库只需一条命令git clone https://gitcode.com/gh_mirrors/so/source-han-serif-ttf白话解释这句话的意思是把仓库里所有文件完整拷贝到你电脑上跑完本地就会多出一个source-han-serif-ttf文件夹。第二步进入字体目录cd source-han-serif-ttf/SubsetTTF/CN第三步核对文件用ls看一眼7 个 .ttf 文件都在就说明拿全了。如果项目只需要某一种字重也可以只拷贝对应的单个 .ttf 文件不必整包搬走——尤其后面做网页部署时少带几个文件能省下不少体积。装进电脑的三种姿势总有一款适合你Windows双击 .ttf 文件 → 点「安装」几秒钟完成。装完重启一下正在用的软件新字体就能出现在字体列表里。macOS打开「字体册」应用把 .ttf 文件直接拖进窗口即可想卸载时在字体册里右键删除。Linux把字体复制到用户字体目录然后刷新缓存mkdir -p ~/.local/share/fonts/ cp SubsetTTF/CN/*.ttf ~/.local/share/fonts/ fc-cache -fv最后一行fc-cache -fv的意思是让系统重新扫描字体目录Linux 用户装完必须跑这一步否则新字体不会生效。为什么三种姿势都讲因为很多教程只讲 WindowsmacOS 和 Linux 用户只能干瞪眼咱们一次说全。字重选择不靠猜先定场景再定粗细新手最容易犯的毛病是7 个全装上然后选择困难。其实选字重有一套非常朴素的判断顺序按这个思路来基本不会出错先看字号大小。字号越大字重越自由大字号下超细体和特粗体都能出彩字号越小越要克制优先用 Light 或 Regular 保证清晰度。正文和标题分开定。正文固定用 Regular或 Light标题按层级从 SemiBold 往 Bold、Heavy 递增页面层次自然就出来了不用每种都试一遍。品牌场景直接上重字。Logo、主视觉这类要存在感的地方直接上 Heavy字重不够会显得单薄。按设备微调。移动端建议从 Light 起步屏幕小、环境杂细一点更清爽桌面端展示则可以放心用更粗的字重。一句话总结字体选型不是审美玄学而是场景 → 字重的对应题。网页接入实操字体声明与回退配置一步到位TTF 格式对网页字体构建很友好这正是这个仓库存在的初衷。接入分两步先声明字体文件再应用到页面元素。第一步为每个用到的字重写一条font-face声明font-face { font-family: SourceHanSerifCN; src: url(fonts/SourceHanSerifCN-Regular.ttf) format(truetype); font-weight: 400; font-display: swap; }其中font-display: swap的意思是字体加载期间先用系统回退字体顶着避免页面白屏等字体就绪再替换。第二步把字体应用到全局并配上回退方案body { font-family: SourceHanSerifCN, Noto Serif SC, serif; line-height: 1.7; }这里Noto Serif SC和serif是回退万一思源宋体CN加载失败页面也不会裸奔会退到相近的衬线字体。需要用几种字重就写几条font-facefont-weight要和文件一一对应参见上文的用途分档浏览器才能正确匹配粗细。五个高频翻车现场附对症解法装完字体却发现没生效别慌九成是下面五个原因之一对号入座即可。翻车①系统缓存没刷新。Linux 用户安装后没执行fc-cache -fvWindows 和 macOS 用户装完没重启相关软件。解法补上缓存刷新或重启软件/系统再试。翻车②字重映射对不上。CSS 里写了font-weight: 300但只声明了 Regular400的字体文件浏览器找不到匹配项就会静默使用默认字重。解法确保声明和使用的字重一一对应。翻车③和已有字体重名冲突。系统里可能已存在同名或相似名称的字体浏览器优先加载的不一定是你装的版本。解法在font-face里换一个自定义 family 名称比如MySerifCN。翻车④字体文件路径写错。src里的url指向了不存在的路径浏览器直接 404字体自然加载不出来。解法用浏览器开发者工具的网络面板确认 .ttf 请求是否成功返回。翻车⑤遇到生僻字显示为方块。本仓库提供的是简体中文子集个别繁体字或生僻字不在范围内属于子集范围限制。解法换用完整版字体或对该字单独处理。商用前看一眼边界哪些能做哪些别碰思源宋体CN 采用 SIL Open Font License 1.1完整文本就是仓库根目录的LICENSE.txt。这条许可证的规则并不复杂核心就几条✅ 商业项目免费使用不用付费也不用申请授权✅ 嵌入网站、App、软件随产品一起分发✅ 可以修改字体制作自己的衍生版本❌ 不能单独售卖字体文件本身❌ 修改后的衍生字体不能换用其他许可证发布一个实用提醒如果你要分发包含该字体的软件包记得把LICENSE.txt一起带上这是许可证的明确要求也最能体现专业度。给懒人的速查卡还有一份进阶路线图速查卡存下来用的时候翻你想干什么直接抄这个答案拿全 7 个字重克隆仓库进SubsetTTF/CN/目录装进电脑Windows 双击安装 / macOS 拖入字体册 / Linux 复制并刷新缓存正文排版Regular 或 Light标题排版SemiBold → Bold → Heavy 按层级递增网页接入每个字重写一条font-face配好回退字体进阶路线图入门装好字体用 Regular 排一篇正文、用 Bold 排一个标题亲手感受字重差异。熟练在网页项目里接入两到三个字重做一次加载测试观察字体从回退到就绪的切换过程。进阶尝试修改字体制作衍生版本但记得遵守许可证规则衍生字体继续沿用 OFL 发布。字体是排版的第一张脸。选对一套字体作品的气质会提升一大截现在就把思源宋体CN 装上下一份文档、下一个页面从文字开始就专业起来。【免费下载链接】source-han-serif-ttfSource Han Serif TTF项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考