字体预览工具

用这台设备上已安装的任意字体预览你自己的文字，或上传字体文件，然后复制 CSS。

字体来源

当前字体

列出这台设备上安装的全部字体。仅 Chromium 系浏览器支持，浏览器会询问一次授权。

已上传字体

还没有上传字体。

支持 TTF、OTF、WOFF、WOFF2，单个文件不超过 20 MB。上传的字体只在当前页面内注册，不会发送到任何地方，刷新即失效。

文字与排版

字号 44 px

字重

字间距 0 px

行高 1.35

样式

大小写

文字颜色

#0f172a

背景颜色

#ffffff

对齐

预览

字体system-ui来源通用字族

字体是设计的声音，让每个字符都恰到好处 0123456789

字符集

CSS 代码

font-family: system-ui;
font-size: 44px;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
line-height: 1.35;
text-align: left;
text-transform: none;
color: #0f172a;
background-color: #ffffff;

什么是字体预览工具？

网上多数字体预览给你的都是同一份「网页安全字体」短名单——那份名单你早就会背，而且它对你机器上真正装了哪些字体只字不提。本页反过来，从你自己的系统出发。

字体有三个来源。通用字族（system-ui、sans-serif、serif、monospace）在任何浏览器里都能用。「读取本机字体」会通过浏览器的 Local Font Access API 枚举这台设备上安装的每一款字体并填入选择器——它们立刻就能渲染，因为字形本来就在你机器上，不需要下载任何文件。或者上传一个字体文件（TTF、OTF、WOFF、WOFF2），页面会在本次会话里注册它，这样你不必安装就能校样一款有授权的品牌字体。

选好字体，输入你自己的文字，再调字号、字重、样式、字间距、行高、颜色与对齐。字符集条会展示数字和标点在当前设置下的样子，CSS 代码块可以直接复制——当当前字体来自上传文件时，还会附上一份 @font-face 骨架。

你输入的文字和上传的文件都不会离开浏览器。

使用方法

快速上手

在「字体来源」面板里选一款字体。通用字族到处都能用；点「读取本机字体」可列出这台设备上安装的全部字体。
要用已有的字体文件预览，点「上传字体文件」选择 TTF、OTF、WOFF 或 WOFF2。它会在本次会话内注册，并出现在同一个选择器里。
输入要校样的文字——一句标题、一个按钮文案、一个产品名。
调整字号、字重、样式、字间距、行高、对齐方式、大小写和两种颜色。预览区应用的 CSS 属性与你在样式表里写的完全一致。
复制 CSS 代码块。上传字体的话还会附一份 @font-face 骨架，其中用原文件名占位，替换成你自己的托管路径即可。

让结果更可靠的几条经验

枚举出的清单是精确的，但它只描述这台设备。这里装了什么不代表访客装了什么——正式环境的样式表里一定要留回退栈。
读取本机字体仅 Chromium 系支持，且要求安全上下文（HTTPS 或 localhost）。Safari 和 Firefox 里按钮会隐藏并说明原因，上传功能照常可用。
一款字族若有多个字重或样式，在选择器里只出现一次。用字重控件和斜体开关在它实际提供的字面之间切换。
上传的字体只存在于内存中，刷新即丢失，也不会写入磁盘——这是有意为之，不是可以配置绕开的限制。
体积较大的中日韩字体（10 MB 以上）解析需要一点时间，字体解码完成后选择器会立即更新。

使用场景

校样授权字体或品牌字体上传文件，输入真实标题，用你打算上线的字号来读。不用安装，不会给系统留下任何副作用，文件也永远不会离开你的浏览器。

盘点某台机器上装了哪些字体点「读取本机字体」拿到精确清单。当设计交付稿假定了一款其实并不存在的字体，或者你需要知道客户机器上有哪几款候选字体时，这招很实用。

横向比较候选文件上传同一字族的两三个字重或不同字面，在固定字号下来回切换。因为文字始终不变，你比较的是字形本身，而不是靠记忆去回想。

调字间距与行高字间距和行高与字体强相关：几何无衬线字体在小字号下通常需要略松一点的字距，而中日韩文本能承受比拉丁文本更大的行高。拖动滑块，盯着字符集条看。

核对数字与标点等宽数字还是比例数字、1/4/7 的造型、@ # & 长什么样，在数据密集的界面里都是决定性的。字符集条会把它们按当前设置全部铺开，而不是藏在一整段文字里。

生成可直接粘贴的 CSS每个控件都会喂给 CSS 代码块。当前字体是上传字体时，还会一并输出带正确 format() 关键字的 @font-face 规则，你只差把 URL 换掉。

本机字体与上传字体分别是怎么处理的

这里用到两个彼此无关的浏览器 API，行为差别很大。

枚举已安装字体用 Local Font Access API：window.queryLocalFonts() 为每个已安装字面返回一条记录，含字族名、全名、PostScript 名和样式。页面按字族名归并、排序后交给选择器。渲染不需要下载——字族名直接交给 CSS，字形由操作系统提供，与你在自己样式表里写的完全一致。Chromium 系浏览器在一次性的授权之后提供该 API；Safari 和 Firefox 完全没有实现，所以那里是直接隐藏入口，而不是留着让它失败。

上传则用 Font Loading API：文件被读成 ArrayBuffer，交给 new FontFace(family, buffer)，load() 之后加进 document.fonts。从这一刻起，这款字体与任何其它字族没有区别，可以按名字在 CSS 里引用。

queryLocalFonts() 要求安全上下文（HTTPS 或 localhost），授权弹窗被关闭时会以 NotAllowedError 拒绝；面板会如实报告这两种情况，而不是抛异常。
同一字族可能以多个样式出现。清单按字族名去重，所以每款字体只出现一次，具体字面由样式控件决定。
FontFace 接受 TTF、OTF、WOFF、WOFF2。文件损坏或格式不支持时 load() 会 reject，页面会报错而不会在选择器里留下一个坏条目。
上传的字体只保存在内存中——不发网络请求、不写磁盘、不写 localStorage。所以它无法跨刷新存活。
通用字族由浏览器内部解析，完全不需要 API，这也是为什么在另外两条路都走不通的环境里它依然可用。

示例

列出本机已安装的字体

const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]

const families = [...new Set(faces.map((f) => f.family))].sort();

// 选中后直接交给 CSS：字形由操作系统提供，不下载任何文件
element.style.fontFamily = `"${families[0]}", sans-serif`;

注册一个上传的字体文件

const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load();        // 文件损坏或格式不支持时这里会 reject
document.fonts.add(face);

// 之后与本机字体完全同构
element.style.fontFamily = '"Aurora Sans", sans-serif';

上传字体对应的 CSS 代码块

@font-face {
  font-family: "Aurora Sans";
  src: url("./AuroraSans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;

/* src 里的路径是占位，换成你自己托管的地址 */

常见问题

为什么我的浏览器里没有「读取本机字体」按钮？

Local Font Access API 只在 Chromium 系浏览器（Chrome、Edge、Opera、Brave）里实现，而且要求安全来源（HTTPS 或 localhost）。Safari 和 Firefox 里该按钮会隐藏，面板会说明原因——上传字体文件和通用字族这两条路都照常可用。

读取已安装字体会向服务器发送什么吗？

不会。浏览器会先弹一次授权，你同意之后页面只拿到字族名和样式名。不会读取任何字体数据，不会上传，这份清单也不会被传输到任何地方。

我上传的字体会被存储或发送到哪里吗？

都不会。文件被读进内存、注册进浏览器的字体集合，关闭或刷新页面即被丢弃。没有网络请求，不写磁盘，也不写 localStorage。

为什么刷新之后上传的字体就没了？

因为页面刻意只把它放在内存里。要持久化就得把字体文件写进浏览器存储，而一个预览工具没有理由留一份你本来就有的文件的副本。继续用的话重新上传即可。

可以上传哪些格式？

TTF、OTF、WOFF、WOFF2，单个文件不超过 20 MB——这是浏览器 FontFace 接受的四种容器格式。TrueType 集合（.ttc）把多个字面打包在一个文件里，暂不支持，请分别导出单个字面。

为什么某些字重看着不对劲、过粗？

字族里没有你要的字重时，浏览器会合成：伪粗体是把轮廓加粗描边，伪斜体是把字形整体倾斜。如果 600 发糊而 400 和 700 都正常，基本就是这个字族本身没有 600。

能用它查到访客装了哪些字体吗？

不能，任何网站都不能。枚举必须经过访客自己机器上的显式授权弹窗，所以页面永远无法在用户不知情的情况下清点陌生人的字体。你看到的清单只描述这台设备，这正是正式样式表里要写回退栈的原因。

@font-face 的 src 里该填什么？

填你自己的构建产物托管该字体文件的路径，例如 /fonts/AuroraSans.woff2。页面已经根据扩展名生成了正确的 format() 关键字，你只需要替换 URL。