为什么我在每个前端项目里都备着一套 PingFangSC 字体包？苹果平方字体 6 字重 + ttf/woff2 双格式的一次说清

为什么我在每个前端项目里都备着一套 PingFangSC 字体包？苹果平方字体 6 字重 + ttf/woff2 双格式的一次说清

【免费下载链接】PingFangSCPingFangSC字体包文件、苹果平方字体文件，包含ttf和woff2格式项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC

跟同事远程对稿，我最怕听到一句话：“你 Mac 上看着挺好，我这边一打开怎么就不对味了？”其实多半不是设计出了问题，而是苹方字体在对方的系统里根本不存在。PingFangSC 这个开源字体包，做的就是这件事：把苹果的“苹方-简”中文字体整理成 6 个字重，同时提供 ttf 和 woff2 两种格式，让你在 Windows、Linux、各种浏览器里都能还原出那套熟悉的笔画。

一场发生在 Mac 和 Windows 之间的中文字体“搬运”

先说个我自己的经历。有次做一个落地页，主标题用的是苹方中粗体，Mac 上看着笔锋干净、重心舒服。结果发给用 Windows 的运营同事预览，标题直接落回系统默认字体，字重忽粗忽细，整体气质掉了两档。原因特别朴素：苹方是苹果系统自带的字体，Windows 上默认没有它，浏览器只能往“微软雅黑、宋体”这条回退链上走。

这就是“字体不一致”的真实来源，跟显示器色差一样，属于跨平台协作里的经典尴尬。而把字体文件直接放进项目里、随网页一起分发，就能绕开“对方系统里有没有这个字体”的问题——这套玩法叫自托管网页字体（self-hosted webfont），PingFangSC 就是为这种用法打包好的“现成包裹”🎁。

把原理说人话：ttf 和 woff2 到底差在哪

你可能已经注意到，这个仓库里每个字重都有两个版本，ttf/ 和 woff2/ 各一份。它们装的是同一套字形，区别只在于“打包方式”。

我习惯这么理解：ttf 像一口没压缩的行李箱 🧳，所有笔画数据都摊开摆好，任何系统、任何软件都能直接拎起来用，代价是又大又沉——实测仓库里每个 ttf 文件约 11MB。woff2 则像一台真空压缩袋，把同样的内容狠狠压了一遍，体积能砍掉一半左右（单文件约 5MB），浏览器拿到手再现场“解压”。对网页来说，这 5MB 的差距会直接体现在首屏加载体感上。

所以仓库 README 里的建议很直白：做 Web 应用优先用 woff2。而如果你要把字体装进桌面软件、放进设计工具或者拿去做打印，ttf 那版兼容性更好、更稳。

还有个容易被忽略的细节：仓库里的 CSS 用的是“一字重一家族”的写法。也就是说 woff2/index.css 把 6 个字重分别注册成了PingFangSC-Ultralight-woff2、PingFangSC-Regular-woff2这样独立的 font-family，而不是靠font-weight在同一个家族里切换。想用哪个字重，直接指定对应家族名即可。

我实际把字体接进项目的 10 分钟

空讲不如上手，我把自己的完整流程走一遍给你看。假设我要给一个前端项目补上苹方字体。

第一步，把仓库拉到本地：

git clone https://gitcode.com/gh_mirrors/pi/PingFangSC

第二步，只拿我需要的部分。网页端我会把整个woff2/目录拷到项目的src/assets/fonts/下，注意 index.css 里写的是相对路径url('./PingFangSC-Regular.woff2')，所以 CSS 和字体文件必须待在同一个目录里，别拆散。

第三步，在全局样式里引入：

@import url('./assets/fonts/woff2/index.css');

第四步，用起来。正文用常规体、标题用中粗体：

body { font-family: 'PingFangSC-Regular-woff2', 'PingFangSC-Regular', -apple-system, 'Microsoft YaHei', sans-serif; } h1 { font-family: 'PingFangSC-Semibold-woff2', 'PingFangSC-Semibold', sans-serif; }

这段回退链是故意留着的：Mac 用户其实自带苹方，能直接命中系统字体，连文件都不用下载；Windows、Linux 用户才真正吃到自托管的那一份。两边看到的字形就基本一致了。

想让老浏览器也有兜底的话，可以把同一字重的两种格式写进同一条 @font-face 里，woff2 在前、ttf 在后，再补一句font-display: swap避免加载期间白屏——这也是我给自己项目做的小升级。

一些只有“用过的人”才会提醒你的实话

聊点踩坑经验，帮你省几趟弯路。

第一，别被“6 个字重全装上”诱惑。这不是单字体几百 KB 的西文字体包，一个中文字体文件里装着上万个汉字，体积摆在那。我见过有人把 6 个 woff2 全部预加载进页面，首屏直接多出 30MB 流量。正确姿势是：页面实际用到几个字重就引几个，比如大多数内容站其实 Regular 加 Semibold 两个就足够撑起层级。

第二，字重和家族名要对得上。因为 CSS 是“一字重一家族”的写法，font-weight: 700在这种体系下并不会帮你在 Semibold 之外再粗一档。想要更粗的标题感，直接换PingFangSC-Semibold-woff2这个家族名，比调数字靠谱。

第三，别在授权上自我怀疑。仓库自带的 LICENSE 是 MIT，个人和商用都行，这点可以放心用，省得用个字体还要翻半天授权条款。

第四，想核对 6 个字重的实际观感，用仓库里现成的 font-preview.html 最方便，它把每个字重和两种格式并排摆在一页里，比你在代码里逐个改 class 直观得多。

把它搬进你的场景：两个我亲测顺手的用法

如果看完还是不知道从哪用起，我提供两个已经验证过的具体场景。

电商商品页：价格数字和商品标题用 Semibold，按钮文字用 Medium，描述正文用 Regular。这套组合的层次感很强，价格该突出时一眼就能抓到；而且因为字重出自同一套苹方，整页气质是统一的，不会出现“标题一个字体、正文另一个字体”的割裂感。

长文阅读站：正文用 Light 细体，字号放到 17–18px、行高拉到 1.8 左右，长时间读下来确实比默认黑体舒服不少；文章标题用 Medium 撑住节奏。顺带提醒，Thin 和 Ultralight 这两个更细的字重更适合做装饰性元素，比如页脚版权行、引导语，别用在大段正文上，细过头了反而伤眼睛。

一点真心话

字体这个东西，用户很少会特意夸你，但一旦用错了，谁都感觉得到。PingFangSC 的价值不在“炫”，而在于它把一个本该 5 分钟搞定、却经常被跨平台协作折腾掉一整天的细节，变成了一次 clone 就能解决的事。你上一次为了中文字体在别人机器上“翻车”，是在什么场景？评论区聊聊，说不定我能帮你把坑提前填上。

【免费下载链接】PingFangSCPingFangSC字体包文件、苹果平方字体文件，包含ttf和woff2格式项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC