LabEx
登录免费加入

使用 CSS 字体属性设置文本样式

JavaScriptBeginner
立即练习

介绍

在本实验中，学生将学习如何使用 CSS 字体属性来设置文本样式，探索网页设计中的基本排版技巧。本教程将引导学习者创建一个 HTML 文档，并应用各种字体样式方法，包括字体族（font family）、大小（size）、行高（line height）、样式（style）和粗细（weight）。

参与者将从设置基本的 HTML 结构开始，然后通过实现控制文本外观的 CSS 属性，逐步提升他们的排版技能。通过动手实践，学生将发现如何使用不同的字体技术创建视觉上吸引人且易于阅读的网页内容，从而获得网页排版设计的实际经验。

创建 HTML 文件并设置基本结构

在这一步中，你将学习如何创建一个 HTML 文件并设置其基本结构，以便使用 CSS 对文本进行样式设置。我们将使用 WebIDE 创建一个新的 HTML 文档，作为我们排版样式练习的基础。

首先，在 WebIDE 中导航到 ~/project 目录。右键点击文件资源管理器并选择“新建文件”，创建一个名为 typography.html 的新文件。

以下是你将创建的基本 HTML 结构：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Typography Styling</title>
    <style>
      /* 我们将在后续步骤中在此处添加 CSS 样式 */
    </style>
  </head>
  <body>
    <h1>Welcome to CSS Typography</h1>
    <p>This paragraph will demonstrate various text styling techniques.</p>
  </body>
</html>

让我们分解一下这个 HTML 结构的关键部分：

  • <!DOCTYPE html> 声明这是一个 HTML5 文档
  • <html lang="en"> 设置文档的语言
  • <head> 包含文档的元数据
  • <meta charset="UTF-8"> 确保正确的字符编码
  • <meta name="viewport"> 有助于实现响应式设计
  • <title> 设置页面标题
  • <style> 标签是我们将添加 CSS 的地方（我们将在后续步骤中扩展它）
  • <body> 包含页面的可见内容

在浏览器中打开此文件时的示例输出：

[一个简单的页面，包含标题 "Welcome to CSS Typography"
以及其下方的一个段落]

为标题应用字体族

在这一步中，你将学习如何使用 CSS 为标题应用不同的字体族（font family）。字体族是一个关键属性，用于确定文本的字型，使你能够创建视觉上吸引人且易于阅读的排版。

在 WebIDE 中打开 typography.html 文件，并修改 <style> 部分以添加字体族属性：

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

让我们探讨一下字体族的关键概念：

  1. Web 安全字体（Web Safe Fonts）：这些字体通常在不同设备和浏览器中普遍可用。

    • 无衬线字体（如 Arial）：简洁、现代的外观
    • 衬线字体（如 Times New Roman）：传统、正式的外观

  2. 备用字体（Fallback Fonts）：始终提供一个通用字体族作为后备

    • sans-serif
    • serif
    • monospace

  3. 多个字体选项：按优先级列出字体

    • 第一个字体是首选
    • 如果前面的字体不可用，则使用后续字体作为备用

扩展你的 HTML 以展示不同的标题：

<body>
  <h1>主标题 (Arial)</h1>
  <h2>副标题 (Times New Roman)</h2>
  <p>段落文本使用 Verdana</p>
</body>

在浏览器中的示例输出：

[一个页面显示：
- 主标题使用 Arial
- 副标题使用 Times New Roman
- 段落文本使用 Verdana]

设置字体大小和行高

在这一步中，你将学习如何通过使用 CSS 设置字体大小和行高来控制文本的可读性和外观。这些属性对于创建视觉上吸引人且易于阅读的排版至关重要。

打开 typography.html 文件，并使用以下 CSS 更新 <style> 部分：

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

让我们分解一下关键概念：

  1. 字体大小（Font Size）：

    • 以像素（px）、em 或 rem 为单位
    • 控制文本的高度
    • 典型大小：
      • 标题：24-36px
      • 正文：14-16px

  2. 行高（Line Height）：

    • 控制文本行之间的垂直间距
    • 提高可读性
    • 通常设置为 1.4 到 1.6
    • 可以是无单位的（推荐）或以像素为单位

扩展你的 HTML 以展示不同的文本大小：

<body>
  <h1>主标题 (36px)</h1>
  <h2>副标题 (24px)</h2>
  <p>段落文本增加了行高以提高可读性。</p>
</body>

在浏览器中的示例输出：

[一个页面显示：
- 较大的主标题
- 较小的副标题
- 具有舒适行间距的段落]

添加字体样式和粗细

在这一步中，你将学习如何使用字体样式（font style）和粗细（font weight）通过 CSS 为文本添加强调和变化。这些属性有助于创建视觉层次结构，并提升排版的整体设计效果。

打开 typography.html 文件，并使用以下 CSS 更新 <style> 部分：

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

让我们探讨一下关键概念：

  1. 字体样式（Font Style）：

    • normal：标准文本外观
    • italic：斜体文本
    • oblique：类似于斜体，但不常见

  2. 字体粗细（Font Weight）：

    • normal：常规文本（400）
    • bold：更粗、更突出的文本（700）
    • 数值：100-900（以 100 为增量）
      • 400：常规
      • 600：半粗体
      • 700：粗体

修改你的 HTML 以展示这些属性：

<body>
  <h1>主标题（斜体和粗体）</h1>
  <h2>副标题（半粗体）</h2>
  <p>
    常规段落文本。
    <span class="highlight">这段文本被高亮显示</span>。
  </p>
</body>

在浏览器中的示例输出：

[一个页面显示：
- 主标题为斜体和粗体
- 副标题为半粗体
- 包含高亮显示的段落文本]

使用简写属性组合字体样式

在这一步中，你将学习如何使用 CSS 的 font 简写属性，将多个与字体相关的属性组合成一个简洁的声明。这种方法可以使你的 CSS 更具可读性和效率。

打开 typography.html 文件，并使用以下 CSS 更新 <style> 部分：

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

让我们分解一下 font 简写属性的语法：

  1. 基本语法：font: [font-style] [font-weight] [font-size] [line-height] [font-family]

    • 顺序很重要！
    • 并非所有值都是必需的

  2. 常见的简写模式：

    • font: style weight size family
    • font: size/line-height family
    • font: weight size family

修改你的 HTML 以展示简写属性：

<body>
  <h1>主标题（简写）</h1>
  <h2>副标题（紧凑语法）</h2>
  <p>带行高的段落。<span class="highlight">高亮文本</span>。</p>
</body>

在浏览器中的示例输出：

[一个页面显示：
- 主标题带有粗体和斜体样式
- 副标题使用紧凑的字体声明
- 段落包含集成的行高]

总结

在本实验中，参与者通过逐步学习的方式掌握了使用 CSS 字体属性进行文本样式设计的基础知识。初始阶段包括创建一个具有基本结构的 HTML 文件，设置必要的元数据，并为排版实验准备画布。学习者将接触到关键的 HTML 元素和属性，包括 DOCTYPE 声明、语言设置和视口配置。

实验进一步深入到实用的 CSS 样式技术，重点在于字体操作。参与者探索了为标题应用字体族、调整字体大小和行高，以及修改字体样式和粗细的方法。通过在 WebIDE 中直接操作并逐步构建他们的 HTML 和 CSS 代码，学生们获得了实践经验，能够改变文本外观，并理解不同字体属性如何共同作用以实现有效的网页排版。

相关 JavaScript 课程
JavaScript 入门

JavaScript 入门

javascriptweb-development
构建一个井字棋网页应用

构建一个井字棋网页应用

javascriptweb-development
创建打地鼠网页游戏

创建打地鼠网页游戏

javascriptweb-development