使用 Fontsource 集成 Foldit：一款基于 COLRv1 渐变技术的可变彩色显示字体实战指南-平芜编程栈

前端
CLI
开发工具

【免费下载链接】fontsource

Self-host Open Source fonts in neatly bundled NPM packages.

项目地址：https://gitcode.com/gh_mirrors/fo/fontsource

Foldit 是一款由 Sophia Tai 设计的实验性可变显示字体，其最核心的技术特征是在字面轮廓之外，通过 COLRv1 与 CPAL 表承载多层渐变着色，模拟折叠纸带的立体空间感。本文以 Fontsource 仓库中的 Foldit 字体元数据与官方描述文档为主体，结合仓库源码，系统讲解如何理解、安装并在 Web 项目中使用这一彩色可变字体，以及其底层数据在 Fontsource 中是如何被记录、校验与分发的。

从设计概念到字体结构：理解 Foldit 的三层技术特征

Foldit 的描述文档开宗明义地指出：它是一款variable-gradient COLRv1字体，使用渐变来"玩弄维度"、营造空间感，设计概念源自"折叠的纸带"。这句话浓缩了三个相互独立又彼此叠加的技术要点：

可变字体（Variable Font）：单一字体文件内包含一段连续的粗细轴（wght），而非拆分为多个静态字重文件；
彩色字体（Color Font）：字形不仅仅是单色轮廓，还携带调色板与图层信息；
渐变（Gradient）：颜色并非平涂，而是通过渐变色带在字形内部过渡，制造折叠与光影的错觉。

这些特征在 family.json 的inspection字段中得到了逐项印证：

字段	Foldit 的实际值	含义
`axes`	`wght`（min 100 / default 100 / max 900）	唯一可变的轴是字重，范围 100–900
`colorTables`	`["COLR", "CPAL"]`	字体携带 COLR（颜色图层）与 CPAL（调色板）两张彩色表
`outline`	`glyf`	轮廓使用 TrueType glyf 格式，彩色图层叠加其上
`glyphs`	3638	源文件共 3638 个字形
`codepoints`	566	映射了 566 个 Unicode 码点
`fontVersion`	Version 1.003	上游字体版本
`style`	normal	仅提供 normal 样式，无斜体

值得注意的是，glyphs（3638）远大于codepoints（566），这正是 COLRv1 彩色字体的典型特征——每个可见字形背后往往还有多个用于渐变图层的子字形（layer glyph）。

COLRv1 与 CPAL：彩色字体的两张核心表

描述文档明确提示读者前往 Google Fonts 的 gf-guide 色彩页面学习 Color Fonts 技术，其核心可以概括为两张表：

CPAL（Color Palette）表：集中存储调色板。一个字体可以定义多个调色板，每个调色板包含若干颜色条目（entry），字形通过索引引用具体的颜色条目。当渐变需要多个色标时，这些色标会被拆成多个图层，每个图层引用不同颜色条目，由渲染器在字形区域内插值过渡。
COLR（Color Layers）表：定义字形由哪些图层（layer）按顺序堆叠构成，每个图层引用一个基础字形与一组 CPAL 颜色索引。COLRv1（即版本 1 的 COLR 表）引入 Paint 图模型，支持线性渐变（LinearGradient）、径向渐变（RadialGradient）、混合模式与变换等高级绘制指令，这正是 Foldit 实现"渐变 + 空间感"的底层机制。

从源码结构看，Fontsource 将colorTables作为**来源能力（source capabilities）**纳入注册表契约。在 api/shared/registry.ts 的RegistrySourceCapabilitiesSchema中，colorTables被定义为z.array(z.string().length(4))，即一张由四字符标签组成的数组；同时outline被限定为glyf、cff、cff2、bitmap四种取值之一。这意味着：任何带有彩色表的字体，其COLR、CPAL标签都会像 Foldit 一样被显式记录，并在注册表校验时强制通过 Zod 模式检查（见 registry.test.ts 中colorTables: []的测试用例）。

Foldit 在 Fontsource 中的分发形态：静态与可变并存

distribution.json 记录了 Foldit 在 Fontsource 中的实际分发策略——Fontsource 会为同一族同时产出可变与静态两类包：

可变包（variable）：1 个条目，axisKey: "wght"，style: "normal"，对应@fontsource-variable/foldit；
静态包（static）：9 个条目，weight从 100、200……一直到 900，全部为style: "normal"，对应@fontsource/foldit下的100.css…900.css。

这一"可变 + 静态"双轨策略在仓库文档 getting-started/install.mdx 中有明确说明：当一个家族支持可变字体时，优先使用其可变包，因为它提供连续的粗细区间，且通常比多个静态字面文件更省资源；若家族没有可变字体或项目需要固定字面，再使用静态包。

此外，distribution.json 中的characters字段显示 Foldit 在 Fontsource 中被切分为三个子集（subset）：

latin（默认子集defaultSubset）
latin-ext
vietnamese

子集划分意味着生成的 CSS 会利用unicode-range，浏览器只会按需下载页面实际使用到的字符集，而非整个字体文件——这是 Fontsource 包体积优化的关键机制。

安装与使用：在项目中引入 Foldit

根据仓库的安装文档 getting-started/install.mdx 与可变字体指南 getting-started/variable.mdx，引入 Foldit 的完整流程如下。

1. 安装可变包（推荐）

npm install @fontsource-variable/foldit

2. 在入口文件导入

import "@fontsource-variable/foldit";

默认导入会包含 normal 样式下的完整字重区间（100–900），并自动应用unicode-range做按需下载。

3. 在 CSS 中应用

由于 Foldit 只有一个wght轴（100–900，默认 100），使用标准的font-weight即可连续取值：

.foldit-thin { font-family: "Foldit Variable"; font-weight: 100; /* 最小字重 */ } .foldit-black { font-family: "Foldit Variable"; font-weight: 900; /* 最大字重 */ }

若需要精确控制，也可以显式声明font-variation-settings：

.foldit-custom { font-family: "Foldit Variable"; font-variation-settings: "wght" 500; }

仓库文档 getting-started/variable.mdx 提示：Fontsource 的可变轴涵盖wght、wdth、slnt、opsz、ital等标准轴，单轴可单独导入，例如import "@fontsource-variable/nunito-sans/wght.css"；但多个轴无法拆分多次导入，必须使用单次导入。对于仅含wght轴的 Foldit，直接使用默认导入即可覆盖全部能力。

4. 使用静态包（按需）

如果项目需要在旧环境或特定场景下固定字重，可以安装静态包并按需导入：

npm install @fontsource/foldit

import "@fontsource/foldit/400.css"; /* 400 normal */ import "@fontsource/foldit/900.css"; /* 900 normal */

每个导入对应一个固定字面（fixed face），文档建议"只导入项目实际用到的字重和样式"。

注意：彩色字体的颜色信息位于字体文件的 COLR/CPAL 表中。在 Web 中，支持 COLRv1 的浏览器会直接渲染渐变图层；不支持的环境会回退到字形的单色轮廓。是否需要额外降级策略，取决于项目的目标浏览器范围。

字体来源与许可证：OFL-1.1 与可追溯的 provenance

描述文档末尾提到，Foldit 的上游项目位于 SophiaDesign/Foldit。仓库的 family.json 对此给出了完整的、可审计的元数据：

license：OFL-1.1（SIL Open Font License 1.1），版权归属 "Copyright 2021-2022 The Foldit Font Project Authors"，完整许可证文本见 license.txt；
project：上游仓库https://github.com/SophiaDesign/Foldit，修订号934034370b760240516ba533549436935c49fbc2；
provenance：本次快照来自google/fonts仓库的ofl/foldit目录，修订号a60a77e14f28abd4ef243a1b5dfc48df0cec5205，来源类型为 GitHub；
sourceModified：2026-03-03，即来源文件最后修改时间。

这一设计体现了 Fontsource 的注册表哲学：每一款字体的来源（source）、来源快照（provenance）与许可证信息都是结构化、可追溯的。在 api/shared/registry.ts 中，RegistryFamilyDetailSchema明确规定license必须包含id、url与完整的许可证文本text，provenance记录来源快照。Foldit 的license.txt正是该text字段所引用的完整 OFL-1.1 文本——它允许字体被自由使用、研究、修改与再分发，只要不单独售卖字体文件本身，且再分发时保留版权声明与许可证。

从标签体系看，Foldit 在 family.json 中被标注为：

classifications：display、sans-serif（展示型无衬线体）
tags：expressive/awkward、theme/shaded（表达性 / 怪异风格，主题 / 阴影渐变）

theme/shaded标签直接呼应了其渐变着色的视觉特征，这类标签在 Fontsource 的发现与检索体系中用于按主题分类字体（参见 discovery.test.ts 中theme/*标签的测试用法），帮助设计师在字体目录中快速定位"带阴影/渐变主题"的展示字体。

兼容性与适用场景建议

综合仓库证据，使用 Foldit 前应当明确以下几点前提：

彩色能力依赖环境：渐变着色由 COLRv1 + CPAL 表承载，必须由渲染器（浏览器、设计软件）支持 COLRv1 才能呈现渐变效果；不支持时回退为单色轮廓，视觉差异明显，因此更推荐用于支持 COLRv1 的现代浏览器环境或设计预览场景。
可变能力依赖文件格式：Foldit 源文件为Foldit[wght].ttf（见 family.json 的path字段，约 508 KB），Fontsource 在分发时会按子集切片并输出woff2/woff/ttf多种格式（见 catalog-views.ts 中按${subset}-${weight}-${style}拼装 CDN URL 的逻辑），其中 WOFF2 配合unicode-range是现代 Web 环境下的推荐使用方式。
定位为展示字体：display分类与 100–900 的极端字重区间表明它适合标题、海报、品牌视觉等大字号场景，而非正文阅读。

结语

Foldit 是观察"可变字体 × 彩色字体"两条现代字体技术路线交汇的绝佳样本：单一 TTF 内同时包含wght轴的可变区间与 COLRv1/CPAL 的渐变图层。在 Fontsource 生态中，它的全部技术特征——轴、彩色表、轮廓格式、子集、分发形态、许可证与来源快照——都被结构化地记录在 family.json 与 distribution.json 中，并经 api/shared/registry.ts 的 Zod 模式严格校验后对外分发。理解这份元数据，就等于理解了 Fontsource 对任意一款字体从上游快照到 NPM 包的全链路处理方式；而 Foldit 本身，则可以直接通过@fontsource-variable/foldit一条命令接入你的下一个展示型设计项目。