PingFangSC 如何选对字重:3 步装好苹果方中文字体
PingFangSC 如何选对字重3 步装好苹果方中文字体【免费下载链接】PingFangSCPingFangSC字体包文件、苹果平方字体文件包含ttf和woff2格式项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSCPingFangSC 是一个苹果方字体中文字体开源资源包以 TTF 与 WOFF2 两种格式收录了 6 种标准字重覆盖网页、桌面与设计工具三类使用场景。仓库自带两种格式的 CSS 声明示例每种字重的 TTF 文件约 11 MBWOFF2 约 5.2 MB。这篇文章基于这些实测数据讲清格式怎么选、装到哪、怎么跑得动。项目里有什么6 种字重、2 种格式、现成的 CSS 文件这一节回答你拿到仓库后先确认哪些文件、每种字重干什么用。ttf/ 与 woff2/ 里的 6 种字重一一对应名称取自各目录 index.css 的注释字重数值按 CSS font-weight 惯例对应字重名CSS 字重数值注释中的称呼建议用途Ultralight100极细体展示型大字、装饰性标题Thin200纤细体二级标题、细线条说明Light300细体正文辅助信息Regular400常规体默认正文Medium500中黑体小标题、强调文本Semibold600中粗体重要标题、表头仓库顶层另有 index.html 预览页与 LICENSEMIT 许可允许商用。PingFangSC/ ├── ttf/ # 6 个 TTF 字体文件 index.css ├── woff2/ # 6 个 WOFF2 字体文件 index.css ├── index.html ├── font-comparison.png ├── LICENSE └── README.md克隆仓库3 步装好中文字体这一节解决把字体文件从仓库搬到你电脑并进入系统字体列表的问题。git clone https://gitcode.com/gh_mirrors/pi/PingFangSC克隆后按场景取文件网页取 woff2/桌面与设计工具取 ttf/。Windows右键 .ttf 文件选安装或为所有用户安装或把文件拷入 C:\Windows\Fonts。macOS双击 .ttf 在字体册中点安装字体或把文件拖进 ~/Library/Fonts。Linux把 .ttf 拷入 /usr/share/fonts/truetype/执行sudo fc-cache -f刷新字体缓存。装完后重启目标应用在字体列表里应能看到 PingFangSC 全系列字重。TTF 与 WOFF2 怎么挑3 组真实数据帮你定这一节回答你写 CSS 或挑文件时该用哪种格式直接看 Regular 字重的真实体积格式Regular 体积Semibold 体积适用环境TTF10.97 MB10.90 MB桌面系统、设计工具WOFF25.24 MB5.14 MB现代浏览器Chrome 36、Firefox 39、Safari 10WOFF2 约为 TTF 体积的一半README 也明确建议web 应用使用 woff2 格式。按场景对应如下场景用哪种格式建议字重原因网页WOFF2Regular 400 / Medium 500下载量减半首屏更快桌面软件TTFRegular 400 / Semibold 600系统字体目录直接识别无需转换设计工具PS、Figma 等TTF全部 6 种需要完整字重范围做标题层级与强调项目 woff2/index.css 把每种字重声明为独立字体名如果你想用统一字体名可以照它的结构改写/* 参照 woff2/index.css 的声明结构统一字体名 */ font-face { font-family: PingFangSC; src: url(./PingFangSC-Regular.woff2) format(woff2); font-weight: 400; font-display: swap; }WOFF2 网页加载的 3 个要点5 MB 级的字体文件处理不好会直接拖慢首屏这 3 点分别控制加载时机、文件体积与重复访问成本。加 font-display: swap别让用户等白块默认值 auto 下浏览器可能在字体到位前暂缓渲染文字改成 swap 后先用后备系统字体显示字体加载完再切换不会出现空白块。按实际用字做子集把 5 MB 压到 100 KB 级全字符集 WOFF2 Regular 有 5.24 MB。若页面只用到几百个汉字用 pyftsubset 按字符表抽取文件可降到 100 KB 量级。字体文件不可变就配长期缓存字体文件不随版本变化加上Cache-Control: max-age31536000, immutable后二次访问直接命中本地缓存。WOFF2 内部已是 Brotli 压缩不必再叠一层 gzip。4 个字体常见坑与自查方法遇到问题时按这 4 条自查方法逐一对照通常第 1、2 条就能定位。⚠️写了 font-weight: 500页面却按 400 渲染每种字重需要单独的 font-face 声明。项目 woff2/index.css 给全了 6 份你只复制 Regular 的话Medium 会回退到系统字体。⚠️浏览器里文字发虚或者还是后备字体先核对 CSS 里 src 路径是否指向真实文件再打开该文件确认体积在 5 MB 上下只有几 KB 说明文件损坏或下载到了错误页。⚠️桌面能用网页却不生效ttf/ 与 woff2/ 是两套独立目录网页必须引用 woff2/ 或 ttf/ 中对应目录的文件路径混错时浏览器会静默忽略声明。⚠️装完 Photoshop 或 Figma 里看不到设计软件会缓存字体列表安装后需重启应用Windows 若选了为当前用户安装其他账户下同样看不到。发布前自查清单✅ 发布前逐项核对任何一项没做都可能让 PingFangSC 中文字体回退成系统默认字体。确认使用场景网页取 woff2 目录桌面与设计取 ttf 目录按层级挑字重正文 400、标题 500 或 600、辅助文本 300网页 font-face 已加font-display: swap字体文件已配置长期 Cache-Control页面用字有限时已做字体子集化核对过 LICENSE 条款MIT允许商用【免费下载链接】PingFangSCPingFangSC字体包文件、苹果平方字体文件包含ttf和woff2格式项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考