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

Plus Jakarta Sans 开源字体从入门到精通：8 个实战场景玩转这款免费字体

news 2026/8/13 17:39:27

Plus Jakarta Sans 开源字体从入门到精通：8 个实战场景玩转这款免费字体

【免费下载链接】PlusJakartaSans+Jakarta Sans is a open-source fonts. Designed for Jakarta "City of collaboration" program in 2020.项目地址: https://gitcode.com/gh_mirrors/pl/PlusJakartaSans

如果你正在为项目寻找一款免费、专业、格式齐全的开源字体，Plus Jakarta Sans 字体值得你花五分钟了解。它诞生于 2020 年雅加达"协作之城"城市计划，由 Tokotype 的设计师 Gumpita Rahayu 操刀，以几何无衬线风格融合了 Neuzeit Grotesk、Futura 与上世纪 30 年代怪诞风格的精髓。更难得的是，它遵循 SIL 开源协议，商业项目和个人项目都能免费使用，从网页到移动应用再到印刷物料，一套字体通吃。接下来，我会用 8 个实战场景，带你从认识它、安装它，一路走到用可变字体搭建完整品牌规范、甚至参与开源共建。

上图是 Plus Jakarta Sans 的品牌视觉展示。字体笔画简洁利落、近乎单一线宽对比，x 高度略高于常规设计，配合开放的字腔与均衡的字间距，让它在从小字号正文到大标题的各个尺寸下都保持出色的可读性——这正是它"城市协作"理念在字形上的体现。

一、先看懂这份"字体地图"：7 种字重、4 种格式、3 套风格

在动手安装之前，建议你先花两分钟了解这个字体家族的全貌。它不是一个孤立的字体文件，而是一套完整的家族，理解这张"地图"能帮你少走很多弯路。

7 种字重 × 常规/斜体 = 完整家族

Plus Jakarta Sans 提供从 ExtraLight 到 ExtraBold 共7 种字重，每种都包含常规与斜体两个版本，合计 14 个静态字体文件。各字重的定位如下：

字重	建议用途	对应字重数值
ExtraLight	小字号辅助信息、大号极细标题	200
Light	长文正文、强调场景的轻盈表达	300
Regular	标准正文，最常用的默认选择	400
Medium	标题、按钮、导航等强调内容	500
SemiBold	副标题、区块标题、重要信息	600
Bold	主标题、视觉焦点	700
ExtraBold	大标题、海报级的强视觉元素	800

上图从左到右展示了 ExtraLight、Regular、Bold 三种字重的视觉差异。可以看到，从"极细"到"常规"再到"粗体"，字重梯度拉开得非常明显，这让它在构建信息层级时格外好用：同一套字体就能撑起从正文到主标题的完整排版体系。

4 种格式怎么选

仓库里同时提供了四种格式，存放于fonts/目录下，对应不同使用场景：

格式	存放目录	最佳用途
TTF	`fonts/ttf/`	桌面应用、系统安装，兼容性最广
OTF	`fonts/otf/`	专业排版软件（如 Illustrator、InDesign）
WOFF2	`fonts/webfonts/`	网页字体，压缩率高、加载快
可变字体	`fonts/variable/`	网页与高级排版，支持 200–800 连续字重

另外，这个家族还内置了三套风格变体（OpenType 特性）：Lancip（尖锐）、Lurus（直线）和 Lingkar（卷曲）。部分字形在不同风格下呈现出别样的曲线处理，你可以通过排版软件的字符面板或 CSS 的font-feature-settings自由切换，为设计注入更多个性。

二、场景一：三步完成 Plus Jakarta Sans 字体安装

安装字体是上手的第一步。好消息是，整个过程在三分钟以内就能完成，而且不需要任何特殊工具。

Windows 用户：

进入fonts/ttf/目录，选中需要的字体文件（建议全选）。
右键单击 → 选择"安装"。
重启正在运行的 Office、Photoshop 等程序，即可在字体列表中找到 Plus Jakarta Sans。

macOS 用户：

双击.ttf或.otf文件，系统会自动打开"字体册"。
点击右下角"安装字体"按钮。
字体即刻生效，无需重启。

Linux 用户：建议通过命令行把字体复制到用户目录并刷新缓存：

mkdir -p ~/.local/share/fonts/PlusJakartaSans cp fonts/ttf/*.ttf ~/.local/share/fonts/PlusJakartaSans/ fc-cache -fv ~/.local/share/fonts

fc-cache会重建系统字体索引，复制完成后你可以用fc-list | grep -i "plus jakarta"验证字体是否安装成功。建议你先装 Regular 和 Bold 两个字重就够日常使用了，等真正需要时再补充其他字重，避免字体文件堆积。

三、场景二：给网站换上新外观

网页是 Plus Jakarta Sans 最常见的应用场景。它最值得称道的一点是fonts/webfonts/目录里直接提供了 WOFF2 格式，无需你额外转换。

在 CSS 中引入字体的标准姿势如下：

/* 引入 Regular 与 Bold 两个字重，只加载你真正需要的 */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/webfonts/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/webfonts/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* 应用到全站，并给出合理的系统字体回退栈 */ body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.6; }

解释一下关键点：font-display: swap让字体在加载完成前先用回退字体渲染文字，避免页面出现不可见的"白屏期"；format('woff2')声明则告诉浏览器只需下载现代压缩格式。这套写法兼顾了体验与性能，是目前业界的标准实践。

5 个提升网页字体加载速度的技巧：

只引入实际用到的字重，不要一次性加载全部 14 个文件。
优先使用 WOFF2 格式，它比 TTF 平均小 30% 以上。
对首屏关键字体使用<link rel="preload">预加载。
用font-display: swap搭配系统字体回退，保证内容立即可读。
若站点面向单一语种，可考虑子集化，只保留需要的字符。

四、场景三：为移动应用打造专属主题

移动端集成同样简单，而且这个字体家族支持越南语等多语言字符（基于 GF Latin Pro 与 GF Latin Plus 编码标准），面向海外市场时不用担心字符缺失。

Android 集成：将 TTF 文件放入app/src/main/res/font/目录，然后在 XML 中直接引用：

<TextView android:fontFamily="@font/plus_jakarta_sans_regular" android:textSize="16sp" android:textColor="@android:color/black" android:lineSpacingExtra="4dp" />

Android 系统会自动根据文件名（如plus_jakarta_sans_regular.ttf）生成对应的字体资源 ID，无需额外注册代码。如果你要支持多种字重，把对应文件都放进res/font/即可。

iOS 集成：把字体文件拖入 Xcode 工程，在 Info.plist 中通过Fonts provided by application键声明文件名，然后在代码中调用：

// Swift 代码示例：直接按 PostScript 名称取用字体 if let font = UIFont(name: "PlusJakartaSans-SemiBold", size: 18) { titleLabel.font = font }

注意 Swift 中使用的名称是字体的 PostScript 名（形如PlusJakartaSans-SemiBold），与文件名几乎一致，稍加对照即可。建议把常用字重封装成统一的方法，方便全 App 复用。

五、场景四：用可变字体搭建品牌视觉规范

如果说静态字重解决的是"够用"，那可变字体解决的就是"从容"。fonts/variable/目录下的可变字体文件支持200–800 的连续字重调节，一个文件就能替代 7 个静态文件，这对品牌规范落地和性能优化都是巨大的利好。

/* 引入可变字体，font-weight 声明其支持的连续范围 */ @font-face { font-family: 'Plus Jakarta Sans Variable'; src: url('fonts/variable/PlusJakartaSans[wght].ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; } /* 建立品牌字重规范 */ :root { --font-brand: 'Plus Jakarta Sans Variable', -apple-system, sans-serif; --wght-light: 300; --wght-regular: 400; --wght-medium: 500; --wght-bold: 700; --wght-display: 800; } /* 动态调整字重，配合过渡实现"呼吸感" */ .brand-title { font-family: var(--font-brand); font-variation-settings: 'wght' var(--wght-display); transition: font-variation-settings 0.3s ease; } .brand-title:hover { font-variation-settings: 'wght' 650; }

把字重抽象成 CSS 变量后，整个设计系统的字重体系就变得可维护、可迭代：改一处变量，全站同步更新。上面这段代码还展示了可变字体的一个炫酷能力——字重平滑过渡，这在静态字体下是无法实现的。

上图展示的"City of Collaboration"正是这套字体的灵魂所在：为协作而生的开放气质。当你在设计系统中把字重、字距、行高都规范成统一的 token 后，Plus Jakarta Sans 会自然地成为品牌视觉的一部分，让产品界面既有秩序感又不失亲和力。

六、高手进阶：从源码构建到参与开源社区

如果你不满足于"用字体"，想自己重新构建、测试甚至修改这款开源字体，仓库里已经备好了完整的工具链。

首先获取源码：

git clone https://gitcode.com/gh_mirrors/pl/PlusJakartaSans

源码存放在sources/目录：PlusJakartaSans.glyphs与PlusJakartaSans-Italic.glyphs是 Glyphs 格式的设计源文件，config.yaml是构建配置文件（内含家族名称、版本号、字重轴等关键参数）。构建与质量测试命令如下：

# 从源码构建整套字体 gftools builder sources/config.yaml # 用 FontBakery 对输出字体做 Google Fonts 规范检查 fontbakery check-googlefonts fonts/variable/*.ttf fontbakery check-googlefonts fonts/ttf/*.ttf

gftools builder会根据配置自动产出 TTF、WOFF2 与可变字体；fontbakery则会像体检医生一样逐项检查字体的元数据、度量值、轮廓质量等，输出详细报告。对字体工程感兴趣的朋友，可以从这两条命令开始探索。

参与贡献的路径也很清晰：在仓库提交 issue 报告你发现的问题，或 fork 后通过 pull request 提交改进；FONTLOG.txt 里记录着每一次版本更新的细节（如 v2.700 修复了ohorn字形变形、调整了垂直度量），你可以从中了解一个成熟字体项目是如何持续迭代的。你也可以在 AUTHORS.txt、CONTRIBUTORS.txt 中看到项目的主要作者与贡献者名单。