字体预览与测试，免费

本工具的功能

字体预览工具会同时在多种字样中渲染同一段字符串，让你可以并排比较它们而不必先承诺使用其中一种。在顶部一次性输入你的文本（项目名称、你正在写的标题、你正在为品牌挑选的 wordmark）画廊里每一种字体都会以自身的字样显示同一段字符串。调整大小、颜色和背景，以测试这个比较在它真正会出现于生产环境的尺寸与对比下是什么样子。点击任意字体即可复制其 CSS font-family 声明。经典的字体比较字符串「The quick brown fox jumps over the lazy dog」是一个 pangram（英文字母表里每个字母都至少出现一次），之所以好用，是因为它在一句简短的话里把这种字样能提供的每一个字形都演练了一遍。

Web-safe 字体

「网页安全字体」（web-safe fonts）这一说法来自 2000 年代初到中期，那时 CSS 网页字体（@font-face）的支持还不可靠。这一组指的是几乎所有面向消费者的操作系统都预装的字样，因此设计师可以放心地指定它们，相信用户的浏览器在本地就有。经典的网页安全字体清单：Arial、Helvetica、Times New Roman、Times、Georgia、Verdana、Tahoma、Trebuchet MS、Courier New、Courier、Lucida Console、Palatino、Garamond、Bookman、Comic Sans MS、Impact、Arial Black。每一种都有自己的故事，Arial 是 Monotype 在 Microsoft 寻求 Helvetica 替代品的授权压力下做出的回应；Verdana 与 Georgia 是 Microsoft 1996 年专门为当时分辨率下的屏幕阅读委托给 Matthew Carter 的；Tahoma 是 Verdana 更窄的姐妹版。即使 @font-face 已经可靠（Internet Explorer 从 1997 年的版本 4 开始就支持，但要到 2009 年的 Firefox 3.5 与 2008 年的 Safari 3.1 才让它真正具备跨浏览器的可用性），网页安全字体的传统仍然延续了很久，因为设计师珍视零延迟渲染，也明白自定义字体要付出网络往返的代价。当下的最佳实践是「系统字体栈」（先 Apple 的 -apple-system，再 BlinkMacSystemFont，再 Segoe UI，再 Roboto，最后 sans-serif），不下载任何东西就能选取用户操作系统的原生 UI 字体，既快又在视觉上贴合所在平台。

Google Fonts 与网页字体托管时代

Google Fonts 于 2010 年 5 月推出，是一个免费的 CDN 托管开源字样库。最初推出时只有 18 种字体；到 2026 年，目录已超过 1,500 个家族，全部以 SIL Open Font License 或类似宽松条款授权。Open Sans（Steve Matteson，2010）、Roboto（Christian Robertson，2011）、Lato（Łukasz Dziedzic，2010）、Montserrat（Julieta Ulanovsky，2011）、Source Sans Pro（Paul Hunt 为 Adobe 设计，2012）、Inter（Rasmus Andersson，2016）、Poppins（Indian Type Foundry，2014）、Nunito（Vernon Adams，2011），它们都是现代网络上使用最多的字样之一，全部可通过 Google Fonts 免费获取。目录的加载机制多年来不断演进：2010 年最初的版本使用 <link> 标签指向 Google 的 CSS 端点；从 2018 年起开始强调用 display=swap 参数控制 FOUT/FOIT 行为；2022 年的 Google Fonts API v2 会预渲染子集以获得更好的性能；在注重隐私的网站上，现代做法常常自托管字体，以避开 Google CDN 的隐私和 GDPR 合规担忧（2022 年一项德国判决就明确认定，未经用户同意从 Google 服务器加载 Google Fonts 违反了 GDPR）。Adobe Fonts（前身 Typekit，2011 年被收购）、Fontshare（Indian Type Foundry 的免费字体，2021）、Bunny Fonts（尊重隐私的 Google Fonts 镜像，2021）是主要的替代方案。

字体分类

• 衬线字体在字母末端有一些小的伸出的笔画（衬线）。古典衬线（Garamond、Caslon、Goudy、Sabon）可追溯到 16 世纪，粗细笔画之间对比度较低。过渡衬线（Baskerville、Times New Roman）出现于 18 世纪，对比度更高。现代衬线（Bodoni、Didot）将对比度推到极致。方衬线（slab）（Rockwell、Roboto Slab、Courier）有粗重的矩形衬线。在网页正文里，针对屏幕优化过的衬线字体（如 Georgia（Matthew Carter 为 Microsoft 设计，1996）、Merriweather（Sorkin Type，2010）、Lora（Cyreal，2011）和 PT Serif（Paratype，2009））比 Times New Roman 这类源自印刷的字样更耐读。
• 无衬线字体没有衬线。几何无衬线（Futura、Avenir、Avant Garde）由干净的几何形状构成。人文无衬线（Gill Sans、Frutiger、Open Sans、Source Sans Pro）借用了罗马字母的比例，往往是正文里最易读的。怪诞无衬线（Helvetica、Arial、Akzidenz-Grotesk）是 19、20 世纪的工业级主力。新怪诞（Inter、Roboto、San Francisco、Segoe UI）是当今主流操作系统和设计系统里默认的 UI 字体。无衬线在网页正文中占据主导，因为它们在更小的像素尺寸下仍然可读。
• 等宽字体给每个字符分配相同的宽度，最初是为打字机和早期计算机终端设计的，那时每个字符都占据固定的一格。对代码编辑器、终端、技术文档以及任何对齐很重要的场景都是必需的。现代程序员字体（JetBrains Mono、Fira Code、Cascadia Code、IBM Plex Mono、Inconsolata、Source Code Pro）包含编程连字（=> → ⇒，!= → ≠），并为长时间编码的可读性而设计。Apple 的 SF Mono 和 Microsoft 的 Cascadia Code 随各自的开发者工具一同发布。
• 展示字体仅为大尺寸场景设计（大标题、海报、品牌 wordmark、首屏 hero 文字。Impact、Bebas Neue、Anton、Oswald、Playfair Display（高对比度的现代衬线）、Abril Fatface）这些在正文尺寸下都不太好读，但在标题尺寸下能抓住注意力。把一种展示用的标题字体与一种简洁的正文字体配对，是现代网站上最常见的排版模式。
• 手写体与书法字体模仿手写风格。在个人或请柬风格的品牌上少量使用很有用；在正文尺寸下几乎无法阅读；应当像使用大写字母一样使用它们（短促、有意为之）。

可变字体，现代的安静革命

OpenType Font Variations 规范（Apple 1994 年的 TrueType GX Variations + Adobe 的贡献，于 2016 年 9 月作为 OpenType 1.8 共同标准化）允许一个字体文件描述一整族无限多的相关变体。传统字体家族要为 Light、Regular、Medium、Bold、Black 以及它们的斜体提供多个文件（通常是六到十个、每个 50-200 KB）而一个可变字体提供一个文件，在轴（粗细、宽度、倾斜、光学尺寸，以及字体设计师定义的任意自定义轴）上以连续变化的方式包含所有这些设计。浏览器支持依次落地于 Chrome 62（2017 年 10 月）、Firefox 62（2018 年 9 月）、Safari 11.0 / 11.1（2017-2018）和基于 Chromium 的 Edge（2020）。重要的可变字体发布包括拥有 13 个轴的 Roboto Flex（Christian Robertson + Font Bureau，2022 年 10 月）；Recursive（Stephen Nixon，2019）；带粗细 + 倾斜两个轴的 Inter（Rasmus Andersson）；如今大多数主流字体家族都在传统静态文件之外另发布可变版本。带宽节省非常显著：一个 200 KB 的可变字体文件可以替代八个 100 KB 的静态文件，同时还提供更大的设计灵活性。

字体加载与 FOUT/FOIT 问题

当浏览器去拉取一个自定义字体文件时，在这中间它显示什么？两种极端策略。FOIT（Flash of Invisible Text）（在字体到达之前根本不渲染任何文字，然后突然把文字显示出来。在字体加载好之前，页面看起来像是坏的。FOUT（Flash of Unstyled Text））立即用一个备用字体渲染文字，等自定义字体到达后再切换过去。从第一帧起页面就可读，但切换在视觉上会比较突兀。CSS font-display 属性（在 CSS Fonts Module Level 4 中加入）把控制权交给开发者：auto（浏览器默认，通常偏 FOIT）、block（完全 FOIT）、swap（完全 FOUT，目前主流的最佳实践）、fallback（一段短暂的不可见块，然后再切换，几秒后落到一个「够用」的备用字体）、optional（如果加载得不够快，干脆完全跳过这个自定义字体）。在 2026 年，对于 Core Web Vitals 与 Lighthouse 评分来说，font-display: swap 是标准建议，配合关键字体的 preload 提示和一个度量上接近自定义字体的精心挑选的备用字体（这样切换时布局不会重排，CSS Fonts Module Level 5 中新增的 size-adjust 属性可以更精细地调节这一点）。

按用途选择字体

• UI 正文，优先用系统字体栈（Apple SF、Segoe UI、Roboto，跟随用户的操作系统）以获得零延迟和符合平台风格的外观。如果出于品牌原因必须用自定义字体，请选择一种人文无衬线（Inter、Open Sans、Source Sans Pro），并使用 16 px 或更大的尺寸。
• 长篇阅读（文章、博客），为屏幕优化过的衬线字体（Georgia、Merriweather、Lora），尺寸 18-22 px，配合宽松的行高（1.6-1.8）。衬线在长行文字上有助于眼睛追踪。
• 品牌 wordmark（一种独特的展示字体，仅在一个大尺寸下使用。配上更中性的正文字体。在这里投资于自定义或定制字体是值得的）这是品牌中最显眼的单一排版决定。
• 代码块，一种专门的程序员字体（JetBrains Mono、Fira Code、Cascadia Code），尺寸 14-15 px。编程连字是一种个人偏好；很多开发者很喜欢，也有一些觉得反而令人困惑。
• 数字表格，使用一种带等宽数字（数字 1 与 2、3 等占据相同宽度）的字体，让数字列不需要手动加 padding 也能对齐。大多数现代字体都通过 font-variant-numeric: tabular-nums 属性提供等宽数字。
• 仅用于装饰，手写字体、书法体、复古展示字。要短促而有意地使用；绝不用于正文。

常见问题

web-safe 字体与自定义字体有什么区别？

网页安全字体已预装在用户的设备上，因此不需要任何网络请求就能立即渲染。自定义字体（Google Fonts、Adobe Fonts、自托管的 @font-face）必须下载，会增加延迟，但提供超出操作系统自带字体范围的视觉多样性。大多数现代网站会混合使用：一种自定义字体作为主字体，font-family 栈中以网页安全字体作为后备，以及在更适合显示平台原生外观的 UI 元素上使用一个系统字体栈（-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif）。

如何在我的网站上使用 Google Font？

两种方式。用 CDN：在 HTML 的 <head> 中加上一个指向 fonts.googleapis.com 的 <link> 标签，然后在 CSS 中通过 font-family: 'Inter', sans-serif 引用这个字体。自托管：从 Google Fonts 下载 WOFF2 文件，托管在你自己的域名上，然后用 @font-face 声明它们。在隐私敏感的场景里更倾向于自托管（一家德国法院在 2022 年裁定，未经同意从 Google 的 CDN 加载 Google Fonts 违反 GDPR）。加上 font-display: swap 来控制加载行为，并对关键字体使用 preload 来提升性能。

什么是适合正文的衬线字体？

Georgia（Matthew Carter，1996 年由 Microsoft 专门为屏幕渲染委托设计）至今仍是出色的选择，所有面向消费者的操作系统都已预装。Google Fonts 里：Merriweather（Sorkin Type，2010）、Lora（Cyreal，2011）、PT Serif（Paratype，2009）、Source Serif Pro（Frank Grießhammer 为 Adobe 设计，2014）。网页正文请避开 Times New Roman（它是为小尺寸的报纸印刷而设计的，在屏幕上读起来局促又过时。对于现代、高对比度的衬线大标题，Playfair Display 表现非常出色（请避开正文使用）在小尺寸下对比度太高）。

这个预览工具能离线工作吗？

网页安全字体（Arial、Georgia、Verdana 等）能离线工作，因为它们是从你的操作系统加载的。画廊中的 Google Fonts 在渲染时需要从 Google 的 CDN 进行一次性的网络拉取，加载完成后会被缓存，之后预览就能离线工作。要确认这一点，可以在初次加载之后让页面离线（飞行模式）；操作系统安装的字体会继续渲染，Google Fonts 则使用缓存中已有的版本。

相关工具