在线字体预览
上传 TTF / OTF / WOFF 字体文件实时预览效果 · 自定义文本 / 字号 / 颜色 / 多组对比
上传字体文件实时预览
上传 TTF / OTF / WOFF 字体文件实时预览效果 · 自定义文本 / 字号 / 颜色 / 多组对比
支持 .ttf / .otf / .woff / .woff2 · 可多选对比
了解工具定位 · 使用场景 · 对比优势
品牌设计师在确定 Logo 和标题字体时,从几十个候选字体中反复对比。上传字体文件后,本工具提供实时预览,支持输入品牌名、Slogan 等核心文案,并可在不同字号下观察笔画细节和字距变化,避免因预览图与实物差异导致的返工。
前端开发者在集成自定义字体前,需要确认字体在屏幕上的渲染效果。上传 woff2 或 ttf 文件,本工具可模拟不同操作系统(Windows/macOS)下的抗锯齿表现,并测试中文全角符号、英文连字等特殊字符的显示完整性,确保上线后无乱码或错位。
印刷公司客户经理在打样前,需向客户展示字体在 8pt 小字和 72pt 大标题下的实际观感。上传字体文件后,本工具支持同时预览正文、标题、标注三种字号的渲染效果,并可通过滑动条快速切换字号,帮助客户在数码打样前就确认字体选择。
字体设计师在完成字库后,需逐字检查笔画交叉处是否粘连、标点符号是否对齐。本工具支持输入特定字符组合(如「一」「丨」「丿」等基础笔画),并可在放大至 400% 时观察节点和轮廓曲线,快速定位字形结构异常。
| 维度 | 本工具 | FontDrop! | 本地安装字体软件 |
|---|---|---|---|
| 数据隐私 | 纯浏览器处理,字体文件不上传服务器 | 纯浏览器处理,文件不上传服务器 | 字体文件需安装到系统,可能被其他应用读取 |
| 处理速度 | 即时预览(毫秒级) | 即时预览(毫秒级) | 需完成系统安装流程(数秒至数分钟) |
| 离线可用 | 需网络加载页面,加载后可离线使用 | 需网络加载页面,加载后可离线使用 | 完全离线 |
| 安装依赖 | 无需安装任何软件 | 无需安装任何软件 | 需安装字体管理软件(如 FontBook、FontForge) |
| 多字体对比 | 支持同时上传多个字体文件并排对比 | 单次仅预览一个字体文件 | 需手动切换系统字体,对比效率低 |
| 临时预览 | 预览即用即走,不污染系统字体库 | 预览即用即走,不污染系统字体库 | 预览后需手动删除字体,否则永久占用系统资源 |
| 平台兼容 | 任何现代浏览器(Windows/macOS/Linux/移动端) | 仅支持桌面端浏览器 | 需特定操作系统版本支持 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| 上传一个包含中文、英文、数字的 .ttf 字体文件(如:思源黑体 Regular.ttf) | 字体预览区域显示该字体的中文、英文、数字字符样本,并展示“字体名称:Source Han Sans SC Regular”等信息。 | 典型场景:用户需要查看一款新字体在多种字符下的显示效果。 |
| 上传一个仅包含英文字符的 .otf 字体文件(如:Helvetica Neue.otf) | 字体预览区域显示英文字符样本,中文字符区域显示为空白或默认回退字体。 | 边界 case:字体文件不包含中文字符集时的预览表现。 |
| 上传一个 .woff2 格式的字体文件(如:Noto Sans SC.woff2) | 字体预览区域正常显示该字体的字符样本,并正确识别为 Web 开放字体格式。 | 典型场景:用户使用 Web 项目中的 woff2 字体文件进行本地预览。 |
| 上传一个非字体文件(如:.jpg 图片文件或 .txt 文本文件) | 页面提示“上传失败:文件格式不支持,请上传 .ttf、.otf、.woff、.woff2 格式的字体文件”。 | 易错 case:用户误传非字体文件时的错误提示。 |
| 上传一个损坏的 .ttf 字体文件(如:文件头被破坏的字体) | 页面提示“字体解析失败:文件可能已损坏或格式不正确”。 | 边界 case:文件格式正确但内容损坏时的处理。 |
| 上传一个文件大小超过 50MB 的大型字体文件(如:包含超多字形的中文字体包) | 页面提示“文件过大:请上传小于 50MB 的字体文件”,或显示加载进度条后成功预览。 | 边界 case:大型字体文件的上传限制与加载性能。 |
| 上传一个 .ttc 集合字体文件(如:微软雅黑.ttc) | 页面提示“不支持 .ttc 格式,请提取单个字体文件(.ttf/.otf)后上传”。 | 易错 case:用户混淆 .ttc 集合字体与 .ttf 单字体格式。 |
上传 .otf .ttc .woff .woff2 以外的文件(如 .ttf 改名 .otf、.zip 压缩包、.svg 字体)上传标准的 .ttf 或 .otf 字体文件浏览器原生只支持 TrueType(.ttf)和 OpenType(.otf)格式;WOFF/WOFF2 需解包后提取字体表;非字体文件会直接导致解析失败
预览文本框输入「😊 你好 123」但字体是仅含英文字母的西文字体预览前确认字体覆盖的字符范围(如中文、emoji、特殊符号),或先用字体信息工具查看字符集字体文件只包含特定 Unicode 区块的字形;缺失字符会显示为方块(□)或系统后备字体,无法真实反映字体设计
上传一个 50MB 的 .ttf 文件(如包含数千个汉字的中文字体)上传前压缩或裁剪字体子集(如只保留常用汉字),或使用 Web 字体格式(.woff2)浏览器解析大字体文件会占用大量内存和 CPU,甚至触发页面无响应;预览工具通常不会做异步分片加载
在预览框输入 10000 个字符的测试文本输入 10-50 个代表性字符(如「天地玄黄 宇宙洪荒 123 ABC」)每个字符都需要从字体文件中查找字形并渲染;长文本会逐字渲染,浏览器可能卡顿数秒甚至崩溃
上传「Arial Regular」却期望看到斜体或粗体效果上传包含所需字重的字体文件(如 Arial Bold、Arial Italic),或使用字重滑块调整每个字体文件只包含一种字重和样式;浏览器无法从 Regular 自动生成 Bold/Italic 字形,会使用算法模拟(效果失真)
预览框显示效果与本地安装的同一字体不同,怀疑工具不准在无痕模式或清除缓存后重新上传;或确认本地字体版本与上传文件一致如果系统已安装同名字体,浏览器可能优先使用系统字体而非上传文件;无痕模式可避免缓存干扰
仅用默认 16px 黑色文字在白色背景上预览,无法评估字体在小字号或深色背景下的可读性调整字号到 12px(小字号阅读)、36px(标题效果),切换深色/浅色背景测试对比度字体在不同字号和背景下的渲染表现差异很大(如抗锯齿、笔画粘连、背景透光);单一设置无法覆盖实际使用场景
在预览工具中调整字号/颜色后,认为这些设置会自动应用到本地系统或网页预览仅用于视觉评估;实际使用时需将字体文件安装到系统或通过 CSS @font-face 引用预览工具是沙箱环境,所有修改只影响当前页面;字体文件本身不会被修改,也无法跨页面持久化
公式推导 · 流程图解 · 依据出处
glyph_bbox = (x_min, y_min, x_max, y_max)
x_min — 字形最左侧像素的 x 坐标y_min — 字形最底部像素的 y 坐标x_max — 字形最右侧像素的 x 坐标y_max — 字形最顶部像素的 y 坐标上传字体文件后,工具解析每个字符的轮廓。以字母 'A' 为例,在 1000 UPM(units per em)的字体中,其边界框可能为 (50, 0, 950, 700),表示字形占据水平方向 50~950 单位、垂直方向 0~700 单位。工具据此在画布上精确渲染该字符的可见区域。
适用于 TrueType/OpenType 字体中所有字符的边界框计算,基于 OpenType 规范(Microsoft/Adobe 联合定义)。不适用于位图字体或可变字体中未定义的实例。
3 种主流语言 · 复制即用
from PIL import ImageFont, ImageDraw, Image
# 加载字体文件,渲染指定文本为图像
font_path = "path/to/font.ttf"
text = "Hello, 字体预览"
font_size = 48
# 创建字体对象
font = ImageFont.truetype(font_path, font_size)
# 计算文本尺寸并创建空白画布
bbox = font.getbbox(text)
width, height = bbox[2] - bbox[0], bbox[3] - bbox[1]
img = Image.new("RGB", (width + 20, height + 20), "white")
draw = ImageDraw.Draw(img)
# 绘制文本
draw.text((10, 10), text, font=font, fill="black")
img.save("preview.png")
print("预览图像已保存到 preview.png")package main
import (
"fmt"
"image"
"image/png"
"os"
"github.com/golang/freetype"
"golang.org/x/image/font"
"golang.org/x/image/math/fixed"
)
func main() {
// 读取字体文件
fontBytes, err := os.ReadFile("path/to/font.ttf")
if err != nil {
panic(err)
}
f, err := freetype.ParseFont(fontBytes)
if err != nil {
panic(err)
}
// 创建画布
img := image.NewRGBA(image.Rect(0, 0, 400, 100))
c := freetype.NewContext()
c.SetDPI(72)
c.SetFont(f)
c.SetFontSize(48)
c.SetClip(img.Bounds())
c.SetDst(img)
c.SetSrc(image.White)
// 绘制文本
pt := freetype.Pt(10, 50)
_, err = c.DrawString("Hello, 字体预览", pt)
if err != nil {
panic(err)
}
// 保存为 PNG
fout, _ := os.Create("preview.png")
defer fout.Close()
png.Encode(fout, img)
fmt.Println("预览图像已保存到 preview.png")
}const fs = require('fs');
const { createCanvas, registerFont } = require('canvas');
// 注册字体文件
registerFont('path/to/font.ttf', { family: 'CustomFont' });
// 创建画布
const canvas = createCanvas(400, 100);
const ctx = canvas.getContext('2d');
// 设置字体并渲染
ctx.font = '48px CustomFont';
ctx.fillStyle = 'black';
ctx.fillText('Hello, 字体预览', 10, 60);
// 保存为 PNG
const buffer = canvas.toBuffer('image/png');
fs.writeFileSync('preview.png', buffer);
console.log('预览图像已保存到 preview.png');8 个高频疑问