3行代码手写FontFamily解析 避开版本升级API全变的坑
刚把项目里的字体加载库从 2.0 升到 3.0，结果构建直接炸了。报错信息满屏飘，核心原因是 fontFamily 属性的解析逻辑彻底重构了。老版本里那个熟悉的 FontLoader 接口不见了，取而代之的是一堆异步 Promise 和 Web Font 加载队列。对于应届生来说，这种版本迭代带来的 API 突变最让人头大，查文档像看天书，看源码又觉得太抽象。
别慌，这种底层机制其实没那么多玄学。今天我们就跳过那些花哨的配置，直接钻进核心源码，看看 fontfamily 到底是怎么被解析、匹配和应用的。我们会用 手写实现 一个极简版的字体管理器，把黑盒变成白盒。当你能自己写出一个能用的 FontFamilyParser，再回头去看 NPM 官方包里那些复杂的代码，你会发现那些看似冗余的设计其实都有迹可循。
入口定位：字体解析的起点在哪里
在大多数现代前端框架或 CSS 引擎中，fontfamily 的处理并不是发生在渲染阶段，而是发生在样式计算（Style Computation）阶段。如果你打开任何主流浏览器（如 Chrome 或 Firefox）的开发者工具，选中一个元素，查看 Computed 样式，你会发现 font-family 的值往往是一个逗号分隔的字符串，比如 'Inter', sans-serif, system-ui。
这个字符串并不是直接传给操作系统或字体的，它需要被拆解成一个个具体的字体候选项。真正的入口通常在样式引擎的 StyleResolver 或 FontMatcher 模块中。
以 NPM 上广泛使用的 css-font-parser 或类似工具包为例，其核心入口函数通常长这样：
// 伪代码：简化版入口逻辑
function resolveFontFamily(rawString) {// 1. 清洗输入：去除首尾空格const cleaned = rawString.trim();// 2. 分割候选字体const candidates = cleaned.split(',').map(f = f.trim());// 3. 过滤无效项（如空字符串）const validCandidates = candidates.filter(c = c.length 0);// 4. 进入匹配逻辑return matchFontCandidates(validCandidates);
}这里的关键在于 分割与清洗。很多新手会忽略一个问题：字体名称可能包含空格，比如 font-family: 'My Custom Font', Arial;。如果简单地用 split(',')，虽然能分开字体，但如果字体名本身包含逗号（极少见但合法），就会出错。更复杂的是，字体名如果是未加引号的普通标识符，中间不能有空格，除非整个名字被引号包裹。
NPM 官方包 fontfaceobserver 或 typeface 在底层处理时，会调用更严格的解析器，它们会检查每个 token 是否被引号包围，以及是否包含非法字符。这就是为什么你在写 CSS 时，带空格的字体名必须加引号。
核心片段：字体候选的匹配算法
接下来是核心部分：如何从一堆候选字体中找到真正可用的那一个？
浏览器的行为是：按顺序遍历候选列表，检查当前字体是否已在系统中安装，或者是否已通过 @font-face 规则加载完成。如果第一个没找到，就尝试第二个，直到找到为止。如果所有都失败，就回退到浏览器默认字体。
我们来看一段简化的核心匹配逻辑，这段代码模拟了浏览器内部的 FontMatch 过程：
/*** 模拟浏览器字体匹配核心逻辑* @param {string[]} candidates - 字体名称数组，按优先级排序* @param {Mapstring, boolean} loadedFonts - 已加载字体的缓存 Map* @returns {string} 最终匹配的字体名称*/
function matchFontCandidates(candidates, loadedFonts) {// 默认回退字体const fallback = 'sans-serif';// 遍历每个候选字体for (let i = 0; i candidates.length; i++) {let currentFont = candidates[i];// 去除可能的引号if ((currentFont.startsWith(') currentFont.endsWith(')) || (currentFont.startsWith('') currentFont.endsWith(''))) {currentFont = currentFont.slice(1, -1);}// 检查是否为通用族（generic family）// 通用族包括: serif, sans-serif, monospace, cursive, fantasyconst genericFamilies = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy'];if (genericFamilies.includes(currentFont)) {// 通用族直接作为回退，不检查加载状态return currentFont;}// 检查特定字体是否已加载// 在实际引擎中，这里会查询操作系统字体列表或 Web Font 加载状态if (loadedFonts.has(currentFont)) {// 找到可用字体，立即返回console.log(`Matched font: ${currentFont}`);return currentFont;}// 如果未加载，继续尝试下一个候选}// 所有特定字体都失败，使用默认回退console.log(`No specific font matched, falling back to: ${fallback}`);return fallback;
}逐行解析：引号处理：真实场景中，字体名可能带引号。这里手动剥离引号，确保比较时的一致性。
通用族判断：sans-serif 等不是具体字体文件，而是分类。浏览器对这类关键词有特殊处理，直接映射到系统默认字体，不需要检查“加载状态”。
加载状态检查：loadedFonts 是一个内存中的 Map。在真实浏览器中，这个状态由 FontFaceSet 对象维护。对于 Web Font，需要等待 load() 方法 Promise resolve 后，才会加入这个 Map。
短路返回：一旦找到第一个可用的字体，立即返回，不再检查后续候选。这保证了性能，因为字体匹配在每帧渲染中都可能发生。设计思想：为什么是“候选列表”而不是“单一字体”
很多初学者会问：为什么不直接指定一个字体文件路径，而要搞这么长的列表？
这里涉及 渐进增强（Progressive Enhancement） 和 可用性（Usability） 的设计哲学。
第一，兼容性与回退机制。
如果用户系统中没有安装 Inter 字体，且网络慢导致 Web Font 还没加载完，页面就不能显示了吗？显然不行。通过提供 sans-serif 作为最后兜底，保证了文字在任何情况下都能以某种形式渲染出来。这是前端开发的底线：永不空白。
第二，性能优化。
字体文件通常较大（几十 KB 到几 MB）。如果每个页面都强制加载所有字体，首屏加载时间会爆炸。fontfamily 的列表机制允许开发者将常用字体放在前面，不常用的字体放在后面，甚至只在特定交互时才加载。浏览器只在需要时才会去下载和解析字体文件，这是一种懒加载策略。
第三，跨平台一致性。
不同操作系统（Windows, macOS, Linux）自带的字体不同。Arial 在 Windows 上很常见，但在 Linux 上可能没有。而 DejaVu Sans 在 Linux 上是默认的。通过提供多个候选，开发者可以确保在不同平台上获得视觉上尽可能接近的效果。
NPM 包 fontfaceobserver 的设计就体现了这一点。它不仅管理字体的加载，还通过 document.fonts API 监听字体加载完成事件，只有在字体真正可用后，才将元素从“隐藏”状态切换为“可见”状态，避免字体切换导致的布局抖动（FOIT/FOUT 问题）。
手写简化版：一个可用的 FontFamily 管理器
理解了原理，我们来 手写实现 一个简化版的字体管理器。这个实现不依赖任何第三方库，仅使用原生 JavaScript，适合用于学习或小型项目。
我们将实现以下功能：解析 font-family 字符串。
模拟字体加载状态。
提供匹配方法。class FontFamilyManager {constructor() {// 存储已加载字体的集合this.loadedFonts = new Set();// 存储字体加载 Promise，防止重复加载this.loadingPromises = new Map();}/*** 解析字体字符串为数组* @param {string} fontFamilyStr - CSS font-family 值* @returns {string[]} 字体名称数组*/parseFontFamily(fontFamilyStr) {if (!fontFamilyStr) return [];// 使用正则表达式处理带引号和不带引号的字体名// 匹配 'xxx' 或 xxx 或 普通标识符const regex = /'([^']+)'|([^]+)|([^,]+)(?=\s*,|\s*$)/g;const matches = [];let match;while ((match = regex.exec(fontFamilyStr)) !== null) {// match[1] 是单引号内容, match[2] 是双引号内容, match[3] 是普通内容const fontName = (match[1] || match[2] || match[3]).trim();if (fontName) {matches.push(fontName);}}return matches;}/*** 模拟加载字体* 在实际项目中，这里会创建 FontFace 对象并调用 load()* @param {string} fontName - 字体名称* @returns {Promisevoid}*/loadFont(fontName) {// 如果已加载，直接返回if (this.loadedFonts.has(fontName)) {return Promise.resolve();}// 如果正在加载，返回同一个 Promiseif (this.loadingPromises.has(fontName)) {return this.loadingPromises.get(fontName);}// 创建新的加载 Promiseconst promise = new Promise((resolve) = {// 模拟网络延迟setTimeout(() = {this.loadedFonts.add(fontName);this.loadingPromises.delete(fontName);resolve();}, 500); // 模拟 500ms 加载时间});this.loadingPromises.set(fontName, promise);return promise;}/*** 获取匹配的字体* @param {string} fontFamilyStr - CSS font-family 值* @returns {Promisestring} 最终匹配的字体名*/async getMatchedFont(fontFamilyStr) {const candidates = this.parseFontFamily(fontFamilyStr);const genericFamilies = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy'];for (const candidate of candidates) {// 如果是通用族，直接返回if (genericFamilies.includes(candidate)) {return candidate;}// 检查是否已加载if (this.loadedFonts.has(candidate)) {return candidate;}// 尝试加载（可选策略：是否自动加载未加载的字体）// 这里我们选择不自动加载，仅检查已加载的// 如果需要自动加载，可以调用 await this.loadFont(candidate)}// 默认回退return 'sans-serif';}
}// 使用示例
const manager = new FontFamilyManager();// 模拟加载第一个字体
manager.loadFont('Inter').then(() = {return manager.getMatchedFont('Inter', 'Arial', sans-serif);
}).then(matched = {console.log(Matched Font:, matched); // 输出: Inter
});// 测试回退逻辑
manager.getMatchedFont('NonExistentFont', 'Arial', sans-serif).then(matched = {console.log(Matched Font (Fallback):, matched); // 输出: Arial (假设 Arial 已加载) // 如果 Arial 未加载，则输出 sans-serif
});代码亮点：正则解析：使用强大的正则表达式 /'([^']+)'|([^]+)|([^,]+)(?=\s*,|\s*$)/g 准确提取字体名。这是处理带引号字符串的通用技巧。
Promise 缓存：通过 loadingPromises Map 防止重复加载同一字体。这是并发控制中的经典模式，避免网络请求冗余。
异步匹配：getMatchedFont 是异步方法，因为字体加载是异步的。在实际应用中，UI 更新需要等待字体加载完成。应用场景与避坑指南
理解了 fontfamily 的底层逻辑，我们在实际开发中就能避开很多坑。
1. 避免布局抖动（FOUT/FOIT）
如果字体加载很慢，页面会先显示默认字体，字体加载完后再切换，导致文字宽度变化，布局跳动。解决方案：使用 font-display: swap 或 optional。swap 表示先显示回退字体，字体加载完后立即切换；optional 表示如果字体加载时间超过指定阈值（通常 100ms），则放弃加载，直接使用回退字体。
手写实现中的应用：在我们的 FontFamilyManager 中，可以添加一个超时机制，如果 loadFont 超时未 resolve，则标记该字体为不可用，直接回退。2. 字体子集化（Subsetting）
中文 Web Font 通常很大（几 MB）。NPM 包 fontmin 或 subset-font 可以帮助提取页面中实际使用的字符，生成更小的字体文件。应用场景：在构建阶段，分析 HTML 中的文本内容，提取字符集，生成子集字体。运行时，fontfamily 指向的子集字体文件更小，加载更快。3. 动态字体加载
根据用户偏好或 A/B 测试动态切换字体。实现：通过 JS 动态修改 style.fontFamily 或 CSS 变量 --main-font。我们的 FontFamilyManager 可以轻松支持这种动态切换，只需重新调用 getMatchedFont 即可。4. 版本升级后的 API 变化
回到开头的痛点。版本升级后，API 全变了。但底层原理没变。无论 API 如何变化，核心都是：解析 - 匹配 - 加载 - 回退。应对策略：学习底层原理，而不是死记 API。当 API 变化时，你能快速理解新 API 的设计意图，并找到对应关系。例如，新 API 可能引入了 FontFaceSet 对象，但其本质还是维护一个已加载字体的集合，供匹配使用。总结与互动
通过 手写实现 一个简化的 FontFamily 解析器，我们拆解了 fontfamily 从字符串到渲染字体的全过程。这个过程涉及字符串解析、异步加载、匹配算法和回退机制。
对于应届生来说，掌握这种底层机制，能让你在面试中展现出深度，也能在实际工作中快速定位问题。不要只停留在“会用”的层面，要理解“为什么这样设计”。
你更常用哪种写法？是直接在 CSS 中写 font-family 列表，还是通过 JS 动态管理字体加载？评论区交流一下你的经验，特别是遇到过哪些字体加载的坑？ 3行代码手写FontFamily解析 避开版本升级API全变的坑
3行代码手写FontFamily解析 避开版本升级API全变的坑
刚把项目里的字体加载库从 2.0 升到 3.0，结果构建直接炸了。报错信息满屏飘，核心原因是 fontFamily 属性的解析逻辑彻底重构了。老版本里那个熟悉的 FontLoader 接口不见了，取而代之的是一堆异步 Promise 和 Web Font 加载队列。对于应届生来说，这种版本迭代带来的 API 突变最让人头大，查文档像看天书，看源码又觉得太抽象。
别慌，这种底层机制其实没那么多玄学。今天我们就跳过那些花哨的配置，直接钻进核心源码，看看 fontfamily 到底是怎么被解析、匹配和应用的。我们会用 手写实现 一个极简版的字体管理器，把黑盒变成白盒。当你能自己写出一个能用的 FontFamilyParser，再回头去看 NPM 官方包里那些复杂的代码，你会发现那些看似冗余的设计其实都有迹可循。
入口定位：字体解析的起点在哪里
在大多数现代前端框架或 CSS 引擎中，fontfamily 的处理并不是发生在渲染阶段，而是发生在样式计算（Style Computation）阶段。如果你打开任何主流浏览器（如 Chrome 或 Firefox）的开发者工具，选中一个元素，查看 Computed 样式，你会发现 font-family 的值往往是一个逗号分隔的字符串，比如 'Inter', sans-serif, system-ui。
这个字符串并不是直接传给操作系统或字体的，它需要被拆解成一个个具体的字体候选项。真正的入口通常在样式引擎的 StyleResolver 或 FontMatcher 模块中。
以 NPM 上广泛使用的 css-font-parser 或类似工具包为例，其核心入口函数通常长这样：
// 伪代码：简化版入口逻辑
function resolveFontFamily(rawString) {// 1. 清洗输入：去除首尾空格const cleaned = rawString.trim();// 2. 分割候选字体const candidates = cleaned.split(',').map(f = f.trim());// 3. 过滤无效项（如空字符串）const validCandidates = candidates.filter(c = c.length 0);// 4. 进入匹配逻辑return matchFontCandidates(validCandidates);
}这里的关键在于 分割与清洗。很多新手会忽略一个问题：字体名称可能包含空格，比如 font-family: 'My Custom Font', Arial;。如果简单地用 split(',')，虽然能分开字体，但如果字体名本身包含逗号（极少见但合法），就会出错。更复杂的是，字体名如果是未加引号的普通标识符，中间不能有空格，除非整个名字被引号包裹。
NPM 官方包 fontfaceobserver 或 typeface 在底层处理时，会调用更严格的解析器，它们会检查每个 token 是否被引号包围，以及是否包含非法字符。这就是为什么你在写 CSS 时，带空格的字体名必须加引号。
核心片段：字体候选的匹配算法
接下来是核心部分：如何从一堆候选字体中找到真正可用的那一个？
浏览器的行为是：按顺序遍历候选列表，检查当前字体是否已在系统中安装，或者是否已通过 @font-face 规则加载完成。如果第一个没找到，就尝试第二个，直到找到为止。如果所有都失败，就回退到浏览器默认字体。
我们来看一段简化的核心匹配逻辑，这段代码模拟了浏览器内部的 FontMatch 过程：
/*** 模拟浏览器字体匹配核心逻辑* @param {string[]} candidates - 字体名称数组，按优先级排序* @param {Mapstring, boolean} loadedFonts - 已加载字体的缓存 Map* @returns {string} 最终匹配的字体名称*/
function matchFontCandidates(candidates, loadedFonts) {// 默认回退字体const fallback = 'sans-serif';// 遍历每个候选字体for (let i = 0; i candidates.length; i++) {let currentFont = candidates[i];// 去除可能的引号if ((currentFont.startsWith(') currentFont.endsWith(')) || (currentFont.startsWith('') currentFont.endsWith(''))) {currentFont = currentFont.slice(1, -1);}// 检查是否为通用族（generic family）// 通用族包括: serif, sans-serif, monospace, cursive, fantasyconst genericFamilies = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy'];if (genericFamilies.includes(currentFont)) {// 通用族直接作为回退，不检查加载状态return currentFont;}// 检查特定字体是否已加载// 在实际引擎中，这里会查询操作系统字体列表或 Web Font 加载状态if (loadedFonts.has(currentFont)) {// 找到可用字体，立即返回console.log(`Matched font: ${currentFont}`);return currentFont;}// 如果未加载，继续尝试下一个候选}// 所有特定字体都失败，使用默认回退console.log(`No specific font matched, falling back to: ${fallback}`);return fallback;
}逐行解析：引号处理：真实场景中，字体名可能带引号。这里手动剥离引号，确保比较时的一致性。
通用族判断：sans-serif 等不是具体字体文件，而是分类。浏览器对这类关键词有特殊处理，直接映射到系统默认字体，不需要检查“加载状态”。
加载状态检查：loadedFonts 是一个内存中的 Map。在真实浏览器中，这个状态由 FontFaceSet 对象维护。对于 Web Font，需要等待 load() 方法 Promise resolve 后，才会加入这个 Map。
短路返回：一旦找到第一个可用的字体，立即返回，不再检查后续候选。这保证了性能，因为字体匹配在每帧渲染中都可能发生。设计思想：为什么是“候选列表”而不是“单一字体”
很多初学者会问：为什么不直接指定一个字体文件路径，而要搞这么长的列表？
这里涉及 渐进增强（Progressive Enhancement） 和 可用性（Usability） 的设计哲学。
第一，兼容性与回退机制。
如果用户系统中没有安装 Inter 字体，且网络慢导致 Web Font 还没加载完，页面就不能显示了吗？显然不行。通过提供 sans-serif 作为最后兜底，保证了文字在任何情况下都能以某种形式渲染出来。这是前端开发的底线：永不空白。
第二，性能优化。
字体文件通常较大（几十 KB 到几 MB）。如果每个页面都强制加载所有字体，首屏加载时间会爆炸。fontfamily 的列表机制允许开发者将常用字体放在前面，不常用的字体放在后面，甚至只在特定交互时才加载。浏览器只在需要时才会去下载和解析字体文件，这是一种懒加载策略。
第三，跨平台一致性。
不同操作系统（Windows, macOS, Linux）自带的字体不同。Arial 在 Windows 上很常见，但在 Linux 上可能没有。而 DejaVu Sans 在 Linux 上是默认的。通过提供多个候选，开发者可以确保在不同平台上获得视觉上尽可能接近的效果。
NPM 包 fontfaceobserver 的设计就体现了这一点。它不仅管理字体的加载，还通过 document.fonts API 监听字体加载完成事件，只有在字体真正可用后，才将元素从“隐藏”状态切换为“可见”状态，避免字体切换导致的布局抖动（FOIT/FOUT 问题）。
手写简化版：一个可用的 FontFamily 管理器
理解了原理，我们来 手写实现 一个简化版的字体管理器。这个实现不依赖任何第三方库，仅使用原生 JavaScript，适合用于学习或小型项目。
我们将实现以下功能：解析 font-family 字符串。
模拟字体加载状态。
提供匹配方法。class FontFamilyManager {constructor() {// 存储已加载字体的集合this.loadedFonts = new Set();// 存储字体加载 Promise，防止重复加载this.loadingPromises = new Map();}/*** 解析字体字符串为数组* @param {string} fontFamilyStr - CSS font-family 值* @returns {string[]} 字体名称数组*/parseFontFamily(fontFamilyStr) {if (!fontFamilyStr) return [];// 使用正则表达式处理带引号和不带引号的字体名// 匹配 'xxx' 或 xxx 或 普通标识符const regex = /'([^']+)'|([^]+)|([^,]+)(?=\s*,|\s*$)/g;const matches = [];let match;while ((match = regex.exec(fontFamilyStr)) !== null) {// match[1] 是单引号内容, match[2] 是双引号内容, match[3] 是普通内容const fontName = (match[1] || match[2] || match[3]).trim();if (fontName) {matches.push(fontName);}}return matches;}/*** 模拟加载字体* 在实际项目中，这里会创建 FontFace 对象并调用 load()* @param {string} fontName - 字体名称* @returns {Promisevoid}*/loadFont(fontName) {// 如果已加载，直接返回if (this.loadedFonts.has(fontName)) {return Promise.resolve();}// 如果正在加载，返回同一个 Promiseif (this.loadingPromises.has(fontName)) {return this.loadingPromises.get(fontName);}// 创建新的加载 Promiseconst promise = new Promise((resolve) = {// 模拟网络延迟setTimeout(() = {this.loadedFonts.add(fontName);this.loadingPromises.delete(fontName);resolve();}, 500); // 模拟 500ms 加载时间});this.loadingPromises.set(fontName, promise);return promise;}/*** 获取匹配的字体* @param {string} fontFamilyStr - CSS font-family 值* @returns {Promisestring} 最终匹配的字体名*/async getMatchedFont(fontFamilyStr) {const candidates = this.parseFontFamily(fontFamilyStr);const genericFamilies = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy'];for (const candidate of candidates) {// 如果是通用族，直接返回if (genericFamilies.includes(candidate)) {return candidate;}// 检查是否已加载if (this.loadedFonts.has(candidate)) {return candidate;}// 尝试加载（可选策略：是否自动加载未加载的字体）// 这里我们选择不自动加载，仅检查已加载的// 如果需要自动加载，可以调用 await this.loadFont(candidate)}// 默认回退return 'sans-serif';}
}// 使用示例
const manager = new FontFamilyManager();// 模拟加载第一个字体
manager.loadFont('Inter').then(() = {return manager.getMatchedFont('Inter', 'Arial', sans-serif);
}).then(matched = {console.log(Matched Font:, matched); // 输出: Inter
});// 测试回退逻辑
manager.getMatchedFont('NonExistentFont', 'Arial', sans-serif).then(matched = {console.log(Matched Font (Fallback):, matched); // 输出: Arial (假设 Arial 已加载) // 如果 Arial 未加载，则输出 sans-serif
});代码亮点：正则解析：使用强大的正则表达式 /'([^']+)'|([^]+)|([^,]+)(?=\s*,|\s*$)/g 准确提取字体名。这是处理带引号字符串的通用技巧。
Promise 缓存：通过 loadingPromises Map 防止重复加载同一字体。这是并发控制中的经典模式，避免网络请求冗余。
异步匹配：getMatchedFont 是异步方法，因为字体加载是异步的。在实际应用中，UI 更新需要等待字体加载完成。应用场景与避坑指南
理解了 fontfamily 的底层逻辑，我们在实际开发中就能避开很多坑。
1. 避免布局抖动（FOUT/FOIT）
如果字体加载很慢，页面会先显示默认字体，字体加载完后再切换，导致文字宽度变化，布局跳动。解决方案：使用 font-display: swap 或 optional。swap 表示先显示回退字体，字体加载完后立即切换；optional 表示如果字体加载时间超过指定阈值（通常 100ms），则放弃加载，直接使用回退字体。
手写实现中的应用：在我们的 FontFamilyManager 中，可以添加一个超时机制，如果 loadFont 超时未 resolve，则标记该字体为不可用，直接回退。2. 字体子集化（Subsetting）
中文 Web Font 通常很大（几 MB）。NPM 包 fontmin 或 subset-font 可以帮助提取页面中实际使用的字符，生成更小的字体文件。应用场景：在构建阶段，分析 HTML 中的文本内容，提取字符集，生成子集字体。运行时，fontfamily 指向的子集字体文件更小，加载更快。3. 动态字体加载
根据用户偏好或 A/B 测试动态切换字体。实现：通过 JS 动态修改 style.fontFamily 或 CSS 变量 --main-font。我们的 FontFamilyManager 可以轻松支持这种动态切换，只需重新调用 getMatchedFont 即可。4. 版本升级后的 API 变化
回到开头的痛点。版本升级后，API 全变了。但底层原理没变。无论 API 如何变化，核心都是：解析 - 匹配 - 加载 - 回退。应对策略：学习底层原理，而不是死记 API。当 API 变化时，你能快速理解新 API 的设计意图，并找到对应关系。例如，新 API 可能引入了 FontFaceSet 对象，但其本质还是维护一个已加载字体的集合，供匹配使用。总结与互动
通过 手写实现 一个简化的 FontFamily 解析器，我们拆解了 fontfamily 从字符串到渲染字体的全过程。这个过程涉及字符串解析、异步加载、匹配算法和回退机制。
对于应届生来说，掌握这种底层机制，能让你在面试中展现出深度，也能在实际工作中快速定位问题。不要只停留在“会用”的层面，要理解“为什么这样设计”。
你更常用哪种写法？是直接在 CSS 中写 font-family 列表，还是通过 JS 动态管理字体加载？评论区交流一下你的经验，特别是遇到过哪些字体加载的坑？