构建 Tinkerfont 的笔记2026 年 6 月 29 日一位多面手开发者既会设计又会编码。在很多工作场景中排版重要却非核心比如审核客户预发布网站、接手非自己编写的代码库、思考换字体让页面更易读等。开发者常问这里实际用的是什么字体换种字体效果会怎样开发者工具能解决部分问题但缺乏快速在实时页面试用字体并继续其他工作的方法。于是Tinkerfont 应运而生它最初是个小工具旨在填补这一空白。Tinkerfont 的功能Tinkerfont 是一款浏览器扩展程序可用于检查、替换和测试实时网站上的字体。其功能包括检查右键点击任何文本可查看字体家族、字重、字号、颜色和对比度等信息并复制所需内容检测打开面板可查看页面上使用的所有字体家族及其使用次数替换可从 Bunny Fonts 搜索 1900 多种开源字体也可上传自己的 .woff2、.woff、.ttf 或 .otf 字体文件一键应用范围限定可将字体替换范围限定在导航栏、页面头部或页面上的任意区域持久化规则会按域名保存可将设置导出和导入为 JSON 文件。该扩展程序可在 Chrome 和 Firefox 浏览器免费使用无需账号所有数据都保存在本地设备上。创意的发展历程最初版本主要功能是字体替换选择页面上现有字体尝试候选字体滚动页面并做出决策。这一功能满足了开发者在预发布网站和客户项目中常做的大部分工作需求如会议前快速直觉判断、截取屏幕截图分享无需创建分支和编辑 CSS。后来增加了检查器功能开发者多年来使用 Fontanello希望将其操作流程融入 Tinkerfont 中即右键点击查看详细信息并复制数值在此感谢 Lars 和 Fredrik 带来的灵感。在 Chrome 版本稳定后推出了 Firefox 版本它与 Chrome 版本拥有相同的面板、规则和以本地存储为主的模式。其网站是一个小型着陆页和文档网站提供安装链接、入门指南、隐私政策和支持表单等内容。开发笔记其底层实现没有特别复杂的技术。扩展程序Chrome 上采用 Manifest V3使用服务工作线程作为后台在 all_urls 上运行内容脚本通过 iframe 注入浮动面板。组件及功能如下content.js 检测字体、应用替换规则、处理限定区域并监听 DOM 变化bunny-font-loader.js 获取 Bunny Font 的 CSS并将字体面以内联数据 URL 的形式嵌入以便在严格的 CSP 网站上也能进行字体替换font-inspect.js 右键上下文菜单显示鼠标指针下的实时排版信息storage.js 按域名保存规则、区域、主题和自定义字体元数据全部存储在 chrome.storage.local 中popup.js panel.html 用户界面搜索、应用、导出/导入。当页面发生变化如单页应用或懒加载内容时突变观察器会重新应用激活的规则确保导航后字体替换效果不会消失。自定义上传的字体文件会保存在本地。Bunny 字体目录以 JSON 文件形式打包每当 Bunny 新增字体家族时会用一个小型 Node 脚本进行更新。Firefox 版本的构建与 Chrome 版本几乎使用相同的代码只是添加了一个轻量级的 browser 垫片使用了特定于 Firefox 的清单文件如 gecko ID、AMO 数据收集声明并针对面板布局差异进行了一些 CSS 调整。/tinkerfont 网站网站采用 Next.js 构建并通过 OpenNext 部署在 Cloudflare 上。内部页面为静态页面支持表单使用 Turnstile。首页有交互式扩展程序预览即 HTML iframe、一个带有懒加载海报的演示视频适用于移动设备以及常见的两种浏览器安装引导按钮。试用一下Chrome 可在 Chrome 网上应用店试用Firefox 可在 Firefox 附加组件试用。如果在工作中使用了该扩展程序欢迎联系开发者分享使用中遇到的问题或提出改进建议。