CSS 零基础教程

CSS 字体属性

字体是我们文本的视觉表现形式。选择合适的字体可以极大地影响网站的可读性、基调和整体美感。就像为场合选择合适的服装一样，选择合适的字体有助于传达预期的信息并增强用户体验。

在本章中，我们将探索控制字体外观的四个基本 CSS 属性：font-family（字体族）、font-size（字体大小）、font-weight（字体粗细）和 font-style（字体样式）。掌握这些属性将赋予你在网页上创建视觉上吸引人且引人入胜的排版的能力。

1. 指定字体族 (font-family)

font-family 属性指定用于元素中文本的字体（字母、数字和符号的设计）。这是一个基本属性，允许你从各种字体中进行选择，以匹配网站的风格和基调。

1.1 字体栈 (Font Stacks)

font-family 的值不仅仅是一个单一的字体名称；它是一个字体栈，即由逗号分隔的字体列表。浏览器会尝试使用列表中的第一个字体。如果用户系统上没有该字体，浏览器将移至第二个字体，依此类推。提供一个精心设计的字体栈对于确保你的文本以视觉上可接受的方式显示至关重要，即使首选字体不可用。

为什么要使用字体栈？ 用户拥有不同的操作系统，电脑上安装的字体也不同。字体栈确保即使这类用户没有安装你首选的字体，你的网站看起来依然不错。

1.2 通用字体族 (Generic Font Families)

字体栈中的最后一个字体应始终是一个通用字体族。通用字体族是字体风格的广泛类别，保证在所有系统上都可用。当找不到指定的字体时，它们充当后备。

通用字体族包括：

  • serif (衬线体)：在字母末端带有小装饰线（衬线）的字体。例如：Times New Roman, Georgia。
  • sans-serif (无衬线体)：没有衬线的字体，看起来更干净、更现代。例如：Arial, Helvetica。
  • monospace (等宽字体)：每个字符具有相同宽度的字体。例如：Courier New, Consolas。通常用于代码片段。
  • cursive (手写体)：模仿手写的字体。例如：Brush Script MT, Comic Sans MS（请谨慎使用！）。
  • fantasy (艺术体)：非常风格化的装饰性字体。例如：Papyrus, Impact（也请谨慎使用！）。

1.3 font-family 示例

body {
  font-family: "Arial", "Helvetica", sans-serif; /* 最常见的无衬线字体 */
}
h1 {
  font-family: "Georgia", "Times New Roman", serif; /* 经典的衬线字体 */
}
code {
  font-family: "Courier New", monospace; /* 用于代码片段 */
}
.fancy-heading {
  font-family: "Brush Script MT", cursive; /* 谨慎使用！ */
}

示例解析：

  1. 第一个例子中，浏览器将尝试使用 Arial。如果不可用，它将尝试 Helvetica。如果两者都不可用，它将使用默认的 sans-serif 字体。
  2. 第二个例子使用 Georgia 作为首选衬线字体，回退到 Times New Roman，最后是通用 serif 字体。
  3. 第三个例子专门针对 code 元素，使用 Courier New，回退到通用 monospace 字体，这适合显示代码。
  4. 第四个示例展示了草书字体 (cursive fonts) 的用法。

1.4 使用 Web 字体

虽然通用字体族和系统字体提供了基本的控制，但它们可能具有局限性。Web 字体（如 Google Fonts）允许你使用用户系统上不一定安装的自定义字体。这些字体在用户访问你的网站时从服务器下载，从而在不同设备和操作系统上提供一致的排版体验。我们将在下一节专门介绍 Google Fonts 的课程中详细讲解。

1.5 font-family 最佳实践

  • 优先考虑可读性：选择易于阅读的字体，特别是对于正文文本。
  • 考虑你的品牌：选择能反映你品牌个性和风格的字体。
  • 限制字体数量：使用过多的不同字体会使网站看起来杂乱无章且不专业。坚持最多使用 2-3 种字体。
  • 提供后备：始终在字体栈中包含通用字体族。

2. 控制字体大小 (font-size)

font-size 属性决定文本的大小。它在可读性和视觉层次结构中起着至关重要的作用。较大的字体通常用于标题，而较小的字体用于正文和说明文字。

2.1 绝对单位 vs. 相对单位

字体大小可以使用绝对或相对单位指定：

绝对单位 (Absolute Units):

  • px (像素)：以像素为单位指定字体大小。提供对大小的精确控制。
  • pt (点)：传统上用于印刷媒体。1pt 约为 1/72 英寸。

相对单位 (Relative Units):

  • em：相对于父元素的字体大小。例如，如果父元素的 font-size 为 16px，那么 1em 等于 16px。
  • rem：相对于根元素（<html> 元素）的字体大小。这使得在整个网站上保持一致的字体大小变得更容易。
  • %：相对于父元素的字体大小。100% 等于 1em。

为什么首选相对单位？
相对单位（如 em 和 rem）通常优于绝对单位（如 px），因为它们允许更灵活和可扩展的设计。这对于响应式网页设计尤为重要，因为布局需要适应不同的屏幕尺寸。使用相对单位还可以提高无障碍性，因为用户可以在浏览器设置中调整默认字体大小，而你的网站文本也会相应缩放。

2.2 font-size 示例

body {
  font-size: 16px; /* 基础字体大小 */
}
h1 {
  font-size: 2.5em; /* 基础字体大小的 2.5 倍 (40px) */
}
p {
  font-size: 1rem; /* 等于基础字体大小 (16px) */
}
small {
  font-size: 0.8em; /* 父元素字体大小的 80% */
}

2.3 使用关键字

CSS 还提供了用于指定字体大小的关键字：

  • xx-small
  • x-small
  • small
  • medium (默认)
  • large
  • x-large
  • xx-large
  • smaller
  • larger

虽然这些关键字很方便，但与使用 em 或 rem 相比，它们对字体大小的控制不够精确。

2.4 font-size 的最佳实践

  • 确立基准字体大小： 为 body 元素设置一个基准字体大小，并为其他元素使用相对单位（如 em 或 rem）。
  • 使用模块化比例： 模块化比例是一组预定义的、在数学上相互关联的字体大小。这有助于你创建和谐且一致的排版层次结构。
  • 考虑可读性： 选择在不同屏幕尺寸上都易于阅读的字体大小。
  • 测试你的字体大小： 在不同设备上查看你的网站，以确保字体大小适宜。

3. 调整字体粗细 (font-weight)

font-weight 属性控制文本的粗细或黑度。它允许你强调某些单词或短语，或在不同元素之间创建视觉对比。

3.1 font-weight 的值

font-weight 属性接受多个值：

  • normal：默认字体粗细。通常等同于 400。
  • bold：粗体。通常等同于 700。
  • lighter：比父元素的字体更细。
  • bolder：比父元素的字体更粗。
  • 数字：100, 200, 300, 400, 500, 600, 700, 800, 900。每个数字代表不同级别的粗细。
注意：并非所有字体都支持所有粗细级别。可用的粗细取决于所使用的特定字体族。

3.2 font-weight 示例

h1 {
  font-weight: bold; /* 粗体标题 */
}
p {
  font-weight: normal; /* 正常段落文本 */
}
.emphasized {
  font-weight: 600; /* 比正常稍粗 */
}

3.3 font-weight 最佳实践

  • 适度使用： 谨慎使用粗体文本，避免让读者感到不知所措或视觉疲劳。
  • 建立视觉层次： 利用字体粗细来建立视觉层次结构，从而引导读者的视线。
  • 考虑无障碍性： 确保字体粗细与背景颜色之间有足够的对比度，以便视障用户能够清晰阅读。

4. 应用字体样式 (font-style)

font-style 属性控制字体的风格变化，最常用于将文本设置为斜体。

4.1 font-style 的值

  • normal：默认字体样式。文本以正常的直立样式显示。
  • italic：文本以斜体样式显示。
  • oblique：类似于 italic，但浏览器是通过算法倾斜文本，而不是使用专门设计的斜体字形（如果该字体没有斜体版本）。

Italic 和 Oblique 的区别：
虽然 italic 和 oblique 看起来通常很相似，但有细微的区别。italic 通常指的是字体专门设计的斜体版本，而 oblique 是常规字体的倾斜版本。如果字体没有专门的斜体样式，浏览器通常会使用 oblique 作为后备。

4.2 font-style 示例

em {
  font-style: italic; /* 将强调文本设为斜体 */
}
.quote {
  font-style: oblique; /* 对引用使用倾斜样式 */
}
p {
  font-style: normal; /* 重置任何继承的字体样式 */
}

4.3 font-style 的最佳实践

  • 用于强调： 使用斜体来强调特定的单词或短语。
  • 考虑可读性： 避免对大段文本使用斜体，因为这会造成阅读困难。
  • 使用语义正确的元素： 使用 <em> 元素表示语义上的强调，仅在没有特定语义含义时才使用 <i> 元素。然后可以将 font-style 属性应用于这些元素以进行样式设置。