CSS入门第五课 - 字体（font）
在网页设计中，字体是非常重要的一部分，它直接影响到网站的可读性和视觉效果。CSS（层叠样式表）提供了一系列属性来控制文本的样式，包括字体的种类、大小、颜色、行高等。在本课中，我们将深入探讨如何使用CSS来设置字体。
1. 字体的基本属性
字体系列（font-family）
font-family 属性用于指定元素使用的字体。你可以指定具体的字体名称，也可以使用字体系列的名称，例如serif、sans-serif、monospace等。浏览器会根据这些名称选择合适的字体。
body {
font-family: Arial, sans-serif;
}
在这个例子中，我们首先指定了Arial字体，如果用户的设备上没有安装该字体，则退回到sans-serif系列的字体。
字体大小（font-size）
通过font-size属性可以设置字体的大小，这个属性可以使用像素（px）、百分比（%）、em等单位来定义。
h1 {
font-size: 36px;
}
p {
font-size: 16px;
}
在上面的代码中，h1标签的字体大小被设置为36像素，而p标签的字体大小被设置为16像素。
字体粗细（font-weight）
font-weight属性用于设置字体的粗细程度。可以使用关键词（如normal、bold）或数值（如100到900）。
strong {
font-weight: bold;
}
.light-text {
font-weight: 300; /* 细体字 */
}
这里，我们为strong标签设置为粗体，而.light-text类则使用细字体。
2. 字体样式（font-style）
font-style属性用于设置字体的样式，常见的值有normal、italic和oblique。
em {
font-style: italic; /* 斜体 */
}
在此例中，包含在em标签中的文本将呈现为斜体。
3. 行高（line-height）
line-height属性设置文本行之间的垂直距离，通常以数字、百分比或长度单位指定。适当的行高能够提高文本的可读性。
p {
line-height: 1.5; /* 行高为字体大小的1.5倍 */
}
4. 文本装饰（text-decoration）
text-decoration属性可以用于设置文本的装饰效果，例如下划线、删除线等。
a {
text-decoration: underline; /* 为链接添加下划线 */
}
del {
text-decoration: line-through; /* 删除线 */
}
5. 引入Web字体
除了使用系统字体外，CSS还可以通过@font-face规则和Google Fonts等平台引入Web字体。这样可以确保字体一致性和美观性。
以下是如何通过Google Fonts引入字体的示例：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
然后在CSS中使用该字体：
body {
font-family: 'Roboto', sans-serif;
}
6. 完整示例
下面是一个简单的HTML和CSS例子，展示了字体的各种属性如何应用于网页。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
}
h1 {
font-size: 36px;
font-weight: 700;
}
p {
font-size: 16px;
color: #333;
}
a {
text-decoration: underline;
color: blue;
}
</style>
<title>字体示例</title>
</head>
<body>
<h1>欢迎学习CSS字体</h1>
<p>这是一段示例文本，展示了如何使用 <strong>CSS</strong> 设置字体.</p>
<p>如果你对 <a href="#">此链接</a> 感兴趣，请点击。</p>
</body>
</html>
总结
掌握CSS字体属性的使用，能够帮助我们更好地控制网页文本的呈现效果，提高用户体验。在实际项目中，合理选用字体和设置样式是提升网页整体美感的重要一环。希望通过本课的学习，你能对CSS字体有一个更清晰的理解！
![[前端]单点登录 SSO](http://img.makehui.com/231.jpg)
