CSS Font Stack

级联样式表（CSS）在 Web 开发中至关重要，因为它使设计师和开发人员能够控制网页的呈现和布局。字体排印是在线设计的核心组成部分之一，而 CSS 则为网站上的文本格式化提供了强大的工具。在 CSS 中，文本样式化的一个基本概念是“字体堆栈”，它指定了呈现网页文本时使用的字体层次结构。本详尽的书籍将详细介绍 CSS 字体堆栈，包括其重要性、功能、推荐实践和示例。

字体与排版简介

网页设计中的排版

排版是指以一种方式组织字体，使其易于辨认、阅读和美观。排版是网页设计的重要组成部分，因为它有助于信息交流，建立网站的情绪，并改善用户体验。使文本在各种设备和屏幕尺寸上都易于访问且美观，这涉及到选择和样式化字体、调整文本大小和间距等等。

理解网络字体

网络字体是专门为在网站上使用而创建的数字字体。与用户设备上预装的系统字体不同，网络字体托管在在线服务器上，并在用户访问网页时由网络浏览器下载。这带来了字体可用性和渲染一致性的挑战，并使网络设计师能够使用各种字体。

CSS 字体规范

在深入研究字体堆栈之前，理解控制文本样式的 CSS 属性至关重要。这些属性允许您控制文本在网站上的外观。以下是一些重要的 CSS 字体属性

1. 'font-family'

font-family 属性指定 HTML 元素中文本的“font-family”或字体系列列表。它按优先级降序指定一个字体列表。如果列表中的第一个字体不可用，浏览器将尝试下一个。

在上面的示例中，浏览器将使用“Arial”字体呈现“<p>”组件中的文本。它将首先尝试“Arial”，如果不可用，则尝试“Helvetica”，如果两者都不可用，它将使用标准的无衬线字体。

2. 'font-size'

font-size 属性控制字体大小。像素（'px'）、em（'em'）、百分比（'%'）或相对单位如 'rem' 和 'vw' 是指定它的几种单位。

在此插图中，“<h1>”组件的字体大小为 24 像素。

3. 'font-weight'

font-weight 参数设置字体的粗细或粗体。它接受 100 到 900 之间的数值以及“regular”、“bold”、“bolder”、“lighter”和其他样式的数值。

在这里，“<strong>”元素的文本将以粗体显示。

4. 'font-style'

使用“font-style”属性，您可以指示文本是应以常规、斜体还是倾斜样式呈现。

在此实例中，斜体文本将显示“<em>”组件内的文本。

5. 'line-height'

line-height 参数控制文本行之间的垂直距离。它可以配置为绝对值、百分比或无单位数字。

通过将“<p>”组件的行高设置为字体大小的 1.5 倍，可以实现适当的行间距。

这些 CSS 字体设置是修改网页文本外观的构建块。网页设计师经常将字体堆栈与这些属性结合使用，以产生可靠且美观的排版。

CSS 字体堆栈

定义字体堆栈

在“font-family”属性中列出的一组字体系列称为字体堆栈，通常也称为字体回退堆栈。设计师在设计字体堆栈时，力求提供多种字体选择，将选定的字体放在列表顶部，并在首选字体不可用时提供回退字体。

这里是段落的简单字体堆栈

在此实例中，“Helvetica Neue”是首选字体。如果不可用，浏览器将尝试使用“Helvetica”，然后是“Arial”。如果这些字体都不可用，将使用标准的无衬线字体。

字体堆栈最佳实践

在创建字体堆栈时，坚持一些最佳实践至关重要

• 从具体字体开始：将具体的字体名称放在堆栈顶部。这些字体应该最符合您的设计目标。
• 使用通用字体系列：作为最后的选择，使用通用字体系列，如无衬线、衬线和等宽字体，以确保文本即使在不使用独特字体的情况下仍可读。
• 优先使用系统字体：为了使用用户设备上安装的字体，请考虑在字体堆栈中使用系统字体。
• 测试跨浏览器兼容性：在各种浏览器和设备上测试字体堆栈的跨浏览器兼容性，以确保渲染一致。

浏览器中的标准字体堆栈

在呈现网页时，浏览器会使用预设的字体堆栈。这些默认堆栈的目的是在未提供 CSS 中的特定字体时保持文本的可读性。每个浏览器的默认字体堆栈可能包含系统字体和回退选项。

以下是几款流行浏览器的标准字体堆栈列表

• Google Chrome：“Helvetica Neue”，'Arial'，'sans-serif'。
• Mozilla Firefox：'serif'。
• Safari：“Helvetica Neue”，'Helvetica'，'Arial'，'sans-serif'。
• Microsoft Edge：'Segoe UI'，'Tahoma'，'Geneva'，'Verdana'，'sans-serif'。

如果您不在 CSS 中包含自定义字体堆栈，这些默认字体堆栈可能会影响您的在线内容的外观；因此，理解它们至关重要。

网页安全字体

网页安全字体在许多操作系统和浏览器中广泛使用。它们通常被称为系统字体或标准字体。通过在字体堆栈中包含网页安全字体，您可以帮助在各种设备上保持一致的排版。以下是一些常见的网页安全字体组

1. 衬线字体

• Times New Roman：Times New Roman 是一种经典的衬线字体，常用于 Windows 计算机。
• Georgia：另一种衬线字体，以在屏幕上易于阅读而闻名。
• Palatino Linotype：Palatino Linotype 是一种优雅的衬线字体。

2. 无衬线字体

• Arial：在 Windows 和 macOS 上，Arial 无衬线字体都非常流行。
• Helvetica：Helvetica 是一种流行的无衬线字体，外观清新现代。
• Verdana：Verdana 是网页内容的一个绝佳选择，因为它专为屏幕阅读而设计。

3. 等宽字体

• Courier New：一种等宽字体，常用于代码或其他需要固定宽度字母的内容。
• Lucida Console：另一种等宽字体，适用于类似于终端输出的文本。

在进行网页设计时，请在字体堆栈中包含网页安全字体，以确保您的文本在各种环境中都可读且一致。另一方面，网页安全字体并不总是能与您的设计目标相匹配，这时自定义网络字体就派上用场了。

使用自定义网络字体

自定义网络字体（通常称为网络字体服务）允许设计师使用各种未预装在客户设备上的字体。这些字体可以使用 CSS 加载到网页中，并存储在外部服务器上。以下是一些有效使用独特网络字体的技巧

网络字体格式

网络字体有多种格式，例如

• WOFF（Web Open Font Format）：WOFF（Web Open Font Format）被广泛使用，专为网络而设计。
• WOFF2：WOFF 的一个较新版本，提供更好的压缩和更快的加载时间。
• TTF（TrueType Font）：一种适用于桌面和网络使用的格式。
• OTF（OpenType Font）：与 TTF 类似，OTF（OpenType Font）适用于 PC 和网络。
• EOT（Embedded OpenType）：已被 WOFF/WOFF2 取代，EOT（Embedded OpenType）是一种主要用于 Internet Explorer 的旧格式。

在使用自定义网络字体时，为了确保与各种浏览器的兼容性，至关重要的是在 CSS 中指定多种格式。

安装个性化网络字体

使用 CSS 中的 '@font-face' 规则将独特的网络字体加载到您的网站中。此规则指定字体文件的位置，并为其命名，您可以在“font-family”声明中使用该名称。这是一个示例

在此示例中，定义了一个名为“CustomFont”的独特字体，并提供了 WOFF2 和 WOFF 版本的字体文件 URL。然后可以在元素的“font-family”属性中使用该字体。

字体托管与服务

各种字体服务和托管公司提供多种独特的网络字体。流行选择包括

• Google Fonts：一项免费服务，提供大量开源网络字体。
• Adobe Fonts（前身为 Typekit）：通过 Adobe Fonts（以前称为 Typekit）可以在线获取高质量的字体。
• Font Squirrel：Font Squirrel 提供免费字体和网络字体创建工具。
• Webfont (Monotype)：提供字体托管服务和字体集合。

这些服务将使您能够快速地将独特的网络字体集成到您的 Web 项目中，确保您的排版脱颖而出并与您的设计目标相匹配。

备份字体

即使在使用自定义网络字体时，也要考虑字体堆栈中的备份字体。如果用户的浏览器无法加载自定义字体或不支持它，回退字体将作为安全网。以下是使用回退字体的一种有效方法

字体堆栈的回退

如前所述，在建立字体堆栈时，您应该在首选自定义字体之后包含回退选项。这是一个示例

在此场景中，“CustomFont”是最佳选择。如果不可用，浏览器将回退到使用 Arial。如果没有 Arial，将使用通用的无衬线字体。

默认字体

在字体堆栈中使用系统字体作为最后选项是回退字体的另一种策略。系统字体预装在用户的设备上，因此几乎总是可用的。这是一个示例

“CustomFont”是首选自定义字体，其次是网页安全字体（Arial 和 Helvetica）以及通用的无衬线字体。如果没有可用的自定义字体，浏览器将使用系统字体之一。

字体平滑与渲染

在使用自定义网络字体时，考虑字体平滑和渲染很重要，因为它们会影响文本在不同设备和浏览器上的显示方式。通过抗锯齿或亚像素渲染来平滑字体边缘。对于某些字体，最佳渲染可能需要特殊的 CSS 设置。

例如，您可以使用“font-smooth”属性来管理字体平滑

此外，您可以使用“text-rendering”属性来控制文本的渲染方式

这些特性可以确保自定义网络字体在各种设备上清晰锐利地显示。

字体堆栈示例

让我们在不同场景下探讨一些实用的字体堆栈示例

基本字体堆栈

在此基本字体堆栈中，“Open Sans”是推荐的自定义字体。如果没有 Arial，接下来使用通用的无衬线字体。此外，此堆栈将行高增加到字体大小的 1.5 倍，并将字体大小设置为 16 像素。

高级字体堆栈

在此复杂字体堆栈中，为不同的 HTML 组件指定了不同的字体系列和样式。标题和段落的首选字体分别为“Lato”和“Roboto”。引用使用“Georgia”。该堆栈还自定义每个元素的字体粗细、宽度和行高。

响应式字体堆栈

在此示例中定义了一个响应式字体堆栈。尽管“Raleway”是首选字体，但字体系列和大小取决于设备屏幕的宽度。这确保了在所有类型的屏幕上都具有可读性和美观性。

增强网络排版

有效的网络排版包括优化排版以提高效率、可访问性、设计一致性，以及选择合适的字体和字体堆栈。

性能考虑

字体加载技术：使用字体加载技术来加快页面加载速度。为了优先加载字体，请考虑使用“preload”属性。

• 字体子集化：通过仅包含您所需的字符来对字体进行子集化，从而减小字体下载大小。
• 缓存：使用浏览器缓存来减少您网站后续访问时所需的字体下载量。

可访问性和可读性对比

确保文本与背景有足够的对比度，以便盲人或视力障碍者能够阅读。

• 字体大小和行高：使用字体大小和行高来提高可读性。为了确保可访问性，请在各种用户群体中测试您的排版。
• 使用语义 HTML：使用语义 HTML 元素（例如“<h1>”和“<p>”）来逻辑地组织您的信息并提高屏幕阅读器的兼容性。

设计与美学

• 一致性：为了提供无缝的用户体验，请保持网站字体的统一性。
• 间距与对齐：为了设计美观的布局，请考虑间距、对齐和字体层次结构。
• 响应式设计：确保您的字体能够很好地适应各种屏幕尺寸和方向，使用响应式设计。