Tinkerfont icon

Tinkerfont

Tinkerfont 是一款适用于 Chrome 和 Firefox 的浏览器扩展,可在真实网站上检查和测试字体。支持用 Bunny Fonts 或自定义上传替换字体,限定到页面部分区域,并按站点保存规则。

Tinkerfont

概述

Tinkerfont 是一款用于测试实时网站排版的浏览器扩展和附加组件。它专为检查字体、用替代字体替换字体,以及在更改样式表或设计系统之前,查看它们在真实内容、布局和断点上的表现而设计。

该产品适用于 Chrome 和 Firefox,面向希望在上下文中评估字体选择的人。它支持右键字体检查、DOM 扫描、Bunny Fonts 搜索、自定义字体上传、元素范围限定,以及按主机名持久保存设置,因此可以在之后重新调出同一套测试环境。

功能

右键字体检查

从页面上下文菜单打开扩展,以检查实时排版细节,例如字体族、字重、字号、颜色、对比度以及可用的字体文件信息。

实时字体检测

扫描实时 DOM,查看页面上实际在用的字体族及其数量,然后针对某一种字体族,或使用通配符替换所有字体。

一键切换字体

搜索 Bunny Fonts 或上传自定义字体文件,然后在当前页面预览替换效果,无需编辑 CSS 或部署代码。

区域限定

选择特定元素,将字体变更限定到页面的某个部分,例如导航栏、表格或首屏区域,而不是影响整个站点。

按站点保存规则

按主机名保存替换规则和作用范围,这样在刷新页面或后续访问时,站点都能保持相同的预览设置。

导出和导入设置

将规则备份为 JSON 并在另一台浏览器中恢复;导入后需要重新上传自定义字体。

常见用例

  • 真实内容上的排版评审

    将替换字体与实际文章、落地页或界面进行比较,而不是只看静态模型,这样可以在上下文中测试间距、层级和可读性。

  • 实施前的字体测试

    在将 CSS 修改正式落地之前,先在预发布或生产页面上预览一份候选字体列表,从而减少在设计工具和代码之间来回切换的需要。

  • 限定区域测试

    当你只想一次评估某一个区域时,可以将字体实验限制在导航栏、首屏、表格或其他页面部分。

  • 实时字体审计

    检查页面字体、从上下文菜单复制值,并利用实时结果了解某个网站当前正在使用什么字体,然后再进行调整。

  • 浏览器间设置迁移

    通过导出配置并在其他位置导入,将一组既有字体规则迁移到另一台浏览器或设备。

Pros and Cons

Pros

  • 可直接在实时页面上工作,因此你可以结合真实内容和布局来判断字体选择。
  • 同时支持 Bunny Fonts 和已上传的字体文件,让你可以在目录搜索与自定义字体之间做选择。
  • 可将更改范围限定到页面的单个区域,而不是全站统一替换。
  • 按主机名保存规则,这在再次访问同一站点或预发布环境时很有帮助。
  • 提供导出和导入功能,便于在浏览器之间迁移设置。

Cons

  • 来源未显示定价层级,也未提供任何付费方案细节,只说明该产品可免费使用。
  • 有些页面无法测试,包括受限制的浏览器页面,例如 chrome:// URL 和 Chrome 网上应用店。
  • 自定义字体可以作为规则导出和导入,但在新设备上导入后,字体文件本身仍需要重新上传。

FAQ

Tinkerfont 有什么用途?

Tinkerfont 是一款用于在真实网站上进行字体原型设计的浏览器扩展。它可以让你检查页面上的字体,将其替换为 Bunny Fonts 或你自己上传的字体,并在更改 CSS 之前先在真实内容上查看效果。

Tinkerfont 是免费的吗?

是的。页面说明 Tinkerfont 可免费安装和使用,且可选的支持者捐助有助于资助开发。现有来源未提到付费方案或使用限制。

Tinkerfont 支持哪些浏览器?

Tinkerfont 可用于 Google Chrome 和 Mozilla Firefox。网站还说明,支持 Chrome 扩展的基于 Chromium 的浏览器可能可以使用 Chrome 版本,但 Chrome 和 Firefox 是其测试和发布支持的浏览器。

我可以在 Tinkerfont 中测试自己的字体吗?

你可以在“Custom”选项卡中上传 .woff2、.woff、.ttf 或 .otf 文件。该扩展还支持搜索 Bunny Fonts,并直接在页面上应用替换。

我可以保留或迁移我的字体设置吗?

可以。替换规则和区域范围会按主机名保存在本地存储中,扩展面板标题栏还提供导出和导入操作,因此你可以将设置移到另一台浏览器。

Quick Facts

类别
浏览器扩展
平台
Google Chrome, Mozilla Firefox
主要用途
在真实网站上进行字体检查和排版原型设计
来源域名
mighil.com
字体来源
Bunny Fonts 和自定义上传
存储
按主机名使用本地存储