以下是以资深软件开发工程师的视角，对“CSS 字体”的专业回答。我将详细讲解 CSS 中与字体相关的属性及其用法，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，以 CSS 标准为基准，并与 HTML5 的上下文兼容。

CSS 字体

目录

  1. 引言
  2. CSS 字体概述
  1. CSS 字体相关属性
  2. CSS 字体属性的使用
  1. 实例：CSS 字体应用
  2. 最佳实践与注意事项
  3. 结论

1. 引言

CSS（层叠样式表）通过一系列字体相关属性，提供了对网页文本样式的精确控制。从字体选择到大小、粗细和间距，CSS 字体属性在 HTML5 页面设计中至关重要。本文将系统介绍 CSS 字体属性的定义、用法及其应用场景，帮助你掌握其核心知识并优化网页排版。

2. CSS 字体概述

2.1 什么是 CSS 字体？

  • 定义：CSS 字体是指通过 CSS 属性控制网页中文本的视觉表现，包括字体类型、大小、粗细、样式等。
  • 范围：涵盖基本属性（如 font-family）和高级特性（如 font-variation-settings）。

2.2 CSS 字体的作用

  • 美观性：提升页面视觉效果。
  • 可读性：优化文本清晰度和舒适度。
  • 品牌一致性：通过自定义字体强化设计风格。
  • 响应式设计：适配不同设备和屏幕尺寸。

3. CSS 字体相关属性

属性用途示例默认值
font-family指定字体族（优先级顺序）font-family: Arial, sans-serif;浏览器默认
font-size设置字体大小font-size: 16px;medium (约 16px)
font-weight设置字体粗细font-weight: bold;normal (400)
font-style设置字体样式（如斜体）font-style: italic;normal
line-height设置行高line-height: 1.5;normal (约 1.2)
font字体属性的简写font: italic bold 16px Arial;–
font-stretch拉伸或压缩字体（需字体支持）font-stretch: condensed;normal
font-variant设置变体（如小型大写）font-variant: small-caps;normal
font-feature-settings启用 OpenType 字体特性font-feature-settings: "liga" on;normal
font-variation-settings控制可变字体属性（如粗细、斜度）font-variation-settings: "wght" 700;normal
@font-face定义自定义字体@font-face { font-family: "Custom"; src: url("custom.woff2"); }–

4. CSS 字体属性的使用

4.1 基本字体设置

p {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
}
  • 效果：段落使用 Helvetica 字体（备选 Arial 和 sans-serif），18px 大小，正常粗细和样式，行高 1.6 倍。

4.2 高级字体控制

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

h1 {
  font: bold 24px/1.2 "MyFont", sans-serif;
  font-variant: small-caps;
  font-feature-settings: "kern" on, "liga" on;
}
  • 效果：标题使用自定义字体 MyFont，24px 粗体，小型大写，启用字距调整和连字特性。

5. 实例：CSS 字体应用

以下是一个综合使用 CSS 字体属性的 HTML5 页面：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 字体示例</title>
  <style>
    @font-face {
      font-family: "CustomFont";
      src: url("https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
    }

    body {
      font-family: "CustomFont", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      margin: 20px;
      max-width: 800px;
      margin: 0 auto;
    }

    h1 {
      font: bold 32px/1.2 "CustomFont", sans-serif;
      font-variant: small-caps;
      color: #333;
    }

    .intro {
      font-size: 18px;
      font-weight: 300;
      font-style: italic;
    }

    .highlight {
      font-weight: 700;
      font-feature-settings: "liga" on;
      background: #f0f0f0;
      padding: 2px 6px;
    }

    @media (max-width: 600px) {
      body { font-size: 14px; }
      h1 { font-size: 24px; }
    }
  </style>
</head>
<body>
  <h1>欢迎体验 CSS 字体</h1>
  <p class="intro">这是一个使用 <span class="highlight">HTML5</span> 和 CSS 字体属性的示例页面。</p>
  <p>通过自定义字体、粗细和行高，我们可以打造独特的排版效果。</p>
</body>
</html>
  • 运行方法：保存为 css-fonts.html，在浏览器中打开。
  • 效果：
  • 使用在线字体 Roboto，标题为小型大写粗体。
  • 简介段落为斜体轻粗细，关键字高亮显示。
  • 响应式调整字体大小。

6. 最佳实践与注意事项

  • 字体选择：
  • 指定多个备选字体（如 Arial, sans-serif）确保兼容性。
  • 使用 Web 安全字体或 CDN（如 Google Fonts）。
  • 性能优化：
  • 使用现代格式（如 WOFF2）减少加载时间。
  • 添加 font-display: swap; 避免字体加载延迟。
  • 示例：@font-face { font-family: "Custom"; src: url("custom.woff2"); font-display: swap; }
  • 可访问性：
  • 确保字体大小和对比度符合 WCAG（如至少 16px 或 1em）。
  • 避免过小或过于装饰的字体影响可读性。
  • 兼容性：
  • 高级属性（如 font-variation-settings）需检查浏览器支持（Chrome、Firefox 支持较好）。
  • 使用 Can I Use（caniuse.com）验证特性。
  • 调试：使用浏览器开发者工具检查字体加载和渲染。

7. 结论

CSS 字体属性为 HTML5 页面提供了强大的文本样式控制能力，从基本排版到高级特性，满足了多样化的设计需求。本文介绍了主要字体属性及其用法，并通过实例展示了实际应用。如需更多 CSS 知识，可参考 CSS 选择器 或访问 W3C 文档（w3.org）。

回答特点

  • 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
  • 实用性：从基础到高级，覆盖 CSS 字体核心知识。
  • 内部链接：通过 <a href="#ID"> 跳转，如 CSS 字体属性的使用。
  • 出站链接：嵌入正文，指向权威资源。

如何运行示例

  • 将代码保存为 .html 文件，在浏览器中打开即可体验（需联网加载字体）。