企业官网建设流程全解析

• 前端
• CLI
• 开发工具

ADLaM Display 是 Fontsource 注册表中收录的一款 Adobe Latin 与 ADLaM 双文字展示字体，由微软委托 Neil Patel、Mark Jamra、Andrew Footit 三位设计师创作，旨在填补 ADLaM 文字缺乏展示型字体的空白。本文以注册表描述文档 description.en-US.md 为骨架，结合 family.json、distribution.json 等注册表数据，系统讲解该字体的设计背景、技术规格、字符覆盖，并给出在 Fontsource 中安装、导入与通过 CDN 使用的完整实战方案。

字体背景：为 ADLaM 文字而生的展示型字体

ADLaM 文字（Adlam，Unicode 区块 U+1E900–U+1E95F）由 Ibrahima 与 Abdoulaye Barry 兄弟发明，用于书写西非富拉语（Fulani/Pulaar）。在很长一段时间里，ADLaM 文字缺乏适合标题、海报等大字号场景的展示型（Display）字体。

为填补这一空白，微软（Microsoft）委托三位知名字体设计师Neil Patel、Mark Jamra、Andrew Footit创作了 ADLaM Display。据描述文档记载，设计团队从富拉文化的传统视觉元素中汲取灵感：

• khasas（富拉传统毯子）上的圆点图案；
• Wodaabe（沃达贝游牧民族）帽子上的装饰；
• 富拉文化纺织品中的圆点（spots）、三角形（triangles）、菱形（lozenges）与 V 形/人字形（chevrons）图案。

这些源自日常织物的几何母题被转化为字形的笔画细节，使 ADLaM Display 兼具民族识别度与现代展示字体的视觉冲击力。上游项目由微软维护（microsoft/ADLaM-Display），如果你想参与字形修正、特性改进或测试反馈，可直接在该上游项目仓库参与贡献。

从描述到注册表：family.json 中的完整技术规格

Fontsource 的注册表将描述文档与结构化元数据配套存放，同一目录下的 family.json 给出了该字体的全部机器可读规格，可直接印证描述文档中的设计师信息：

字体源与来源追踪（provenance）

family.json的sources字段记录了该字体唯一的源文件ofl/adlamdisplay/ADLaMDisplay-Regular.ttf（来源为google/fonts仓库），并附带了每次构建都会重新计算的 SHA-256 校验和、文件大小与完整的字体检查（inspection）结果。provenance字段则记录了来源仓库与修订号，保证字体的可追溯性——这正是 Fontsource 注册表“可审计分发”设计的一部分，相关数据结构的校验逻辑定义在 schema.ts 的familySchema中。

字体检查（inspection）数据解读

family.json中的sources[].inspection记录了底层字体文件的实际技术参数：

• 字体版本：Version 2.000，由ttfautohint (v1.8.4.7-5d5b)与gftools[0.9.28]工具链处理生成；
• 字形与码点规模：共383 个字形（glyphs）、348 个码点（codepoints）；
• 轮廓格式：glyf（TrueType 轮廓），保证在各平台与渲染引擎下的一致性；
• 字重与样式：静态weight: 400、style: normal，与 distribution.json 中声明的唯一静态变体（normal 400）完全对应；
• Unicode 覆盖范围（unicodeRange）：除完整的拉丁基础字符（U+0020–U+007E、U+00A0–U+00FF 等）与常用标点、货币符号外，核心是ADLaM 字母区 U+1E900–U+1E94B、ADLaM 数字区 U+1E950–U+1E959，以及 U+1E95E–U+1E95F，此外还包含富拉语所需的 U+061F（阿拉伯文问号）等字符。

OpenType 特性

inspection.features列出了该字体内建的 OpenType 排版特性，在 FamilyAbout.tsx 中会结合 registry.ts 的featureNames/featureDescriptions表翻译为可读名称：

• GSUB（字形替换）：aalt（全部替换形式）、case（大写适配形式）、ccmp（字形组合）、liga（标准连字）、locl（本地化形式）、medi（中部形式）、ss01（样式集 1）；
• GPOS（字形定位）：abvm/blwm（上方/下方标记定位）、dist（距离调整）、kern（字距调整）、mark（标记定位）。

其中abvm、blwm、mark、ccmp等特性对 ADLaM 这类带附加记号的文字至关重要——它们确保元音附加符与基字正确组合与定位，是西非文字正确渲染的关键。

语言与字符覆盖：ADLaM 主文字 + 拉丁扩展

family.json的languages字段列出了该字体声明支持的语言标签。除海量以_Latn结尾的拉丁文字语言外，特别值得注意的是两个 ADLaM 文字语言标签：ff_Adlm（富拉语）与fuf_Adlm（几内亚富拉语），与primaryScript: "Adlm"相互印证——这是一款为 ADLaM 文字量身设计的字体，同时兼顾拉丁文字覆盖。

子集分布（distribution.json）

distribution.json 声明了 Fontsource 分发时的字符子集划分：

• 默认子集：latin；
• 可用子集：adlam、latin、latin-ext；
• 静态变体：仅normal/400（该家族未提供可变字体变体）。

其中adlam子集的字符范围定义在 registry/data/subsets/adlam.json，其码点区间（如 U+1E900–U+1E94B）由上游nam-files仓库的adlam_unique-glyphs.nam切片文件生成，并有独立的 SHA-256 校验与来源修订号记录。

按需加载机制

Fontsource 生成的默认 CSS 使用unicode-range属性将每个子集映射到对应码点区间，浏览器只会下载页面实际用到的字符子集，因此日常使用无需手动选择子集（详见 subsets.mdx）。对于 ADLaM Display，这意味着：只渲染拉丁文本时仅下载latin子集，出现 ADLaM 字符时才按需获取adlam子集，实现按字符精确加载。

在 Fontsource 中安装与使用 ADLaM Display

由于该家族只有静态变体（normal 400，无可变字体），应使用静态包@fontsource/adlam-display（静态包与可变包的区别详见 install.mdx）。

1. 安装

使用任意包管理器安装：

npm install @fontsource/adlam-display

（或使用pnpm add/yarn add等等价命令。）

2. 导入字体

在应用入口文件（如main.tsx、App.tsx）导入包即可，根导入提供默认字重 400：

import "@fontsource/adlam-display";

如需显式导入某字重（该字体仅 400），可写为：

import "@fontsource/adlam-display/400.css";

3. 在 CSS 中引用

导入后即可通过字体家族名使用：

body { font-family: "ADLaM Display", sans-serif; }

ADLaM 字符（如富拉语文本）会自动触发adlam子集加载；标题、海报等展示场景可将其与拉丁无衬线字体组合作为 fallback 使用。

4. 按子集导入（可选）

在需要严格控制资源体积的罕见场景下，可只导入特定子集（仅静态包支持）：

import "@fontsource/adlam-display/latin.css"; // 仅拉丁子集 import "@fontsource/adlam-display/adlam.css"; // 仅 ADLaM 子集

注意：默认 CSS 已通过unicode-range实现更高效的按需加载，官方文档并不推荐手动子集导入。

5. TypeScript 配置

若项目开启 TypeScript 的noUncheckedSideEffects检查，导入 CSS 可能报错，可在全局声明文件（如src/globals.d.ts）中添加：

declare module "*.css"; declare module "@fontsource/*" {}

Vite 等自带 CSS 处理的构建工具通常无需此配置。

6. 通过 CDN 使用

对于无法自托管、需要稳定资源链接的场景，Fontsource 提供了版本化的 jsDelivr CDN 代理（详见 cdn.mdx）：

• CSS 样式表：https://cdn.jsdelivr.net/fontsource/css/adlam-display@{version}/index.css，.min.css后缀可获取压缩版本；
• 字体文件：https://cdn.jsdelivr.net/fontsource/fonts/adlam-display@{version}/{subset}-400-normal.{extension}，例如latin-400-normal.woff2、adlam-400-normal.woff2。

生产环境建议使用精确版本号（不可变、可长缓存、可复现部署），如@5.2.7；@latest、@5等浮动版本会自动解析到匹配的发布版本，但缓存较短，仅在需要自动升级时使用。版本号请以实际发布为准。

许可证与合规使用

ADLaM Display 以SIL Open Font License 1.1（OFL-1.1）发布，完整条款存放在 license.txt，版权归属为：

Copyright (c) 2022 by Microsoft. All rights reserved.

依据 OFL-1.1，你可以自由使用、研究、修改与再分发该字体（含随软件捆绑、嵌入、销售），前提是字体本身不得单独售卖、再分发时必须附带上述版权声明与许可证文本，且衍生作品必须保持 OFL 许可、不得使用保留字体名称。由该字体创作的文档不受许可证约束。

从源码看描述文档的“旅程”

在 Fontsource 体系中，这份描述文档并非孤立文本，它参与了完整的数据流水线：

1. 生成阶段：注册表脚本 google.ts 将 Google Fonts 上游的DESCRIPTION.en_us.html转换为description.en-US.md写入注册表；自托管家族则由 font-files.ts 从上游fontsource/font-files仓库同步article.en-US.md/description.en-US.md两类文档；
2. 服务阶段：网站通过 font-page.server.ts 加载注册表数据，由 registry.ts 的getRegistryContent优先选取英文描述作为页面内容；
3. 展示阶段：FamilyAbout.tsx 将描述文本渲染为字体详情页 “About ADLaM Display.” 板块的引言，并配以字体样张（specimen）展示；
4. 摘要阶段：font-summary.server.ts 使用Intl.Segmenter提取描述的首个完整句子（140 字符内）生成页面的 meta description，供搜索引擎与社交分享引用。

换言之，当你阅读本文开头的背景故事时，看到的正是注册表描述文档——也就是 description.en-US.md 原文——在 Fontsource 全链路中的最终呈现。理解这条流水线，也有助于你在向 Fontsource 贡献新字体或更新字体描述时，预判修改会如何影响官网展示与检索摘要。

• 前端
• CLI
• 开发工具