思源宋体 TTF：7 种字重免费开源中文宋体，Web 字体部署完整指南

思源宋体 TTF7 种字重免费开源中文宋体Web 字体部署完整指南【免费下载链接】source-han-serif-ttfSource Han Serif TTF项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf还在为中文网页的衬线字体发愁——浏览器端总得找 TTF 格式的字体文件而思源宋体官方发布的多是 OTFSource Han Serif TTF思源宋体 TTF就是为这个场景准备的免费开源字体仓库它收录了 Google 与 Adobe 联合打造的思源宋体的简体中文子集全部以 TTFTrueType格式提供7 种字重齐全转 WOFF2、配font-face一条龙打通商业项目放心用。全文目录为什么 Web 端要专门用 TTF 版本字体文件怎么拿两种获取方式与 7 个字重速查本机安装Windows / macOS / Linux 各一分钟Web 部署从 TTF 到 WOFF2 的完整流程字重搭配与行距速查OFL 授权能做什么、不能做什么常见坑位速查表下一步行动清单为什么 Web 端要专门用 TTF 版本思源宋体Source Han Serif是 Google 和 Adobe 合作开发的一套开源泛中日韩字体以 OTF 格式发布。而仓库 README 里写得很直白TTF 格式做 Web 字体更方便所以有了这个项目。对前端来说这个差别是实打实的对比项OTF官方原版TTF本仓库轮廓格式CFF三次贝塞尔TrueType二次贝塞尔浏览器原生支持部分环境有兼容问题各大浏览器普遍支持转 WOFF2需要先转 TTF 再压缩多一步ttf2woff2直接可用CSS 字重映射偶尔不稳定更稳简单说设计印刷可以留 OTF 原样网页端直接用这个仓库的 TTF。仓库目前的结构非常克制字体文件就放在 SubsetTTF/CN/ 目录下共 7 个文件、每个约 13MB另外附带 LICENSE.txt 授权文件。字体文件怎么拿两种获取方式与 7 个字重速查方式一克隆整个仓库一条命令拉下全部内容git clone https://gitcode.com/gh_mirrors/so/source-han-serif-ttf方式二直接下载压缩包在项目的代码下载入口获取 zip 包解压即可省去本地装 Git 的麻烦。拿到后确认SubsetTTF/CN/下 7 个.ttf文件齐全就没问题了。7 个字重速查表文件名都以SourceHanSerifCN-开头对照下面的表就能快速定位要用的文件文件字重font-weight 值典型用途SourceHanSerifCN-ExtraLight.ttf特细200大字号装饰性标题SourceHanSerifCN-Light.ttf细体300辅助文字、移动端小字SourceHanSerifCN-Regular.ttf常规400正文、长文阅读SourceHanSerifCN-Medium.ttf中等500需要更有力度的正文SourceHanSerifCN-SemiBold.ttf半粗600小标题、强调段落SourceHanSerifCN-Bold.ttf粗体700主标题、重点内容SourceHanSerifCN-Heavy.ttf特粗900品牌感视觉中心、海报大字小贴士font-weight数值不是随便写的必须和你在font-face里声明的值一致浏览器才会切换到对应字重——这是后面部署环节最容易踩的坑。本机安装三个平台各一分钟如果你的设计软件、PPT 里也想用它装到系统里即可。Windows进入SubsetTTF/CN/全选 7 个.ttf文件右键选为所有用户安装完成后重启设计软件。macOS双击任意一个.ttf文件会打开字体册点安装字体或把整个SubsetTTF/CN/文件夹拖进字体册窗口7 种字重一次装齐。Linux三条命令搞定最后一条用来验证sudo mkdir -p /usr/local/share/fonts/source-han-serif-cn sudo cp SubsetTTF/CN/*.ttf /usr/local/share/fonts/source-han-serif-cn/ sudo fc-cache -fv fc-list | grep -i Source Han Seriffc-cache -fv是 Linux 上最容易被漏掉的一步——不更新字体缓存系统就看不见新装的字体。Web 部署从 TTF 到 WOFF2 的完整流程这是这个仓库最核心的价值所在分四步走。第 1 步转成 WOFF2单个 TTF 就有 13MB直接上浏览器是不可接受的。WOFF2 内置 Brotli 压缩中文字体通常能压到原体积的一半左右。用ttf2woff2转换最省事npm install -g ttf2woff2 cd SubsetTTF/CN ttf2woff2 SourceHanSerifCN-Regular.ttf SourceHanSerifCN-Bold.ttf7 个全转的话一个循环搞定for f in *.ttf; do ttf2woff2 $f; done转换后同目录会生成对应的.woff2文件把这些文件连同 TTF 不必上传放到你的网站静态资源目录比如/fonts/。第 2 步写 font-face每个字重对应一条font-face声明font-weight与文件字重严格对应font-face { font-family: Source Han Serif CN; src: url(/fonts/SourceHanSerifCN-Regular.woff2) format(woff2); font-weight: 400; font-style: normal; font-display: swap; } font-face { font-family: Source Han Serif CN; src: url(/fonts/SourceHanSerifCN-Bold.woff2) format(woff2); font-weight: 700; font-style: normal; font-display: swap; } body { font-family: Source Han Serif CN, Songti SC, SimSun, serif; font-size: 16px; line-height: 1.75; } h1, h2 { font-weight: 700; }两点解释font-display: swap让字体加载期间先用系统衬线字体显示文字避免页面白字等待font-family末尾的Songti SC、SimSun是兜底字体没加载完时体验也更接近。第 3 步只加载你真正用的字重算一笔账7 个 TTF 合计约 91MB即使全部转 WOFF2 仍是几十 MB 的量级。内容型站点博客、资讯、文档站通常Regular正文 Bold标题两个字重就能覆盖九成场景先只部署这两个其余字重等真有需要再加。第 4 步进阶子集化再压一轮如果站点文案范围有限比如只有几个栏目页可以用 fonttools 把用到的字切出来体积再降一个数量级pip install fonttools brotli pyftsubset SourceHanSerifCN-Regular.ttf \ --text-fileused-text.txt \ --flavorwoff2 \ --output-fileSourceHanSerifCN-Regular.subset.woff2把站点实际出现的文字存进used-text.txt--text-file只保留这些字。适合字库范围可控的小型站点通用性要求高的页面用前两步就够了。字重搭配与行距速查宋体的高级感很大程度来自字重对比和留白三套经过验证的组合可以直接抄1. 阅读型Regular 正文 Bold 标题 长文博客、产品文档。层级少、不费眼。2. 层次型Heavy 大标题 SemiBold 小标题 Regular 正文 报告、落地页、产品页。标题层级多时用这套视线引导最清晰。3. 品牌型Heavy 主视觉字 Light 辅助说明 海报、品牌页、封面。粗细反差拉满宋体的雅和重同时成立。行距与字距参考场景line-heightletter-spacing说明长文正文1.75 ~ 2.0默认中文行距明显要比西文大移动端1.8 ~ 2.0默认小屏留白多一点更舒服标题1.2 ~ 1.40.5px紧凑才有力量感OFL 授权能做什么、不能做什么思源宋体 TTF 采用 SIL Open Font License是目前对使用者最友好的开源字体授权之一完整条款见 LICENSE.txt。✅放心做商业网站、App、印刷品、广告中免费使用嵌入到软件、网页、应用里分发修改字体后再次发布保持 OFL 即可⚠️注意边界不能把字体文件本身当商品单独出售修改版必须继续以 OFL 授权修改版不能使用Source Han Serif原名称作为主名称工程上的合规习惯项目里保留一份LICENSE.txt文档里注明字体来源两条就够。常见坑位速查表现象原因解法页面写font-weight: 700没生效没声明 Bold 的font-face用到的每个字重都要单独声明一条首屏白字闪烁FOUT字体加载慢且未配置 display 策略font-display: swap先显示兜底字体转 WOFF2 报错把 OTF/CFF 文件喂给了只认 TTF 的工具直接用本仓库的 TTF 文件页面加载明显变慢7 个字重一起上单个文件仍数 MB只部署必要字重进阶做子集化Linux 装完字体却找不到字体缓存没更新执行fc-cache -fv后重启应用下载后只看到简体本仓库只含 CN 子集繁体/日文/韩文子集需另找对应资源下一步行动清单克隆仓库确认SubsetTTF/CN/下 7 个 TTF 文件齐全挑出 Regular Bold 两个文件转成 WOFF2 上传到/fonts/写两条font-face套到下一个页面上跑通第一个中文衬线页面需要本地设计软件使用时按平台方式装到系统流量大了再上子集化把单文件体积压到 MB 级宋体的笔画细节在网页上能不能立住一半看字体本身一半看字重、行距这些参数功。这个仓库把最难找的 TTF 版本和完整字重备齐了剩下的只是把参数调到舒服——然后你就会发现中文排版里最耐看的那一种气质一直可以免费拥有。【免费下载链接】source-han-serif-ttfSource Han Serif TTF项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考