Tinkerfont 构建笔记分享

背景

作者自称是一位“通才”——设计、编码、以及许多与排版相关但并非核心职能的场合。无论是审查客户的预发布站点、接手他人编写的代码库，还是单纯觉得换个字体能让页面阅读体验更好，他经常面临同一个问题：当前页面实际使用了什么字体？换一种字体效果会怎样？浏览器开发者工具（DevTools）能提供部分信息，但缺乏一种快速在真实页面上试用字体并继续工作的方式。于是，Tinkerfont 作为一个小工具诞生，旨在填补这一空白。

核心内容

Tinkerfont 是什么

Tinkerfont 是一款浏览器扩展，用于在真实网站上检查、替换和测试字体。具体功能包括：

• 检查：右键点击任意文本，即可查看字体族、字重、字号、颜色和对比度信息，并可复制所需值。
• 检测：打开扩展面板，即可看到页面中所有使用的字体族及其出现次数。
• 替换：搜索 1,900 多种来自 Bunny Fonts 的开源字体，或上传自己的 .woff2、.woff、.ttf、.otf 字体文件。一键应用。
• 范围限定：可将替换限制在导航栏、英雄区域或页面中任意选定的区域。
• 持久化：替换规则按域名保存，支持导出/导入为 JSON 格式。

扩展完全免费，在 Chrome 和 Firefox 上均可使用，无需注册账号，所有数据保存在设备本地存储中。

发展历程

第一个版本仅支持字体替换——选中页面上的字体，尝试候选字体，滚动页面，然后决定是否保留。这个功能覆盖了作者在预发布环境和客户工作中最常遇到的需求：会议前快速验证、截图分享，无需创建分支或修改 CSS。

检查器功能是后来加入的。作者长期使用 Fontanello（一款字体检查工具），希望将类似的工作流内嵌到 Tinkerfont 中——右键查看详细信息并复制值。作者特别感谢 Lars 和 Fredrik 的启发。

Chrome 版本稳定后，作者将其移植到 Firefox：相同的面板、相同的规则、相同的本地优先模型。配套网站（mighil.com/tinkerfont）是一个小型着陆页与文档站，包含安装链接、入门指南、隐私政策和支持表单。

技术细节

扩展本身并不复杂：

• Chrome 版：Manifest V3，使用 Service Worker 作为后台脚本，内容脚本作用于 <all_urls>，浮动面板以 iframe 形式注入页面。
• 当页面发生变化（如 SPA 应用、懒加载内容）时，使用 Mutation Observer 重新应用已有规则，确保替换不会在导航后消失。
• 自定义上传的字体保存在本地。Bunny 字体目录是一个打包的 JSON 文件，每当 Bunny 添加新字体族时，通过一个小型 Node 脚本更新。
• Firefox 版：几乎共享同一套代码，仅需一个薄薄的浏览器兼容层（browser shim）、Firefox 专属的 manifest（包含 gecko id 和 AMO 数据收集声明），以及一些面板布局的 CSS 调整。

关键要点

• 核心定位：一个轻量级、无需登录、本地优先的浏览器扩展，用于实时替换和检查网页字体。
• 功能亮点：右键检查、一键替换、范围限定、规则持久化、支持自定义字体上传、支持 1,900+ 开源字体。
• 技术特点：基于 Manifest V3（Chrome）、Mutation Observer 处理动态内容、本地存储所有规则、Firefox 版本基本复用代码。
• 使用场景：设计师/开发者在预览站点或客户项目上快速验证字体效果，无需修改代码或启动新工具。
• 开源与免费：无账号要求，无付费墙，所有数据保存在用户设备上。
• 灵感来源：检查器功能受 Fontanello 启发，作者明确致谢其创作者 Lars 和 Fredrik。

意义与影响

Tinkerfont 代表了一种“小而美”的工具生态趋势：针对特定痛点提供极简、可离线的解决方案，避免重建设计系统或依赖复杂的设计工具。它填补了浏览器 DevTools 与专业设计软件之间的空白，让“现场试字体”这一高频需求变得即时可用。

从工作流角度看，Tinkerfont 将“检查-替换-评估”闭环压缩到浏览器右键菜单和浮层面板中，大幅降低了设计师和开发者在真实页面环境中的字体实验成本。同时，它坚持本地优先、无账户、无跟踪的设计理念，符合现代用户对隐私和轻量工具的需求。

此外，通过与 Bunny Fonts（一个注重隐私的开源字体库）集成，Tinkerfont 降低了获取和使用开源字体的门槛，鼓励网页设计中使用更丰富的排版资源，而无需担心许可或加载性能问题。这种“本地+开放”的组合，也为其他类似工具的设计提供了参考范式。