用 CSS 为屏幕与打印分别设置字体系列

在网页设计中，字体的选择对于用户体验至关重要。不同的设备和场景下，用户对字体的需求也有所不同。CSS 提供了强大的功能，允许我们为屏幕显示和打印分别设置合适的字体系列，以满足多样化的需求。

对于屏幕显示，我们通常希望选择清晰、易读且在各种屏幕分辨率下都能良好呈现的字体。常见的选择包括无衬线字体，如 Arial、Helvetica 和 sans-serif 等。无衬线字体的简洁外观使其在屏幕上更易于阅读，尤其在小字号的情况下，能减少视觉疲劳。

在 CSS 中，我们可以通过以下方式为屏幕设置字体系列：

@media screen {
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
}

上述代码使用 @media 查询来针对屏幕设备，将页面主体的字体系列设置为 Arial、Helvetica 或系统默认的无衬线字体。

而在打印场景中，衬线字体往往是更好的选择。衬线字体的笔画末端有装饰性的细线，在纸质印刷品上能提供更好的可读性，有助于引导读者的视线。例如，Times New Roman、Georgia 和 serif 等都是常用的打印字体。

为打印设置字体系列的 CSS 代码如下：

@media print {
  body {
    font-family: Times New Roman, Georgia, serif;
  }
}

这段代码确保在打印页面时，文本使用 Times New Roman、Georgia 或系统默认的衬线字体显示。

通过为屏幕和打印分别设置字体系列，我们可以在不影响整体设计的前提下，优化用户在不同场景下的阅读体验。例如，用户在屏幕上浏览网页时，能享受到清晰、简洁的无衬线字体；而当他们需要打印页面时，衬线字体则能使打印内容更具专业性和可读性。

还可以根据具体需求进一步调整字体的大小、颜色、行距等属性，以达到更好的视觉效果。合理运用 CSS 的媒体查询功能，为屏幕与打印设置合适的字体系列，是提升网页用户体验的重要一环。