3步接入PingFangSC字体：从克隆到网页生效，TTF和WOFF2怎么选

3步接入PingFangSC字体：从克隆到网页生效，TTF和WOFF2怎么选

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

PingFangSC是一个字体包项目，把苹果苹方（简体）的6个字重整理成TTF和WOFF2两种格式，附了可直接引用的CSS声明。适合两类人：网页开发需要在浏览器里稳定用到苹方字体的，和设计、桌面端需要完整苹方字体文件的。

上图是仓库自带的格式对比页，左右两列分别用TTF和WOFF2渲染同六个字重，底部列出Ultralight到Semibold的完整字重清单，接字体前可以先对一眼渲染效果。

怎么上手：一条命令克隆，两步生效

1. 克隆仓库到本地：

# 把PingFangSC字体仓库克隆到本地 git clone https://gitcode.com/gh_mirrors/pi/PingFangSC

2. 按用途选目录：网页项目用woff2/（文件更小），设计软件、桌面端用ttf/。
3. 在页面CSS里声明字重。仓库里ttf/index.css和woff2/index.css已写好六条@font-face，注意它给每个字重起了独立的 font-family（如PingFangSC-Regular-woff2），直接引用这套CSS时样式里要写对名字。

实际能看到什么效果

我把仓库里的文件逐个称了重，同一字重两种格式的实测体积如下（取自项目内文件）：

结论很直白：网页上WOFF2是TTF体积的一半左右，这也是README建议Web应用用WOFF2的原因。渲染效果上，六个字重覆盖从极细（Ultralight、Thin）到中粗（Medium、Semibold）的常规排版需求，正文配标题的层级关系是齐的。仓库根目录还有index.html和font-preview.html，浏览器打开就能逐字重预览，不需要自己搭环境。

我踩过的3个坑

坑1：引了仓库自带CSS，字体却出不来现象：页面里写了font-family: PingFangSC，文字还是系统默认字体。 原因：woff2/index.css里每个字重的font-family都带后缀（PingFangSC-Regular-woff2这种），PingFangSC这个名字根本不存在。 一句话解法：样式里照抄CSS里的完整family名，或者自己写一套统一的font-family，只复用字体文件。

坑2：老浏览器里字体整段回退现象：高版本浏览器正常，旧版浏览器里中文字全部落回默认字体。 原因：WOFF2需要较新的浏览器内核才解码，老版本直接忽略。 一句话解法：同一条@font-face里写两个src，WOFF2在前、TTF兜底，老浏览器自动走TTF。

坑3：六个字重全加载，首屏慢现象：页面字体全挂上后，首屏明显变慢。 原因：单个WOFF2约5MB，六个一起就是30MB以上，远超正文实际需要的量。 一句话解法：网页只声明Regular（400）和Medium（500）两个字重，其余字重在用到的页面按需加载。

/* 网页最小可用声明：只挂Regular和Medium两个字重 */ @font-face { font-family: 'PingFangSC'; src: url('woff2/PingFangSC-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'PingFangSC'; src: url('woff2/PingFangSC-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; }

收尾

一句话结论：这个仓库的价值就是"格式齐、字重全、即引即用"，网页用WOFF2、桌面用TTF，别全量加载。

可执行清单：

1. 网页项目：只拷woff2/目录到静态资源，先声明Regular和Medium两个字重。
2. 桌面/设计场景：把ttf/里需要的字重装进系统字体目录即可。
3. 统一团队里的font-family写法，避免有人写仓库family名、有人写自定义名。
4. 老浏览器有用户时，给@font-face加TTF兜底src。
5. 上线前用index.html预览页核对六个字重的渲染是否符合预期。

现在就打开你的项目，把woff2/PingFangSC-Regular.woff2拷进去，加上面的两条@font-face，刷新页面验证正文是否已换成苹方。

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