CSS 字体

CSS 字体

使用字体样式化文本

CSS 字体属性允许你控制文本的外观，包括其字体类型（font family）、大小（size）、字重（weight，粗细）、样式（style，斜体）以及其他变体。

Serif 与 Sans-serif 字体

字体通常根据外观分为几大类。两种常见的类别是：

• Serif 字体： 字体笔画末端带有小装饰性笔画（衬线）。例子包括 Times New Roman, Georgia, Garamond。Serif 字体常用于印刷品中的长篇正文，因为衬线有助于提高可读性。
• Sans-serif 字体： 不带衬线的字体（‘sans’ 意为 ‘没有’）。例子包括 Arial, Verdana, Helvetica, Open Sans。Sans-serif 字体被广泛认为在数字屏幕上更易于阅读，尤其是在较小的尺寸下，并且非常常用于 Web 正文和 UI 元素。

其他通用字体家族包括 monospace（所有字符宽度相同，如 Courier New 或 Consolas，常用于代码）、cursive（模仿手写，如 Brush Script MT）和 fantasy（装饰性或趣味性字体）。

font-family (字体家族)

font-family 属性为元素指定了一个优先列表的字体家族名称和/或通用字体家族名称。

你应该提供多个选项（一个“字体栈”，font stack）作为回退机制。浏览器首先尝试列表中的第一个字体。如果用户系统上没有该字体（或未通过 @font-face 加载），它会尝试列表中的下一个字体，以此类推。列表末尾应始终包含一个通用字体家族名称（如 sans-serif 或 serif），以确保如果找不到任何指定的字体，浏览器也能选择一个合适的替代字体。

包含空格的字体名称必须用引号括起来。

p {
  /* 尝试 'Open Sans'，然后是 'Helvetica Neue'，最后使用任何可用的 sans-serif 字体 */
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

code {
  /* 使用常见的等宽字体 */
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

Web 字体 (@font-face)

仅依赖用户系统上安装的字体会限制设计选择。@font-face 规则允许你随网站一起加载自定义字体文件（如 .woff、.woff2），从而确保所有用户的排版效果一致。

你使用 @font-face 定义字体，然后在你的 CSS 规则中引用定义的 font-family 名称。

/* 定义一个自定义字体 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.woff2') format('woff2'),
       url('/fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 使用自定义字体 */
h1 {
  font-family: 'MyCustomFont', sans-serif; /* 仍建议使用回退字体 */
}

Google Fonts 等服务提供了庞大的 Web 字体库，易于集成。

font-size (字体大小)

font-size 属性设置文本的大小。选择合适的单位对于可访问性和响应式设计至关重要。

• px (像素)： 绝对单位。定义固定大小。不利于可访问性，因为它不会随用户的浏览器字体大小偏好设置进行缩放。
• em： 相对单位。相对于父元素的字体大小。1em 等于父元素的字体大小。如果嵌套层级很深，可能会导致叠加效果。
• rem (root em)： 相对单位。相对于根元素 (<html>) 的字体大小。1rem 等于根元素的字体大小（浏览器默认通常为 16px）。通常首选用于可伸缩和可预测的排版，因为它避免了叠加问题并尊重用户偏好设置。
• % (百分比)： 类似于 em，相对于父元素的字体大小。
• 视口单位 (vw, vh)： 相对于视口的宽度或高度。可用于随屏幕尺寸缩放的流动排版。

现代最佳实践通常是在 <html> 元素上设置一个基准字体大小（例如 html { font-size: 100%; } 或 html { font-size: 16px; }），然后使用 rem 单位来设置整个网站的文本元素、内边距、外边距等的大小。这样一来，如果用户更改了其基准字体大小偏好设置，整个布局都可以按比例缩放。

html {
  font-size: 100%; /* 通常默认为 16px */
}

body {
  font-size: 1rem; /* 等同于根字体大小 (16px) */
  line-height: 1.5; /* 行高相对于字体大小 */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16px = 40px */
}

p {
  font-size: 1rem; /* 1 * 16px = 16px */
}

.small-text {
  font-size: 0.875rem; /* 0.875 * 16px = 14px */
}

font-weight (字重)

font-weight 属性指定文本的粗细。

它接受关键字（normal，bold）或从 100 到 900 的数字值（以 100 为增量）。normal 通常对应 400，而 bold 对应 700。

.normal-text {
  font-weight: normal; /* 或 400 */
}

.bold-text {
  font-weight: bold; /* 或 700 */
}

.light-text {
  font-weight: 300; /* 需要字体支持该字重 */
}

.extra-bold-text {
  font-weight: 800; /* 需要字体支持 */
}

注意：并非所有字体都支持所有字重。如果某个特定的数字字重不可用，浏览器通常会选择最接近的可用字重。

font-style (字体样式)

font-style 属性主要指定文本是否应为斜体。

• normal：正常显示文本。
• italic：如果字体有斜体版本，则显示为斜体。
• oblique：显示为正常字体的倾斜版本。如果字体有真实的斜体样式，通常优先使用 italic。如果没有斜体或倾斜样式可用，浏览器可能会模拟倾斜效果。

.emphasis {
  font-style: italic;
}

.simulated-slant {
  /* 如果不想要真实的斜体或斜体不可用，则使用 oblique */
  font-style: oblique;
}

font-variant (字体变体)

font-variant 属性允许你启用如小型大写字母（small caps）等字体排版变体。

最常见的用法是 font-variant: small-caps;，它将小写字母显示为缩小版的大写字母。这要求字体支持小型大写字母特性以实现真实渲染；否则，浏览器可能会模拟它。

.title-caps {
  font-variant: small-caps;
}

通过 font-variant-caps、font-variant-numeric 等属性可以实现更精细的控制。

可变字体 (Variable Fonts)

可变字体是一种现代字体格式，它将多种样式变体（如字重、字宽、倾斜）打包到单个文件中。你无需加载单独的文件来获取常规、加粗、细体、紧缩等样式，只需加载一个可变字体文件，即可通过 CSS 访问中间样式。

你可以使用 font-variation-settings 等底层属性来控制变体，或者越来越多地使用标准属性如 font-weight 和 font-style，这些属性在可变字体中可以接受更广泛的值范围。

/* 示例：对支持的可变字体使用 font-weight */
.variable-weight {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 650; /* 访问一个中间字重 */
}

font (字体) 简写属性

font 属性是一个简写属性，可以在一个声明中设置多个字体属性。它至少需要包含 font-size 和 font-family。

一般语法顺序是： font: [font-style || font-variant || font-weight] font-size[/line-height] font-family

示例：

body {
  /* 设置样式、字重、大小、行高和字体家族 */
  font: italic bold 1rem/1.6 sans-serif;
}

p {
  /* 仅设置必需的大小和字体家族 */
  font: 16px Arial, sans-serif;
}

注意：使用 font 简写属性会将任何省略的可选字体属性（如 font-style、font-weight、font-variant、line-height）重置为其初始值。

CSS 字体属性总结

属性 / 规则	描述
font	设置多个字体属性的简写属性。
font-family	指定字体家族（字体类型）。
font-size	指定字体的大小。
font-stretch	从字体家族中选择正常、紧缩或扩展的样式。
font-style	指定字体样式（normal、italic、oblique）。
font-variant	指定字体排版变体（例如 small-caps）。
font-weight	指定字体的字重（粗细）。
line-height	指定行框的高度（通常与字体属性一起设置）。
@font-face	定义和加载自定义 Web 字体的规则。