CSS Fonts (字体) 学习笔记

前言

在网页设计中，字体是非常重要的一部分，它可以影响到页面的整体效果。因此，我们需要对 CSS 中字体的使用进行深入的学习。

字体的分类

在 CSS 中，字体主要分为以下几种：

标准字体（Serif 和 Sans-serif），包括常见的 Times New Roman、Arial 等；
华丽字体（Cursive）如，Script MT Bold、Bradley Hand ITC 等美术风格字体；
等宽字体（Monospace），每个字符都有相同的宽度，如 Consolas、Courier New；
调节字体大小和粗细的属性，如 font-size、font-weight 等。

字体的引用

在 CSS 中引用字体有两种方式：

使用本地字体，即引用自己电脑上的字体文件，代码如下：
```
cssCopy Code
@font-face {
    font-family: "My Font";
    src: url("myfont.ttf");
}
```
font-family 可以自定义字体名称，src 指定了字体文件的路径。
使用网络字体，即从一个 URL 引用字体，代码如下：
```
cssCopy Code
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
    font-family: 'Open Sans', sans-serif;
}
```
在此例中，我们使用了 Google Fonts 提供的公共 CDNN 的 URL 引入了 Open Sans 字体，并设置 body 中的字体为 'Open Sans', sans-serif。

具体实例

下面是一个简单的例子，展示了如何在 CSS 中使用不同类型的字体：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
		body {
			font-family: "Open Sans", sans-serif;
		}
		h1 {
			font-family: Times New Roman, serif;
		}
		h2 {
			font-family: "Bradley Hand ITC", cursive;
		}
		p {
			font-family: Consolas, monospace;
		}
	</style>
</head>
<body>
	<h1>标题 1 （标准字体）</h1>
	<h2>标题 2 （华丽字体）</h2>
	<p>这是一段等宽字体。</p>
	<p>这是一段默认字体。</p>
</body>
</html>

以上代码将网页的标题 1 设置为标准字体（Times New Roman），标题 2 设置为华丽字体（Bradley Hand ITC），两段文字分别用等宽字体（Consolas）和默认字体（Open Sans）展示。

结论

通过这篇学习笔记，我们了解了 CSS 字体的分类、引用方式及具体实例。好的字体可以为网页增色不少，我们需要灵活运用常见字体以及开放式字体，为我们的网页提供更好的阅读体验。