CSS 字体
选择合适的字体是网页设计中至关重要的一环，它直接影响到网站的风格和可读性。CSS 提供了一系列属性来控制字体。
font-family
font-family 属性用于指定元素的字体。由于你无法保证用户的电脑上安装了你指定的特定字体，因此 font-family 属性可以接受一个由多个字体名称组成的“字体栈” (font stack)，用逗号隔开。
浏览器会从左到右依次检查列表中的字体，并使用第一个在用户系统上可用的字体。
css
p {
font-family: "Times New Roman", Times, serif;
}在这个例子中，浏览器会首先尝试使用 "Times New Roman"。如果找不到，它会尝试 Times。如果还找不到，它会使用系统默认的 serif (衬线) 字体。
最佳实践:
- 字体名包含空格时要用引号：如
"Times New Roman"。 - 最后提供一个通用字体族：总是在字体栈的最后提供一个通用字体族（如
serif,sans-serif,monospace），作为后备选项。
通用字体族
serif: 带有“小脚”或装饰性笔画的字体，如 Times New Roman。常用于印刷体。sans-serif: “无衬线”字体，线条简洁，如 Arial, Helvetica。是网页中最常用的字体类型。monospace: 等宽字体，每个字符占据相同的宽度，如 Courier。常用于显示代码。cursive: 草书字体，模仿手写风格。fantasy: 装饰性字体，用于标题等。
font-style
font-style 属性主要用于指定字体的样式，通常是用来设置斜体。
normal: (默认) 正常显示的文本。italic: 使用字体的斜体版本。oblique: 如果字体没有斜体版本，浏览器会通过倾斜正常版本的文字来模拟斜体。
css
p.italic {
font-style: italic;
}font-weight
font-weight 属性用于设置字体的粗细（字重）。
normal: (默认) 正常粗细，等同于400。bold: 粗体，等同于700。- 你也可以使用数字值：
100,200, ...,900。但这需要字体本身支持这些不同的字重。
css
p.bold {
font-weight: bold;
}
p.light {
font-weight: 300;
}font-size
font-size 属性用于设置字体的大小。
- 像素 (px):
font-size: 16px;。这是一个绝对单位，提供了精确的控制。 - em:
font-size: 1.2em;。这是一个相对单位，1em等于当前元素的父元素的字体大小。1.2em意味着是父元素字号的 1.2 倍。 - rem (root em):
font-size: 1.2rem;。这是 CSS3 中引入的单位，1rem等于根元素 (<html>) 的字体大小。使用rem可以方便地实现整个网站的字体大小缩放，是现代响应式设计中的首选单位。 - 百分比 (%):
font-size: 120%;。类似于em。
css
html {
font-size: 16px; /* 定义根字号 */
}
body {
font-size: 1rem; /* 等于 16px */
}
h1 {
font-size: 2rem; /* 等于 32px */
}font (简写属性)
和 background 类似，font 也是一个简写属性，可以让你在一行内设置多个字体相关的属性。顺序如下：
font: font-style font-weight font-size/line-height font-family;
注意: font-size 和 font-family 是必须的。
css
p {
font: italic bold 16px/1.5 Arial, sans-serif;
}@font-face (Web 字体)
如果你想使用用户电脑上没有安装的自定义字体，可以使用 CSS3 的 @font-face 规则。这允许你从服务器上加载字体文件。
css
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
body {
font-family: 'MyCustomFont', sans-serif;
}像 Google Fonts 这样的服务，可以让你轻松地在网站上使用大量高质量的免费 Web 字体。