字体选择的艺术：用 font-family 说清可用与可用到好

在网页里，文字是与人直接对话的媒介。选对字体，能让人一眼读出态度；选错，哪怕排版再精致，也可能让内容大打折扣。font-family 并不是简单的“列个名字就行”，它背后藏着可用性、可读性与场景适配的考量。

从“能用”到“用得久”

先从可用性入手。不同设备、不同系统下，浏览器对字体的回退策略各不相同。在需要广泛兼容的场景里，用通用字体作为基底，再叠加局部的精品字体会更稳妥。比如在标题处大胆用 Impact、Georgia 等视觉个性强的字体，正文则用 sans-serif 或 serif 的通用族，既保证可读，也避免个别系统找不到导致显示异常。

场景化选型：标题、正文、按钮各取其宜

• 标题：强调层级与辨识度，优先选择有笔画粗细变化或字形辨识度高的字体，如Georgia、Times New Roman，或在不冲突的前提下使用 Impact。
• 正文：更看重阅读流畅度与清晰度，建议用无衬线体（sans-serif）或衬线体（serif）的通用族，如Arial、Helvetica、Times、Georgia。无衬线体更适合屏幕阅读，衬线体则在印刷级可读性和版式节奏上有优势。
• 按钮：常与交互反馈搭配，需要在可读性与视觉吸引力之间取得平衡。在弱光或小字号下优先保证可读，可选Roboto、Open Sans、Inter 等现代无衬线体，字重不宜过重，避免压缩字间距。

回退与备选：让找不到也能看懂

当指定字体在用户设备上不可用时，浏览器会按顺序从font-family列表中选择替代字体。利用这个机制，可以在首字体重申一个更通用的字体，让找不到指定字体时也能正常显示。例如：

body {
  font-family: 'Georgia', serif;
}

同时，考虑使用字体加载策略，如 @font-face 或 Google Fonts 的预加载，但要权衡加载时间与性能，避免在移动网络下造成卡顿。

兼容与性能：少即多

现代网页追求“少即是多”的精简，字体也是一样。过多的字体选择会增加渲染负担与加载时间，尤其在移动端。合并相近风格的字体，只保留一两套核心组合，既能覆盖大多数使用场景，又不会牺牲性能。

实战小技巧：用工具与排版节奏

• 工具：用在线字体选择器或浏览器扩展对比不同字体在不同设备与字号下的表现，直观看到差异。
• 排版节奏：通过调整字间距（letter-spacing）与行间距（line-height），在不同字体间建立统一的节奏感，避免“字挤在一起”或“一行读到头”的不适。

结语

在信息爆炸的网页里，字体的选择是无声的叙事。它不只关乎美观，更关乎效率、可达性与体验。用font-family做对，是在每一段文字与每一处交互之间，搭建起用户愿意停留与继续阅读的桥梁。少一些口号式的搭配，多一些场景化的考量，才能把字体选择从“时髦”变成“长久”。