反馈

字体查看

上传本地字体(.ttf / .otf / .woff / .woff2)或加载 Google Fonts,预览效果、读取元数据、检测字符覆盖。字体只在你的浏览器里注册使用,不上传。

点击或拖拽字体文件到这里(可多选)
预览设置
字号 40
字重
字间距 0
行高 1.4
颜色 背景
还没有加载字体,请上传或加载 Google 字体。

📖 工具说明

1. 这个工具做什么

不用装字体,直接把 .ttf / .otf / .woff / .woff2 拖进来预览,还能读元数据、检测字符覆盖、生成 @font-face 代码。也能填名字加载 Google Fonts。

上传的字体只在浏览器里用 FontFace 注册,不上传服务器。Google 字体的文件由 Google 的 fonts.gstatic.com 提供。

2. 元数据说明

术语 含义
Family Name CSS font-family 里用的族名(来自字体 name 表,可能和文件名不同)
Subfamily Regular / Bold / Italic 等样式名
Units per Em 字体设计坐标系的分辨率,常见 1000(OTF)或 2048(TTF),值越大控制越精细
Ascent / Descent 基线上下的设计高度,影响默认行距
字形数(Glyphs) 字体里的字形总数,中文字库通常上万
轮廓类型 TrueType(glyf)或 PostScript(CFF)

WOFF / WOFF2 是压缩格式,本工具不解压读内部表,只做预览和覆盖检测。想看它们的元数据,用 TTF / OTF 版本,或专门的字体软件(FontForge、字由等)。

3. 常见问题(FAQ)

Q:字符覆盖检测准吗? A:靠"用这个字体渲染出来的宽度和 fallback 是否不同"来判断,够看大类覆盖,但个别字形(尤其等宽或恰好同宽)可能误判。要严格核对请用能列 cmap 的字体软件。

Q:为什么 Google 字体没有元数据? A:Google Fonts 是通过 CSS @font-face 远程加载的,浏览器不把原始字体文件交给页面脚本,所以读不到 name 表。

Q:预览里字重 / 斜体没变化? A:单个字体文件通常只含一种字重。要看 Bold,得单独上传 Bold 的文件(或用可变字体)。CSS 里用 font-weight 只是尝试,不会凭空造出粗体。

Q:上传的字体安全吗? A:只在你的浏览器内存里注册,不发送到任何服务器。关掉页面即释放。

Q:能导出预览图吗? A:本版本移除了截图导出(自定义字体在截图库里常渲染不对)。需要的话直接用系统截图。


相关:颜色选择 · CSS 效果生成器 · 精灵图生成 · Base64 和文件互转 · 特殊符号大全。

📖 相关推荐