企业官网建设流程全解析

3 分钟跑通 IBM Plex 字体：从系统安装到多语言网页实战

【免费下载链接】plexThe package of IBM’s typeface, IBM Plex.项目地址: https://gitcode.com/gh_mirrors/pl/plex

IBM Plex 字体是 IBM 开源的全球企业字体家族，覆盖 Sans、Serif、Mono、Math 等多个子家族，支持中、日、韩、阿拉伯语等十几种文字系统。这篇文章用一个完整流程带你把它用起来，从装包、写 CSS 到按需瘦身，全程给可运行的代码，照着抄就能出效果。

一、动手前先想清楚：你到底需要哪几个包

IBM Plex 按使用场景拆成了十多个独立 npm 包，装多了只会让项目变重。先对号入座：

一行命令装齐网页三件套：

npm install @ibm/plex-sans @ibm/plex-serif @ibm/plex-mono

这条命令把 Sans、Serif、Mono 三个包装进 node_modules，下一步就能在样式里直接引用它们了。

二、上手实操：三种姿势把字体请进项目

姿势一：网页项目走 NPM + CSS

在入口样式文件里写两行：

@import '@ibm/plex-sans/css/ibm-plex-sans-all.min.css'; body { font-family: 'IBM Plex Sans', sans-serif; }

第一行引入打包好的全量 CSS，第二行告诉浏览器正文统一用 Plex Sans。保存刷新，10 秒见效。

姿势二：桌面系统手动安装

git clone https://gitcode.com/gh_mirrors/pl/plex cd plex/packages/plex-sans/fonts/complete/ttf/

进入 ttf 目录后，双击 IBMPlexSans-Regular.ttf 按系统提示完成安装。otf 和 ttf 功能上没有差别，挑一个顺手的格式就行。

姿势三：SCSS 按需裁剪

只想引入 Light、Regular、SemiBold 三个默认字重，就这么写：

@use '@ibm/plex-sans/scss' as PlexSans; @include PlexSans.default();

default()是仓库预置的"默认三件套"mixin，背后只生成 300、400、600 三个字重的 @font-face 声明，比全量引入干净得多。

三、仓库里到底装了什么：一次看穿目录结构

clone 下来的仓库是一个 monorepo，packages 下每个子目录都是一个可独立发布的字体包，比如：

• packages/plex-sans/：Sans 全家族，含正体与斜体
• packages/plex-serif/：Serif 全家族
• packages/plex-math/：数学符号专用
• packages/plex-sans-sc/ 等：中、日、韩、泰、阿拉伯语扩展包

每个包内部又分 fonts/complete（完整字体）和 fonts/split（按 unicode-range 切好的子集），每种都提供 otf、ttf、woff、woff2 四种格式。woff2 压缩率最好，网页里优先用它。

四、进阶玩法：给中文字体做瘦身

中文字体一个文件动辄好几 MB，全量引进来直接拖垮首屏加载。仓库里的 split 目录就是为此准备的。

具体操作分三步：

1. 打开 packages/plex-sans-sc/fonts/split/woff2/，里面是按汉字区块切好的几十个小体积 woff2 文件；
2. 在 SCSS 里把字体前缀指到自己的静态资源目录：

@use '@ibm/plex-sans-sc/scss' as PlexSansSC with ( $font-prefix: '/assets/fonts/plex/' );

3. 调用 all() 生成带 unicode-range 的 @font-face 规则，浏览器只会下载当前页面真正用到的字符区块。

浏览器识别 unicode-range 后会按需拉取字体文件，首屏能省下大半字体体积，多语言站点尤其明显。

五、常见坑位速查

Q：装了 @ibm/plex-sans-sc 但中文还是回退到宋体？ A：中文字体包只负责汉字，拉丁字符要再引入 @ibm/plex-sans，两个包一起引用才能完整显示混合文案。

Q：@include PlexSans.all() 之后页面还是没生效？ A：多半是 $font-prefix 没指向字体文件的真实路径，路径不对会 404，浏览器会静默回退到系统字体。

Q：split 目录里为什么有一堆 css 文件？ A：每个字重一个入口，内部按 unicode-range 组织 @font-face，配合 all() mixin 使用即可，别手动去引单个文件。

Q：woff 和 woff2 要都加载吗？ A：浏览器只挑自己支持的那一种，两种都写进 src 是为了兼容老环境。

六、选型对照：什么时候用哪个子家族

七、完整示例与下一步

把前面内容串成一个最小可运行示例：npm 装好 @ibm/plex-sans 后，样式里 @import 全量 CSS，正文用 Sans、代码块用 Mono，页面立刻拥有统一的 IBM 风格排版，多语言文案也不会再出现字体跳变。

IBM Plex 字体家族采用 OFL 开源协议，个人和商业项目都能放心用。想进一步折腾，可以 clone 仓库跑 yarn build 自行重新生成子集，或者翻一翻 scripts/generate-scss.js 看看这些 SCSS 是怎么批量产出的。

快把项目拉下来试试吧。

【免费下载链接】plexThe package of IBM’s typeface, IBM Plex.项目地址: https://gitcode.com/gh_mirrors/pl/plex