当前位置：首页 > news >正文

PingFangSC 字体包：3 步把苹果苹方装进你的网页（6 种字重，2 种格式）

news 2026/8/26 20:04:17

PingFangSC 字体包：3 步把苹果苹方装进你的网页（6 种字重，2 种格式）

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

你肯定遇到过：页面中文在 Mac 上显示正常，到 Windows 和安卓上立刻回退成系统字体，笔画完全不同，设计感当场跑偏。这个仓库把 PingFangSC 按 6 种字重打包成 ttf 和 woff2 两种格式，@font-face 也替你写好了，复制即用。

跑起来：最小可运行路径

不用安装、不用构建，克隆下来双击就能预览。

克隆仓库（woff2 需要 Chrome 36+ / Firefox 39+ / Safari 10+，更老的浏览器用 ttf 目录）：

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

双击仓库根目录的 index.html，不用起本地服务。
在你的项目里，一行 HTML 引入字体声明（路径按你放置字体目录的位置改）：

<link rel="stylesheet" href="woff2/index.css">

下图是仓库里 TTF 与 WOFF2 两种格式的字体渲染对比：

到这里你应该能看到 6 种苹方字重在页面上正常渲染出来。没看到？直接跳模块 5。

它到底能干嘛：功能逐个拆

这个仓库没有代码逻辑，给的是成套字体文件加现成声明，能直接落地三种用法。

网页加载 woff2

解决网页中文字体加载慢、体积大的问题。woff2 压缩后体积约为 ttf 的一半，仓库里的 woff2/index.css 已把每种字重声明好：

/* 按需保留需要的字重，其余可删掉 */ @font-face { font-family: 'PingFangSC-Regular-woff2'; src: url('./PingFangSC-Regular.woff2') format('woff2'); }

前端做官网、H5、后台管理系统，引入这个 css 就能用。

6 种字重排层级

解决页面文字平、拉不出层次感的问题。6 种字重从装饰到强调全覆盖：

字重	字重值	适合用途
Ultralight / Thin	100 / 200	装饰性文字、大标题
Light / Regular	300 / 400	正文、界面常规文字
Medium / Semibold	500 / 600	强调、按钮、标题

设计师和搭设计系统的前端，直接拿这张表当排版规范。

桌面端 TTF 安装

解决设计软件、Windows 系统里找不到苹方的问题。Linux 一条命令装进系统级（Windows 右键 ttf 文件选"为所有用户安装"即可）：

# 复制到系统字体目录，然后重建缓存 sudo cp ttf/PingFangSC-*.ttf /usr/share/fonts/truetype/ sudo fc-cache -f

做桌面软件、用 Figma 和 Adobe 系列的设计师，装一次所有工具里都能选到。

选型决策：TTF vs WOFF2 选型一张表

本项目就是同一套字体的两种格式分支，真正的选型只有一件事：用哪个目录。先看表：

你的场景	推荐选择	原因
网页 / H5 / 小程序 WebView	woff2	压缩后体积小，加载快
桌面应用、设计软件	ttf	系统级安装，设计工具里表现稳定
只部署在 Mac / iOS	系统自带	Mac 和 iOS 自带苹方，不用发货体
跨平台（含 Windows）	woff2 + 本地安装 ttf	Windows 没有苹方，必须显式发货体文件

许可证是MIT，商用免费，没有版权顾虑。
替代方案：如果完全不想发货体，可以用系统字体栈（微软雅黑、Noto Sans SC），代价是跨设备视觉一致性。
本项目是纯静态字体包，零依赖，也没有版本升级要追。

如果你是做 Web 项目，用 woff2 目录；如果做桌面应用或设计工作，用 ttf；如果只部署 Mac 和 iOS，系统自带就够了，连字体都不用发。

踩坑速查

这几个坑我们都踩过，症状对上了就直接按解法改。

网页字体不生效

症状：我声明了 @font-face，页面还是显示系统默认字体。原因：font-family 名字和 CSS 里对不上，或者字体文件路径 404 了。解法：打开开发者工具 Network 面板，看字体文件是不是 200，再逐字核对名字拼写。

Windows 上效果不一样

症状：同一套 CSS，Mac 上是苹方，同事的 Windows 上是微软雅黑。原因：Windows 不自带苹方-简，浏览器回退到了系统字体。解法：在对应系统装一遍 ttf，Linux 直接跑：

sudo cp ttf/PingFangSC-*.ttf /usr/share/fonts/truetype/ && sudo fc-cache -f

首屏文字跳一下

症状：页面加载完，正文从细变粗"跳"了一下。原因：默认加载策略会等字体下载完才渲染，然后整屏切换。解法：加一条声明：

@font-face { font-family: 'PingFangSC'; src: url('PingFangSC-Regular.woff2') format('woff2'); font-display: swap; /* 先显示后备字体，加载完再替换 */ }

字体体积把流量吃爆

症状：6 个字重全声明了，首屏多了好几 MB。原因：声明了用不到的字重，浏览器按字重逐个下载。解法：只保留实际用到的 font-face 声明；单字重文件还是太大，就到模块 6 用子集化。

进阶玩法：技巧卡片

已经跑通字体的话，两个技巧能继续把流量压下来。

预加载 Regular 撑首屏 ⚡

原理：preload 提示让浏览器在解析 HTML 时就并行拉字体，不用等 CSS 解析完才发现要下载。

<!-- 放在 <head> 里，预加载最常用的字重 --> <link rel="preload" href="woff2/PingFangSC-Regular.woff2" as="font" type="font/woff2" crossorigin>

首屏字体等待时间能压到和 HTML 并行加载，长列表页体感差别明显。

子集化砍体积 ✂️

原理：中文字体全量文件动辄数 MB，只保留你实际用到的字符，体积可以砍掉大半。

# 按用到的字符集做子集，直接输出 woff2 pyftsubset ttf/PingFangSC-Regular.ttf \ --text-file=used-characters.txt \ --output-file=PingFangSC-subset.woff2 \ --flavor=woff2

常用 3500 字子集化后，体积只有全量字体的零头，弱网小屏页面受益最大。