PingFangSC 字体包：把苹果苹方字体的 6 种字重，原样带到任意平台

PingFangSC 字体包：把苹果苹方字体的 6 种字重，原样带到任意平台

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

我帮朋友调试过一个活动页，他在 Mac 上反复确认的标题排版，同事在 Windows 上一打开就全乱了——浏览器找不到苹方字体，只能退回到系统默认黑体，字距、粗细、气质全都变了味。这个场景每个做过中文页面的开发者都遇到过，根子不在设计，而在字体没有跟着页面一起走。

PingFangSC 就是为这件事准备的：它把苹果系统的苹方字体（PingFang SC）完整打包成开源字体文件，整理出6 个字重、TTF 和 WOFF2 两种格式，随项目一起分发。页面里声明了这个字体，用户在 Windows、Linux、任何浏览器上看到的，就是你设计时的样子。

先看效果：同一套字，两种格式

上图把同款字体的 TTF 与 WOFF2 两种格式并排展示，左边走兼容路线，右边走性能路线。下面这张表是仓库里的真实文件大小，六个字重一列出来，差异就很直观：

看完这组数字，你大概能理解 WOFF2 为什么是网页首选：它比 TTF 小约一半。WOFF2 是一种专为网络传输优化的字体压缩格式，相当于给字体文件"打包发快递"，浏览器拿到后解压渲染，体感更轻。而 TTF 是传统字体格式，兼容性最好，设计软件、桌面应用都认它。这里的每个字重文件都很大，是因为中文全字库要覆盖数千常用汉字，属于天然的体积，选择加载哪几个字重，比纠结格式更重要。

3 分钟跑起来：最小上手示例

先拿到字体包：

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

网页项目直接用woff2/目录，把整个文件夹放进静态资源目录，然后在 CSS 里引入对应的index.css：

@import url('woff2/index.css'); body { font-family: 'PingFangSC-Regular-woff2', sans-serif; }

关键点在于：woff2/index.css已经替你写好了全部 6 条@font-face声明，每条声明把字重文件绑定到一个独立的字体族名（font-family），比如常规体对应'PingFangSC-Regular-woff2'。你只需要把font-family指向对应的名字，不需要手写任何字体注册代码。全程大约 3 分钟，从 0 到页面显示出苹方字体就是这么快。

不同身份，各取所需

前端开发者要记住的只有一件事：项目用woff2/目录，体积减半；页面实际用哪几个字重，就只部署哪几个文件，别一股脑全塞进去。

设计师更该关注ttf/目录。把 TTF 文件直接安装到系统后，Figma、Photoshop、Sketch 里就能像用系统字体一样选择苹方的六个字重，设计稿和最终网页效果能对得上号，再也不用靠截图沟通。

桌面端和移动应用开发者同样选 TTF：Native 应用打包字体时，TTF 的兼容性和渲染稳定性最好，打印场景也用它。网页上遇到 WOFF2 兼容问题，改成ttf/index.css对应的-ttf字体族名即可兜底。

新手最容易踩的 4 个坑

坑 1：只引 CSS，没传字体文件。本地调试正常，部署到服务器后字体全部失效，打开控制台能看到字体文件 404。原因通常是把index.css单独拷走，却没带上同目录的.woff2文件——CSS 里的url()是相对路径，必须保持index.css和字体文件同级。

坑 2：用 font-weight 找字重找不到。这个包采用"一字重一族名"的写法，常规体和粗体是各自独立的字体族名，而不是同一族名下的不同字重。写font-weight: 600并不会自动切到中粗体，你得直接写font-family: 'PingFangSC-Semibold-woff2'。

坑 3：6 个字重全部 preload。中文全字库本身就有 5MB 左右一个，全量预加载会把首屏拖垮。只preload最常用的常规体，其余按需加载。

坑 4：覆盖了系统原生苹方。在 Mac 上测试时，如果设备本来就装了苹方，系统字体会"抢先"渲染，让你误以为字体已生效。验证部署是否成功，最好在 Windows 或 Linux 上检查。

进阶玩法：让字体加载再快一点

给@font-face补上font-display: swap，字体加载期间先用回退字体占位，加载完成再切换，避免白屏：

@font-face { font-family: 'PingFangSC-Regular-woff2'; src: url('./PingFangSC-Regular.woff2') format('woff2'); font-display: swap; }

再配合一个讲究的回退栈，字体未就绪时视觉也不会崩：

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

针对落地页这类固定文案的场景，还可以做子集化：用字体工具只保留页面实际出现的几百个字符，生成一个几百 KB 的精简字体，加载速度会有质的提升。字重组合上，建议正文用常规体、强调用中黑体、标题用中粗体，六个字重足够撑起完整的信息层级。

下一步：把它放进你的项目

这篇短文想传达的核心其实很简单：字体本该是设计的一部分，不该因为平台差异而变形。PingFangSC 让你用一次git clone的成本，换来一套可以自由分发、免费商用、跨平台一致的苹方字体。

现在就试：克隆仓库后，把woff2/目录接进你的下一个页面，打开ttf/index.css和woff2/index.css对比两份字体注册的写法，README 里也写清了格式选用的建议。十分钟后你会发现，跨平台字体这回事，从此不用再纠结。

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