Menu
CoddyTech

字体系列

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 18 课,共 76 课。

在 CSS 中,font-family 属性用于指定 HTML 元素中文本的字体。你可以用这个属性列出文本的首选字体。如果第一种字体不可用,浏览器会使用列表中的下一种字体,以确保外观相似。

以下是使用 font-family 属性的基本语法:

selector {
    font-family: font1, font2, generic-family;
}
  • font1, font2:首选字体系列名称,按优先顺序排列。如果没有 font1,浏览器会尝试 font2,依此类推。
  • generic-family:通用字体族名称,例如 serif、sans-serif、monospace、cursive 或 fantasy。如果指定的字体都不可用,它会作为后备字体。

指定字体系列名称时,请遵循以下规则:

  • 如果字体系列名称中包含空格,应将其用引号括起来(例如,"Times New Roman"、"Courier New")。
  • 多个字体系列名称之间要用逗号分隔。
  • 最好在列表末尾添加一个通用字体系列,以确保指定的字体都不可用时使用合适的备用字体。

例如:

p {
    font-family: Arial, Helvetica, sans-serif;
}
challenge icon

挑战

简单

给你一个包含标题(<h1>)和段落(<p>)的 HTML 文档。你的任务是使用 font-family 属性为这些元素设置样式。请按以下步骤操作:

  1. 编写一条 CSS 规则,选择 <h1> 元素。将 font-family 设置为 "Times New Roman", Times, serif。
  2. 编写一条 CSS 规则,选择 <p> 元素。将 font-family 设置为 Arial, Helvetica, sans-serif。

亲手试试

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

使用 CSS 添加样式中的所有课

自己练习: Web 在线编辑器