企业官网建设流程全解析

• 开发工具

导读

Fantasque Sans Mono 是一款以功能为核心、同时带有手写笔触风格的编程等宽字体，其官方说明文档收录于本仓库的 assets/fonts/fantasque/README.md。本文以该文档为主体，系统梳理这款字体的设计理念、字重与字形覆盖、风格集、构建流程、授权条款及完整版本演进史，并结合仓库内实际存放的 OTF/TTF/Webfonts 字体文件与 apps 目录下的示例代码，给出在 pdf-lib 中嵌入并绘制该字体的可运行方案。读完本文，你将掌握该字体的完整背景知识，以及如何在 JavaScript 环境中把 Fantasque Sans Mono 直接嵌入 PDF 文档。

字体定位：为编程而生的等宽字体

Fantasque Sans Mono 的设计出发点明确：a programming font, designed with functionality in mind, and with some wibbly-wobbly handwriting-like fuzziness that makes it unassumingly cool——即一切以功能优先，同时保留手写般的"摇摆模糊感"，使其在低调中带有一丝个性。

该字体此前名为Cosmic Sans Neue Mono。作者解释称，此前的命名源于某阶段它看起来像 Comic Sans 与 Helvetica Neue 的"突变后代"，而作者希望它如今已不再是这个样子。由于发现类似名称已被其他字体占用，且人们容易将对 Comic Sans 的直觉性反感投射到这款字体上，作者在 1.4 版本正式将其更名为Fantasque Sans（fantasque is the new cosmic）。

在设计灵感上，作者明确提到Inconsolata与Monaco，同时因其长期使用Consolas编程，字体也在一定程度上与 Consolas 存在共性——这一点尤其体现在斜体版本的设计思路上（见下文）。

字重、变体与字形覆盖

字重与变体

根据官方文档，该字体包含与常规版相同字距指标的Bold版本，以及一款质量良好的 Italic 版本。值得强调的是，斜体并非简单地对常规字形施加倾斜变换，而是像 Consolas 的斜体那样重新设计了字形，这一点保证了斜体在屏幕上依然清晰可读。

在本仓库中，字体的实物文件完整存放于 assets/fonts/fantasque 目录下，可以逐一验证官方文档的描述：

• OTF 目录：FantasqueSansMono-Regular.otf、FantasqueSansMono-Bold.otf、FantasqueSansMono-Italic.otf、FantasqueSansMono-BoldItalic.otf
• TTF 目录：与 OTF 对应的 4 个 TrueType 文件
• Sources 目录：4 个.sfd源文件（FontForge Spline Font Database 格式），即字体设计的可编辑源

即仓库同时提供了 OTF、TTF 两种交付格式，Regular/Bold/Italic/BoldItalic 四个字重变体各一。

字符覆盖

两个版本（Regular 与 Bold）覆盖相同的字符范围：拉丁字母、大量带音调的字符、部分希腊字母以及部分箭头符号。文档同时给出诚实提示：作者并未对所有绘制的字形做过全量渲染测试，个别带有"多层疯狂重音"的字符可能在特定场景下渲染不佳，遇到此类问题时可按文档指引向作者报告。

风格集 ss01：无环 k

Fantasque Sans Mono 的默认小写k带有一个装饰性的"环"，这既是其辨识度的一部分，也可能不符合部分开发者的审美。字体从 1.7.1 版本起提供名为ss01（nondescriptk）的风格集，开启后可将带环k替换为直形无环版本（文档原文描述为 "Nodistractivelovely loop"，即去掉"可爱"的环）。该功能在支持 OpenType 风格集（Stylistic Set）的编辑器中通过开启ss01特性即可使用。

作者与许可证

该字体由Jany Belluz创建。字体软件依据SIL Open Font License（OFL）1.1授权，许可证全文存放于 assets/fonts/fantasque/OFL.txt，其版权声明为Copyright (c) 2013-2016, Jany Belluz。

关于授权有一项重要的版本变更：从1.4.1起，字体移除了 Reserved Font Name 保留条款，这意味着你可以对字体进行子集化（subset）、压缩、微调（hint）等再加工操作，而无需担心改名义务——这对在 Web 或 PDF 场景下按需裁剪字体体积尤为重要。

从源码构建可安装字体文件

构建工具链

官方文档给出的构建流程需要以下工具：

• FontForge（需带 Python 脚本支持）
• ttfautohint（用于 TrueType 自动微调）
• sfnt2woff（来自 Ubuntu 的woff-tools包）
• ttf2eot（用于生成 EOT 格式）
• woff2_compress（来自 Google 的 WOFF2 工具集）

在具备上述工具的前提下，在源码根目录运行make即可构建，文档描述成功时会输出绿色输出与若干 "OK" 消息。仓库中的 Sources 目录 正是这一构建流程的输入——四个.sfd源文件对应四个字重变体。

Ubuntu 用户注意事项

文档特别提醒：截至编写时，Ubuntu 默认软件源中的 FontForge 版本明显过旧，且已知会引发细微的构建问题。官方建议优先通过 FontForge 官方 PPA 安装较新版本（使用sudo add-apt-repository ppa:fontforge/fontforge添加源后再安装）。若不想自行构建，也可直接下载最新预构建发布版。

安装到本机

make install会将 TTF 字体安装到本地.fonts/目录并刷新字体缓存，方便在修改字体源文件后即时查看效果。

关于 TTF 与提示（hinting）

从 1.3.1 版本开始，TTF 字体改用 FreeType 的ttfautohint进行自动微调，官方表示这在 Windows（以及部分 Java 应用等场景）上能获得明显更好的渲染效果。文档明确建议：Windows 用户应使用 TTF（TrueType）文件。若微调后的版本反而带来问题，可向作者反馈以获取未微调版本。

Web 字体部署

仓库的 Webfonts 目录 提供了完整的 Web 字体产物：每个字重变体均包含.eot、.svg、.woff、.woff2四种格式，并附有 stylesheet.css 样式表。目录内的 README.md 给出了明确的使用方法：

为了使用附带的 CSS 规则，需要将Webfonts/的内容、归档根目录下的.ttf文件以及OTF/文件夹下的.otf文件全部上传到同一目录。

也就是说，Web 部署需要同时具备三种格式来源：Webfonts 目录（eot/svg/woff/woff2 与 CSS）、根目录 TTF、OTF 目录，这样才能覆盖不同浏览器与回退场景。字体 Web 化始于 1.3.2 版本，其目标之一是"让所有酷语言网站的代码示例都使用这款字体"；1.6.3 版本则进一步优化了生成的 CSS。

在 pdf-lib 中嵌入 Fantasque Sans Mono

本仓库是 pdf-lib 的镜像仓库，Fantasque Sans Mono 正是被仓库的示例应用当作"自定义字体嵌入 PDF"的典型素材，这构成了该字体文档与项目核心能力的直接结合点。

1. 字体文件的加载

示例应用通过读取仓库内的 OTF 文件来加载字体。在 apps/node/index.ts 中可以看到资产装配逻辑：

const readFont = (font: string) => fs.readFileSync(`assets/fonts/${font}`); // ... otf: { fantasque_sans_mono_bi: readFont( 'fantasque/OTF/FantasqueSansMono-BoldItalic.otf', ), // ... }

可见仓库选用的是FantasqueSansMono-BoldItalic.otf（粗斜体变体），路径为仓库根的 assets/fonts/fantasque/OTF/FantasqueSansMono-BoldItalic.otf。

2. 嵌入与绘制

在 apps/node/tests/test1.ts 与 apps/deno/tests/test1.ts 中，字体通过pdfDoc.embedFont嵌入，再用drawText绘制到页面：

const fantasqueFont = await pdfDoc.embedFont( fonts.otf.fantasque_sans_mono_bi, ); page2.drawText(ipsumLines.join('\n'), { y: size - 105, size: 25, font: fantasqueFont, lineHeight: 25, });

Web 端示例 apps/web/test1.html 采用同样的思路：从fonts/fantasque/OTF/FantasqueSansMono-BoldItalic.otf拉取字节，embedFont后以font: fantasqueFont绘制文本。由此可以归纳出在任意 JavaScript 环境（Node、Deno、浏览器）中嵌入该字体的通用流程：

import fontkit from '@pdf-lib/fontkit'; import { PDFDocument } from 'pdf-lib'; // 1. 创建文档并注册 fontkit（嵌入自定义字体所必需） const pdfDoc = await PDFDocument.create(); pdfDoc.registerFontkit(fontkit); // 2. 读取 Fantasque Sans Mono 的字体字节（OTF/TTF 均可） const fontBytes = /* fs.readFileSync / fetch / ArrayBuffer */; // 3. 嵌入字体 const fantasqueFont = await pdfDoc.embedFont(fontBytes); // 4. 用该字体绘制文本 const page = pdfDoc.addPage(); page.drawText('Hello from Fantasque Sans Mono', { x: 50, y: 700, size: 24, font: fantasqueFont, });

几点实现细节值得注意：

• 嵌入自定义字体前必须调用pdfDoc.registerFontkit(fontkit)，否则embedFont无法解析 OTF/TTF 字体结构——这一前提在仓库示例中均有体现（如 apps/node/tests/test1.ts）。
• embedFont还支持{ subset: true }选项用于只嵌入用到的字符子集以压缩体积。仓库示例中，相邻的 Ubuntu 字体嵌入即使用了subset: true（见 apps/node/tests/test1.ts），而 Fantasque 示例未传该选项；可根据实际体积需求按需开启。
• 该字体的 OTF 变体在 pdf-lib 中可直接嵌入，说明 pdf-lib 的自定义字体嵌入路径对 OTF 与 TTF 均适用；从源码结构看，这一能力由 src/core/embedders/CustomFontEmbedder.ts 及 CustomFontSubsetEmbedder.ts 提供。

版本演进史

官方文档完整记录了从 1.1 到 1.7.1 的版本脉络，以下按文档原文整理：

这份版本史清晰呈现了该字体的演进主线：从基础字重补齐（Bold、Italic、BoldItalic），到字符覆盖扩展（希腊字母、Powerline、制表符、西里尔字母），再到交付形态完善（TTF 微调、Web 字体、CSS 优化），最后落脚于开放授权（移除 RFN）与风格化特性（ss01），对字体设计者与使用者都有直接的参考价值。

小结

Fantasque Sans Mono 是一款兼顾功能性与个性的编程字体：常规/粗体同字距的度量设计、重新绘制而非简单倾斜的斜体、覆盖拉丁/希腊/西里尔等多语字符集、可选的ss01无环 k 风格集，以及从 1.4.1 起完全开放的 OFL 授权，使其成为代码展示、文档排版乃至 PDF 文本绘制的可靠选择。在 pdf-lib 生态中，它被仓库示例作为自定义字体嵌入的标准素材反复使用——通过registerFontkit与embedFont两步即可将这款字体的 OTF/TTF 文件直接绘制进 PDF 页面。无论是想以字体构建者的视角复现make构建流程，还是以使用者的视角在 Web 或 PDF 中落地部署，本文结合 assets/fonts/fantasque/README.md 与仓库源码给出的路径与示例，均可作为直接参考。

• 开发工具