• 前端

Fraunces 是一款由 Undercase Type 的 Phaedra Charles 与 Flavia Zimbardi 设计的展示用（Display）"Old Style" 软衬线（soft-serif）字体，灵感源自 Windsor、Souvenir 与 Cooper 系列等 20 世纪初字体的笔触特征。本指南以该字体在开源仓库 beautiful-web-type 中的随附说明（public/assets/fonts/fraunces/README.md）为骨架，结合仓库内的字体元数据、CSS 加载配置与配对样例源码，系统讲解 Fraunces 在桌面端与网页端的正确安装方式、静态字体与可变字体的选型原则，以及SOFT、WONK、opsz、wght等变体轴的实战配置方法。

Fraunces 字体概览：设计定位与仓库中的元数据

Fraunces 被官方定位为 display、"Old Style" soft-serif 字体，设计师刻意复刻了早期 20 世纪字体如 Windsor、Souvenir 和 Cooper Series 的"做派"（mannerisms）。"Soft"（柔和）这一关键字正是其设计核心——字体笔画末端与衬线呈现柔和的圆角处理，而非尖锐的几何切割。

在 beautiful-web-type 仓库中，Fraunces 于 2020 年 11 月 22 日被收录（见 README.md 的 Changelog 记录），其完整元数据定义在 content/typefaces/fraunces/meta.yml：

• category: Display——归入展示类字体，主要用于标题与大字排版；
• styles: Variable——以可变字体（variable font）为主要形态；
• italic: true——同时提供正体与意大利斜体；
• weights覆盖100（Thin）到900（Black）共 9 个字重；
• latestRelease为 v1.0，发布于 2020 年 10 月 29 日；
• 描述中明确提到它"使用了几条自定义轴：SOFT和WONK，以及注册轴wght和opsz"。

也就是说，Fraunces 并非只有字重一个维度：它通过四条变体轴，把"柔和度""字怀倾斜（wonkiness）"和"光学尺寸"都变成了可连续调节的设计变量。这与 README 中"桌面端建议""网页端建议"的选型说明互为表里——理解这些轴，才能理解为什么官方会给出"静态字体用于印刷、可变字体用于网页"的分工建议。

认识 Fraunces 的四条变体轴：wght、opsz、SOFT 与 WONK

仓库中 content/typefaces/fraunces/detail.html 给出了各轴的实际演示代码，全部通过 CSS 的font-variation-settings属性控制，正体与斜体均可生效。这是网页端使用 Fraunces 最核心的配置语法：

opsz（Optical Size，光学尺寸轴）

光学尺寸轴根据字号自动或手动切换字形的粗细对比与细节密度，避免小字号"糊"、大字号"柴"。

font-variation-settings: "opsz" 9; /* 小字号阅读场景 */ font-variation-settings: "opsz" 68; /* 中等标题 */ font-variation-settings: "opsz" 144; /* 超大展示字号 */

detail.html 中分别以9、68、144三个档位演示。README 中"许多应用会根据当前字号自动将 Optical Size 轴设为合适值"的描述，正对应这条轴在桌面应用中的自动行为；而在网页端，通常由浏览器/设计者显式声明。

SOFT（Softness，柔和度轴）

控制衬线与笔画末端的圆润程度，取值范围 0–100：

font-variation-settings: "SOFT" 0; /* 接近常规 Old Style 的锐利衬线 */ font-variation-settings: "SOFT" 50; /* 中等柔和 */ font-variation-settings: "SOFT" 100; /* 完全柔和化 */

WONK（Wonkiness，倾斜/俏皮轴）

这是一个开关型轴，取值0或1，用于开启或关闭字形中故意的"歪斜"细节（如字母mnhs&、lbdhkvw&在演示中的变化）：

font-variation-settings: "WONK" 0; /* 关闭 */ font-variation-settings: "WONK" 1; /* 开启 */

wght（Weight，字重轴）

标准注册轴，对应 css/src/typefaces/fraunces.css 中font-weight: 100 900的声明范围，即从 Thin 到 Black 的连续字重。

四条轴可以叠加使用（逗号分隔），仓库中的真实配对样例即展示了这一点，详见后文"网页端实战"一节。

桌面端安装建议：可变字体与静态字体的分工

README 的桌面端部分给出了非常明确的选型原则：静态字体（Static）用于印刷与常规桌面设计，可变字体（Variable）用于 Sketch 中的网页设计和 Adobe 应用中的实验性使用。理由在于：可变字体相对较新，软件支持仍在完善中，而 PDF 导出等流程对静态字体兼容性最好。

安装方式

可以一次性安装发布包中Desktop文件夹内的全部字体，各字体拥有独立的 family name，安装后在字体菜单中会分别显示、互不干扰，不会出现同名覆盖问题。

Desktop/Variable：单一家族名，12 种样式

可变字体安装后只出现在一个家族名下：

• Fraunces

该家族下可访问12 种样式：6 个字重 × 正体/斜体。多数应用（如 Sketch、Adobe Illustrator、Adobe Photoshop）会自动根据当前字号把 Optical Size 轴设为合适值，部分应用还允许直接调节各变体轴。适合在 Sketch 中做网页视觉稿、在 Adobe 应用里做排版实验——因为可以实时拖动轴值观察字形变化。

Desktop/Static：9 个家族名，专为印刷与 PDF 导出设计

静态字体适合用于准备印刷或导出 PDF 的平面设计工作。当前即使 Adobe 应用能够使用可变字体，导出 PDF 时仍常出现兼容问题，因此大多数平面设计场景推荐使用静态字体。

静态字体安装后，每个字重包含正体与斜体，共6 个字重 + Italics，并按以下 9 个家族名组织（命名中的数字对应光学尺寸档位）：

这套"9pt / 72pt / 144pt × 常规 / Soft / SuperSoft"的家族结构，本质上是把opsz与SOFT两条轴"静态化"成离散的成品，让印刷设计师在不接触变体轴的前提下，也能精确选用对应的光学档与柔和度。

网页端使用建议：什么时候该用可变字体

README 明确指出："网页端才是可变字体真正大放异彩的地方"（Here's where variable fonts really shine）。判断标准非常实用：

• 如果你打算在 3 个或更多字号下使用两个字重（例如 Regular 与 Bold 同时出现在 16px、40px、100px 的场景），使用一个可变字体文件就能覆盖全部组合，相比加载多份静态字体文件，会开始节省文件体积；
• 如果你确实只需要某一两种样式的字体（比如只用 Regular 一种），那么加载静态网页字体反而更划算，不必为用不到的字重和轴付费。

简言之：样式组合多 → 可变字体省体积；样式组合少 → 静态字体更轻。这是"下载体积 vs 渲染样式冗余"之间的经典权衡。

仓库中的真实 @font-face 配置

beautiful-web-type 仓库为 Fraunces 提供了可直接对照的网页加载实现，见 css/src/typefaces/fraunces.css：

:root { --fraunces: 'Fraunces', serif; } .fraunces { font-family: "Fraunces", serif !important; } @font-face { font-family: "Fraunces"; font-weight: 100 900; src: url("/assets/fonts/fraunces/Fraunces.woff2") format("woff2-variations"); } @font-face { font-family: "Fraunces"; font-weight: 100 900; font-style: italic; src: url("/assets/fonts/fraunces/Fraunces-Italic.woff2") format("woff2-variations"); }

要点拆解：

• format("woff2-variations")是可变字体的标准格式声明，浏览器据此识别可变字体；
• font-weight: 100 900声明的是字重范围而非单一值，这正是可变字体在 CSS 中的写法；
• 正体与斜体分别声明一条@font-face，斜体用font-style: italic区分；
• 字体文件即仓库中的 Fraunces.woff2 与 Fraunces-Italic.woff2；
• 该文件通过 css/src/application.css 中的@import "./typefaces/fraunces.css";被引入全局样式，并在 app/[typefaceSlug]/page.tsx 渲染的字型详情页中为整个 Fraunces 页面提供字体。

网页端实战：在配对样例中组合四条轴

仅声明可变字体还不够，真正体现 Fraunces 能力的是对轴的组合运用。仓库中的配对样例 content/pairings/fraunces-and-libre-franklin/sample.html（标题文本 "Picasso / Love, Fame, Tragedy / Tate Modern"，与无衬线字体 Libre Franklin 搭配）展示了这一点。

其配套样式位于 css/src/pairing-samples.css：

.fraunces-and-libre-franklin-sample .text h1 { font: 200 var(--ms13)/0.8 var(--fraunces); font-variation-settings: "WONK" 1, "SOFT" 10, "opsz" 144; letter-spacing: -0.05em; text-transform: uppercase; } .fraunces-and-libre-franklin-sample .text h2 { font: 350 var(--ms7)/1 var(--fraunces); font-variation-settings: "WONK" 1, "SOFT" 60, "opsz" 90; letter-spacing: 0.0045em; text-transform: uppercase; }

这个真实案例提供了三条可复制的实战经验：

1. 多条轴在同一元素内用逗号串联："WONK" 1, "SOFT" 10, "opsz" 144一次声明三个轴的取值，这是font-variation-settings的标准写法；
2. 同一页面不同层级使用不同轴值：h1 走opsz 144（超大展示档）、SOFT 10（轻微柔和），h2 走opsz 90、SOFT 60（明显柔和）——通过轴值差异在同一字体内制造层次感，这正是可变字体相对静态字体的独特优势；
3. 与font-weight直接数值联动：font: 200 …与font: 350 …即wght轴的取值，配合可变字体的font-weight: 100 900范围，无需额外声明wght轴。

深度探索：Glyph Inspector 如何加载 Fraunces 可变字体

除了字体本身的样式配置，仓库还提供了一个将 Fraunces 字形完整可视化的 Glyph Inspector 页面（路由为app/[typefaceSlug]/glyphs/page.tsx，渲染 components/glyph-inspector.tsx）。Fraunces 的对应字形页配置在 content/typefaces/fraunces/glyphs.yml：

fontFile: /assets/fonts/fraunces/Fraunces.woff2

其底层加载逻辑在 lib/glyph-inspector-font-loader.ts 中：先通过fetch获取 WOFF2 字节流，再调用 WASM 版 wawoff2 解压器decompress还原为 TTF/OTF 数据，最后交给 opentype.js 的parse解析出字形轮廓与度量信息（unitsPerEm、head表等），绘制到 canvas 上。仓库测试 tests/glyph-inspector-font-loader.test.ts 验证了"先解压 WOFF2 再解析"这一调用链，并确保解压器只初始化一次。

对于想在自己的项目里做"字形浏览器 / 字体预览工具"的开发者，这条链路（fetch → wawoff2 解压 → opentype.js 解析 → canvas 绘制）是一个开箱即用的参考实现。

小结：按场景选型

综合 README 与仓库源码，Fraunces 的使用决策可以归纳为一张速查表：

在此基础上，配合font-variation-settings对wght、opsz、SOFT、WONK四条轴的组合控制，即可在同一字体内获得从"锐利传统 Old Style"到"超级柔和俏皮"的连续设计光谱。仓库中的 detail.html 与 pairing-samples.css 是验证各轴取值效果的最佳实测样例，css/src/typefaces/fraunces.css 则提供了可直接复制的网页加载配置。

• 前端