上传本地字体(.ttf / .otf / .woff / .woff2)或加载 Google Fonts,预览效果、读取元数据、检测字符覆盖。字体只在你的浏览器里注册使用,不上传。
不用装字体,直接把 .ttf / .otf / .woff / .woff2 拖进来预览,还能读元数据、检测字符覆盖、生成 @font-face 代码。也能填名字加载 Google Fonts。
@font-face 片段,Google 字体给 <link> + font-family。上传的字体只在浏览器里用 FontFace 注册,不上传服务器。Google 字体的文件由 Google 的 fonts.gstatic.com 提供。
| 术语 | 含义 |
|---|---|
| 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、字由等)。
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 和文件互转 · 特殊符号大全。