字体预览工具

字体预览工具做的事情很简单:你在输入框里写一段自己要用的文字,页面会把同一段文字依次用 12 种常见字体显示出来,并且可以用滑块统一调整字号。它适合在写网页样式、做海报或排版文档之前,快速比较几种字体的观感。它不是字体下载站,也不能上传或安装新字体,更不会替你判断哪种字体「最好」,只是把你这台设备上实际能渲染出来的效果摆在一起给你看。

操作步骤

1. 在顶部的「预览文字」输入框里输入或粘贴你想测试的内容。页面默认放了一句中文古诗、一句英文 pangram 和一串数字,方便同时观察中文、英文字母和数字的效果,你可以直接改成自己的标题、品牌名或正文片段。
2. 拖动「字号」滑块调整大小。滑块范围是 12px 到 60px,标签上会实时显示当前数值。小字号适合模拟正文,大字号适合观察标题的字形细节。
3. 向下浏览字体列表。每个卡片左上角是字体名称,下面是用该字体渲染的预览文字。列表依次为微软雅黑、苹方(Mac)、宋体、黑体、楷体、仿宋、Arial、Helvetica、Georgia、Times New Roman、Courier New(等宽)和 Verdana。
4. 挑出喜欢的字体后,自行把字体名写进 CSS 的 font-family 里。工具本身不提供复制 CSS 的按钮,需要你手动记下名称。
5. 如果把输入框清空,每个卡片会显示「输入文字预览效果」的提示文字,而不是留一片空白。

一个使用场景

假设你要给一个中文品牌做落地页,标题里既有中文品牌名,也有英文单词。你可以把标题原文粘进输入框,把字号拉到 40px 左右,然后从上到下看一遍:宋体、楷体、仿宋这类带笔画装饰或书法感的字体,会给人偏传统、文艺的印象;黑体、微软雅黑、苹方则更干净、偏现代;Georgia 和 Times New Roman 的英文部分带衬线,而 Arial、Verdana 没有。这只是一个定性的比较过程,工具不会给出分数或推荐,最终选择取决于你的品牌气质和阅读场景。

支持范围与已知限制

• 只有上面列出的 12 种字体,不能添加自定义字体,也不能加载 Google Fonts 等网络字体。
• 预览的是「你当前设备」上的真实渲染结果。每个字体都写了备用字体(比如宋体失败时回退到系统默认衬线字体),如果你的系统没有装某个字体,浏览器会静默换成备用字体显示,卡片上依然写着原字体名,页面不会提示「该字体不存在」。所以你可能看到两三个卡片长得一模一样,这通常说明它们都回退到了同一个默认字体。
• 不同系统预装的字体不同:苹方主要在苹果设备上有,微软雅黑、宋体、黑体、楷体、仿宋常见于 Windows,Helvetica 在 Windows 上通常不存在而会回退到 Arial。这意味着你在自己电脑上看到的效果,不等于访客在他们设备上看到的效果。
• 只能改字号,不能切换粗体、斜体、行高、字间距或颜色。
• 文字使用强制换行显示(长英文单词也会在卡片边缘断开),所以它不能用来评估真实的排版换行效果。
• 没有保存、导出或分享功能,刷新页面后输入内容会恢复为默认示例文字。

常见问题:为什么有些字体看起来都一样?

因为你的设备上没有安装那几种字体。浏览器按照 font-family 的顺序寻找可用字体,找不到时会落到列表末尾的通用类别(sans-serif、serif 或 monospace),于是多个卡片显示的其实是同一款系统默认字体。换一台装有对应字体的电脑,或者在苹果设备与 Windows 设备上分别打开,就会看到差异。

常见问题:衬线体和无衬线体该怎么选?

衬线字体(宋体、Georgia、Times New Roman)的笔画末端带有装饰性的收尾,传统印刷里常用于大段正文;无衬线字体(黑体、微软雅黑、Arial、Verdana)笔画粗细接近,常用于标题和界面按钮。这是通行的经验,不是硬性规则:在低分辨率屏幕上,小字号的宋体笔画可能显得单薄,这时可以用工具把字号调小再看看实际效果。

常见问题:这些字体可以商用吗?

这个工具只是调用你系统里已经安装的字体来显示,本身不分发任何字体文件,也不涉及授权判断。如果你要把某个字体用在印刷品、商业海报或嵌入应用里,需要自行查看该字体的授权协议,系统预装并不等于可以随意商用或打包分发。

常见问题:预览结果和网页最终显示会一致吗?

只有在访客设备也安装了同一款字体的前提下才会一致。网页设计里通常会在 font-family 里写多个候选字体,并以通用类别收尾,让没有首选字体的设备也能显示出合理的效果。你可以利用这个工具理解各字体在你自己环境里的大致样子,但不能把它当成跨设备的最终验证。

常见问题:能预览我自己下载的字体吗?

不能直接上传。如果你已经把字体安装到了自己的系统里,理论上它会出现在系统字体中,但这个工具的列表是固定的 12 项,不会读取或枚举你系统的全部字体,所以自己安装的字体不会出现在这里。

隐私与处理方式

查看工具代码可以确认:预览完全依靠浏览器的 CSS 渲染完成,输入的文字只保存在页面内存中,不会被发送到服务器,也不需要联网下载任何字体文件。关闭或刷新页面后输入内容就会消失。