企业官网建设流程全解析

开源字体 Plus Jakarta Sans 完整上手指南：从下载到项目落地的全流程攻略

【免费下载链接】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 操刀，如今以 SIL 开源协议向所有人开放。这篇文章会带你从头到尾走一遍：先认识它的设计语言，再搞定安装，最后把它接入网页和 App，并顺带解决几个新手最常踩的坑。

先聊聊它：为什么这款字体值得一试

Plus Jakarta Sans 走的是几何无衬线路线，气质上糅合了 Neuzit Grotesk、Futura 以及上世纪 30 年代怪诞风格（Grotesque）的线条，但又刻意做得更干净、更现代。它的 x-height（小写字母高度）略高于常规水准，字母开口（字怀）比较开放，因此小字号下依然清晰可辨，大标题时又很有存在感——这正是它能同时胜任正文和展示文字的原因。

还有一个容易被忽略的彩蛋：这套字体的部分字形内置了三种风格化变体，分别叫Lancip（尖锐）、Lurus（直线）和Lingkar（卷曲）。也就是说，同一个字母可以按需切换成不同的笔形细节，给排版留出了额外的发挥空间，这是很多免费字体给不了的待遇。

上面这张图是它的品牌标识，黑白高对比的"＋Jakarta Sans"字样，一眼就能感受到这款字体的简约基因。

关于授权，先给你吃颗定心丸：它遵循 SIL Open Font License 1.1，属于真正的开源协议。无论是个人作品、商业网站、App，还是印刷物，都可以免费使用、修改甚至再分发，只要不单独出售字体本身即可。对预算有限的小团队和独立开发者来说，这点非常友好。

家底盘点：一套字体到底包含多少东西

拿到仓库后，你会发现fonts/目录下分成了四个子目录，各自放着不同格式的文件。先用三张表把家底看明白：

字重与样式：一共 7 种字重，每一种都有常规版和斜体版，合计 14 个独立文件。

上面这张动图把 ExtraLight、Regular、Bold 三个档位的视觉效果并排摆在一起，粗细差异一目了然，你可以直观感受"选字重"这件事对版面气质的影响有多大。

文件格式：同一种字重还提供了多种封装格式，对应不同使用场景。

• fonts/otf/与fonts/ttf/：桌面设计软件的主力格式，Windows、macOS、Linux 通吃
• fonts/webfonts/：面向网页的 WOFF2，体积小、加载快，现代浏览器全支持
• fonts/variable/：可变字体，用一份文件覆盖全部字重区间，进阶玩法所在

语言覆盖：字体基于 GF Latin Pro 与 GF Latin Plus 编码标准构建，除了西欧语言外，还额外支持越南语等带变音符号的字符，海外项目可以直接使用，不用担心缺字形。

按需取用：三种场景该怎么挑文件

很多新手会纠结"我到底该下载哪种格式"，其实判断标准很简单：

• 做设计稿 / 桌面排版：直接用fonts/ttf/里的文件，兼容性最好，装进系统后所有软件都能调用。
• 做网页：优先选fonts/webfonts/里的 WOFF2。它是专为网络优化的格式，压缩率高，配合后面的加载优化技巧，几乎不会拖慢页面。
• 想要灵活的连续字重控制：选fonts/variable/的可变字体。一个文件就能在 200～800 的字重区间内任意取值，还能省去反复加载多个字重的开销。

三步完成字体安装：Windows、macOS、Linux 全都有

字体安装教程往往是被新手卡住的第一关，其实每个平台都不超过三步。

Windows 用户：进入fonts/ttf/目录，全选需要的文件，右键单击，选择"安装"。装完记得重启正在运行的软件（Word、Photoshop 等），让程序重新扫描系统字体。

macOS 用户：双击任意.ttf或.otf文件，系统会弹出"字体册"（FontBook），点一下"安装字体"就完事，通常无需重启。

Linux 用户：推荐把字体放到用户级目录，避免污染系统目录、也不需要 sudo：

# 1. 创建个人字体目录 mkdir -p ~/.local/share/fonts/PlusJakartaSans # 2. 把 ttf 文件拷进去 cp fonts/ttf/*.ttf ~/.local/share/fonts/PlusJakartaSans/ # 3. 刷新字体缓存并验证 fc-cache -fv fc-list | grep -i jakarta

最后一条命令如果列出了若干条结果，说明安装成功。假如是整包下载的场景，直接执行git clone https://gitcode.com/gh_mirrors/pl/PlusJakartaSans把仓库拉到本地，再从fonts/目录取文件即可。

网页接入：两段 CSS 让站点换上"新衣"

网页端接入并不复杂，核心就是在样式表里声明@font-face。以下是同时引入常规体和粗体的最小示例：

@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, 'Helvetica Neue', sans-serif; }

声明完成后，在font-family里把'Plus Jakarta Sans'放在最前面，后面的系统字体作为回退即可。如果你的页面只用两三种字重，就只声明那几种，别把 14 个文件全塞进去。

网页字体优化小贴士（这是「网页字体优化」里性价比最高的几条）：

1. 只加载用得到的字重——这是立竿见影的瘦身手段，一个 WOFF2 文件通常只有几十 KB，但积少成多。
2. 开启font-display: swap——字体没加载完时先用回退字体渲染文字，避免白屏闪烁，体验更顺滑。
3. 给关键字体加<link rel="preload">——让浏览器尽早开始下载，尤其适合首屏标题使用的字重。
4. 合理设置缓存——字体文件更新频率低，配置长缓存有效期能让二次访问几乎零成本。
5. 按需子集化——如果只是中文页面里偶尔出现几个英文单词，可以只保留拉丁字符集，体积再砍一大截。

进阶玩法：可变字体的一根"滑杆"控全场

如果你追求更细腻的排版控制，可变字体值得专门花十分钟试试。fonts/variable/下的PlusJakartaSans[wght].ttf一个文件就能覆盖 ExtraLight 到 ExtraBold 的连续区间，这就是「可变字体用法」最核心的价值。

@font-face { font-family: 'Plus Jakarta Sans Variable'; src: url('fonts/variable/PlusJakartaSans[wght].ttf') format('truetype'); font-weight: 200 800; font-display: swap; } .card-title { font-family: 'Plus Jakarta Sans Variable', sans-serif; font-weight: 400; transition: font-weight 0.25s ease; } .card-title:hover { font-weight: 700; }

留意font-weight: 200 800这个写法，它声明了可变区间；而 hover 时字重从 400 平滑过渡到 700 的动画效果，是静态字体完全做不到的。这种"重量跟着交互走"的细节，能让页面质感立刻上一个台阶。

移动端集成：App 里也能用上同一套字体

Android：把需要的.ttf文件放进app/src/main/res/font/目录，然后在布局 XML 中直接引用：

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:fontFamily="@font/plus_jakarta_sans_regular" android:textSize="16sp" android:text="Hello Plus Jakarta Sans" />

iOS：先把字体文件拖进 Xcode 工程，并在Info.plist的Fonts provided by application数组中登记文件名，之后在代码里按 PostScript 名称调用：

let label = UILabel() label.font = UIFont(name: "PlusJakartaSans-Regular", size: 16)

需要注意，iOS 上字体名称必须与文件内部的 PostScript 名完全一致，多一个空格都会加载失败，这是新手最容易踩的小坑。

常见问题排解：四个高频困惑一次讲清

装完字体，软件里却找不到？多数情况是程序没有刷新字体列表。请彻底退出并重新启动相关软件；如果还不行，检查是否装的是 OTF 格式且目标软件对 OTF 支持不佳，换成 TTF 版本再试。

Linux 下fc-list查不到？先确认文件确实拷进了~/.local/share/fonts/（注意是用户目录，不是/usr/share/fonts），再执行fc-cache -f强制重建缓存。若依然无结果，检查文件名是否含中文或特殊字符。

网页加载字体慢，怎么破？优先做三件事：砍掉用不到的字重、开启font-display: swap、对首屏字体加preload。这三板斧基本能解决 80% 的加载性能问题。

商业项目真的可以随便用？可以。SIL Open Font License 明确允许商业用途，包括把字体嵌入到你的商业产品、网站和应用里。唯一要注意的是别把字体文件本身当作商品单独售卖。

想自己重新构建或质检字体？仓库里附带了完整的构建链（requirements.txt包含 fontmake、gftools、fontbakery）。在项目根目录执行gftools builder sources/config.yaml可重新生成字体；用fontbakery check-googlefonts fonts/ttf/*.ttf可以对生成结果做一次谷歌字体规范级别的质量体检。

下一步：挑个字重，动手试试

"City of Collaboration（协作之城）"——上面这张图正是这套字体诞生的精神内核：为公共与协作场景而生，开放给所有人使用。

看完这篇文章，你只需要做三件事：

1. 下载并安装：优先从fonts/ttf/入手，选 Regular 和 Bold 两个字重装进系统，它们能覆盖大多数日常场景。
2. 在项目里跑一遍：网页项目按上面的@font-face示例接入，设计项目直接在软件里切换字体试试手感。
3. 再探索一步：等熟悉了基础用法，去fonts/variable/试试可变字体，感受一下"一根滑杆控制全部字重"的乐趣。

好的字体是廉价又高效的质感提升手段，而 Plus Jakarta Sans 恰好同时满足"免费、开源、好看、好用"这四个条件。别再犹豫，现在就去把它装进你的工具箱吧。

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