品牌手册字体统一
品牌手册定稿前,设计师用 A 字体排版了 30 页正文,但客户发来公司官方字体包要求替换。直接安装后,发现小字号下字重偏细、行距变窄,整本书的可读性下降。把官方字体上传到本工具,在 10pt、12pt、14pt 三个字号下逐行预览,确认只有 14pt 以上才清晰,最终决定正文用 14pt 并加 2pt 行距,避免印刷后出现“字挤字”的投诉。
支持 .ttf · .otf · .woff · .woff2 · 可多选并排对比
Loaded locally with FontFace API — nothing uploaded设计师在 Sketch 里选好字体,导出 PNG 发给甲方,对方回复“标题换一款看看”——这是最常卡壳的环节。上传 .ttf 或 .otf 文件,工具在浏览器本地直接渲染出所有字符,支持调整字号、行距和背景色,所见即所得。字体文件不会离开本机,无需担心版权泄露或上传等待。
品牌手册定稿前,设计师用 A 字体排版了 30 页正文,但客户发来公司官方字体包要求替换。直接安装后,发现小字号下字重偏细、行距变窄,整本书的可读性下降。把官方字体上传到本工具,在 10pt、12pt、14pt 三个字号下逐行预览,确认只有 14pt 以上才清晰,最终决定正文用 14pt 并加 2pt 行距,避免印刷后出现“字挤字”的投诉。
活动海报主标题「夏日市集」四个字,用了一款手写体,但「夏」和「日」之间笔画粘连,视觉上像「夏日」连成一个字。设计师在 PS 里调字距凭感觉试了 10 次都不对。把字体文件拖进本工具,在预览区逐像素调整字距,看到 -20 时两个字之间出现 1px 白线,+10 时恢复自然间距,最终锁定 +5 导出,打印出来笔画清晰可辨。
公司官网的英文版用 Helvetica,中文版用思源黑体,但两套字体在 16px 正文下英文 x 高度比中文低 3px,导致中英文混排时英文行看起来像“下沉”。前端开发把字体上传到本工具,在预览框内输入「Hello 你好」混合文本,切换不同字重后发现只有 Medium 字重下英文基线才与中文对齐,最终统一用 Medium 字重解决跨语言排版不齐的老问题。
甲方发来一款商用字体 .ttf 文件,要求嵌入到电子书里。设计师怀疑该字体是个人版授权,不允许嵌入。把字体上传到本工具,在预览区检查字体信息面板,发现字体名称末尾标注了「For Personal Use Only」,且 OpenType 嵌入权限字段显示「Print & Preview」而非「Editable Embedding」。截图发给甲方确认后,更换为另一款已购买商用授权的字体,避免侵权风险。
公司内部系统升级后,原本在 Win7 下正常显示的一款老旧楷体 .ttf,在新版 Chrome 里所有标点符号都变成了方框。运维把字体文件下载到本工具,在预览区输入「,。!?」等标点,发现该字体缺少 Unicode 编码中的全角逗号字符(U+FF0C)。确认是字体本身字符集不全后,改用思源宋体替换,系统显示恢复正常。
| 输入 | 输出 | 说明 |
|---|---|---|
| 上传一个包含中英文混排的 TTF 字体文件(如 NotoSansSC-Regular.ttf) | 预览区域显示“Hello 你好 123”等预设文本,中文字符清晰渲染,英文字符正常显示,无乱码或方块 | 常规:验证字体对中英文混排的支持,多数用户上传的字体都需覆盖多语言字符 |
| 上传一个仅包含英文大写字母的 OTF 字体文件(如 Arial-Bold.otf) | 预览区域显示预设文本,大写字母正常,小写字母和中文显示为系统默认字体或空白 | 常规:测试字体字符集范围,帮助用户确认该字体是否满足实际使用场景(如仅用于标题) |
| 上传一个 0 字节的空字体文件(如 empty.ttf) | 工具提示“文件无效或损坏”,无法加载预览 | 边界:空文件或损坏文件处理,确保工具不会崩溃且给出明确错误提示 |
| 上传一个字体文件名为“测试字体 2024.ttf”且包含特殊字符(如空格、中文、数字) | 预览正常渲染,文件名在界面上显示为完整名称,无编码错误 | 边界:测试文件名含特殊字符时的兼容性,部分旧工具可能因编码问题导致文件名乱码 |
| 上传一个字体文件大小超过 50MB(如思源黑体完整包 SourceHanSansSC-Regular.ttc) | 工具提示“文件过大,请上传小于 50MB 的字体文件”,或开始加载但预览响应缓慢 | 边界:大文件处理,暴露工具对文件大小的限制,用户需注意压缩或选用子集字体 |
| 上传一个仅包含数字和符号的 WOFF2 字体文件(如 FiraCode-Regular.woff2) | 预览区域显示预设文本,数字和符号渲染正常,但中文字符缺失(显示为方块或空白) | 易错:用户可能误以为所有字体都支持中文,实际 WOFF2 常用于英文编程字体,需提示字符集 |
| 上传一个字体文件但文件扩展名被错误改为 .pdf(实际为 TTF 格式) | 工具按扩展名判断文件类型,可能提示“不支持的文件格式”,或尝试解析后因格式错误而失败 | 易错:用户误改扩展名导致工具无法识别,建议工具内部做魔数检测而非仅依赖扩展名 |
1.上传了未安装的字体文件,预览显示乱码
直接上传 .ttf 或 .otf 文件,浏览器显示为方框或乱码确保字体文件为 TrueType (.ttf) 或 OpenType (.otf) 格式,且未损坏浏览器依赖操作系统字体渲染引擎,若字体文件不标准或损坏,系统无法正确解析字形表,导致回退为默认字体显示乱码。
2.预览文本包含字体不支持的字形,显示空白
预览文本输入「中文测试」,但字体只包含英文字母预览文本输入「Hello World」或字体实际支持的文字范围字体文件通过 cmap 表映射字符到字形,若字符不在映射范围内,浏览器无法渲染,显示为空白或缺失字形符号。
3.误以为预览效果等于网页最终渲染效果
在工具中预览字体后,直接复制到 CSS 中,发现网页显示不同注意工具预览基于本地字体渲染,网页中需使用 @font-face 引入并设置 font-display工具预览调用系统字体渲染,而网页中字体加载受网络、浏览器兼容性、字体子集化等因素影响,渲染结果可能不一致。
4.忽略字体许可证,直接用于商业项目
从免费网站下载字体后,未检查许可证就用于商业网站确认字体许可证为 OFL、MIT 或明确允许商业使用字体文件受版权保护,不同许可证(如 SIL Open Font License、商业授权)对使用范围有严格限制,商用需合规。
5.预览时只测试英文字母,忽略特殊字符
预览文本仅输入「abc」,未测试数字、符号、标点预览文本输入「Hello 123! @#$% 你好」覆盖多字符集字体可能仅包含部分 Unicode 区块,缺失数字或符号时会在实际使用中出现意外回退,影响排版完整性。
6.上传超大字体文件导致预览卡顿或失败
上传 50MB 的字体文件,浏览器长时间无响应上传前压缩或使用子集化字体,文件大小控制在 5MB 以内浏览器处理大型字体文件需解析大量字形数据,内存占用过高会导致页面卡顿甚至崩溃,尤其在中低端设备上。
7.混淆可变字体与静态字体的预览方式
上传可变字体 .ttf 后,预览只显示默认轴值效果在预览工具中调整字重、宽度等轴参数,或使用支持可变字体的预览工具可变字体包含多个设计轴(如 wght、wdth),默认预览仅显示初始轴值,不调整则无法体现字体全部能力。
glyph_scale = (design_units / upem) × point_size × (dpi / 72)
glyph_scale实际渲染像素尺寸,单位 pxdesign_units字形轮廓的原始设计单位值upem每 em 的设计单位数,字体元数据字段point_size用户设定的字号,单位 ptdpi屏幕分辨率,默认 96上传的字体 upem=2048,某字形轮廓点坐标 design_units=1024,用户选 72pt 字号,屏幕 dpi=96:glyph_scale = (1024 / 2048) × 72 × (96 / 72) = 0.5 × 72 × 1.3333 ≈ 48 px。即该字形在画布上实际占据 48 像素高度。
常见原因是文件损坏或格式不标准。本工具基于浏览器原生API解析,只支持TrueType(.ttf)和OpenType(.otf)格式的字体文件。如果文件是从网上下载的压缩包未解压、或者文件名后缀与实际格式不符(比如把.woff改名为.ttf),解析会失败。建议先确认文件能否在本机字体预览中打开,或者用FontForge等工具检查文件头是否合法。若文件大于10MB,请耐心等待几秒,浏览器解析大字体文件需要时间。
说明上传的字体文件里不包含中文字形。很多西文字体(如Arial、Helvetica、Roboto)只设计了拉丁字母和符号,没有中文字符集。本工具只渲染字体文件实际包含的字符,缺失的字形会显示为方块或空白。上传前可以在文件属性或字体管理软件里查看该字体的字符覆盖范围,确认它是否包含CJK统一表意文字区块。如果是要预览中文字体,请上传包含中文字形的字体文件,如思源黑体、阿里巴巴普惠体等。
浏览器的字体渲染引擎与Adobe软件的渲染引擎不同。本工具使用Canvas 2D API直接绘制,渲染效果接近Chrome/Firefox等浏览器的实际显示效果,但Photoshop、Illustrator等专业软件会应用额外的抗锯齿、字形微调和渲染提示(hinting)。另外,本工具默认使用16px字号和标准行高,而设计软件可能有不同的默认排版参数。建议用本工具确认字体在网页环境下的真实表现,如果需要精确设计预览,请以专业软件为准。
不会。本工具完全在浏览器本地运行,字体文件通过File API读取,解析过程全部在内存中完成,不会上传到任何服务器。刷新页面或关闭标签页后,所有数据自动释放。如果担心隐私,可以断网后继续使用,功能完全不受影响。唯一需要联网的是页面本身的静态资源加载,字体解析和渲染不依赖任何后端接口。
目前一次只能上传一个字体文件进行预览。如果需要对比两个字体,建议在浏览器中打开两个标签页分别加载本工具,各自上传不同字体后并排查看。或者将第一个字体的预览截图保存,上传第二个字体后对照截图。如果经常需要对比,可以考虑使用专门的字体对比工具,如FontDrop+或Wakamai Fondue的对比模式。
本工具默认使用字体文件的Regular(常规)字重渲染,如果上传的字体文件只包含Bold(粗体)或Light(细体)单一字重,预览效果会直接使用该字重。另外,有些字体文件内部包含多个字重(如可变字体),但本工具目前只读取第一个可用的字重。如果需要预览不同字重,请上传对应字重的独立字体文件(如SourceHanSansSC-Bold.otf)。
可以,但建议使用最新版Chrome或Safari。本工具依赖HTML5 File API和Canvas,现代移动浏览器都支持。不过手机屏幕较小,预览大字号时可能需要横向滚动查看完整字形。另外,iOS上的Safari对字体文件解析可能比桌面端慢,大文件(超过5MB)建议在Wi-Fi环境下操作。安卓Chrome的兼容性最好,基本与桌面端体验一致。
不同字体对标点符号的设计差异很大。很多中文字体里的标点符号(如引号、破折号、省略号)是全角字符,而西文字体里是半角字符。如果上传的字体虽然包含中文字形,但标点符号映射不完整或设计不规范,浏览器会fallback到系统默认字体渲染这些字符。建议在输入框里输入一段包含中文标点的完整句子(如“你好,世界!”),观察标点符号的显示是否与字体本身的风格一致。如果明显不同,说明该字体的标点字符集不完整。
隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。