掌握 CSS 字体的五大核心属性：font-family、font-size、font-weight、font-style 和 line-height。
理解“Web 安全字体”与“自定义字体（Web Fonts）”的区别及应用场景。
学会使用相对单位（em, rem, vw）实现响应式排版，确保多设备下的可读性。
能够利用 @import 或 <link> 标签引入 Google Fonts 等外部字体资源。
了解辅助排版属性如 letter-spacing 和 text-transform 的作用。
CSS 字体（Fonts）用于样式化和增强网页文本的外观，使其更具可读性和视觉吸引力。它们不仅控制文本的显示方式，还确保文本与整体设计风格完美融合。
核心作用：
样式控制：设置文本的大小、粗细、风格（如斜体）和颜色。
一致性：帮助在整个网站中创建统一且美观的视觉效果。
可读性与主题对齐：提升阅读体验，并使文本风格符合网站的品牌主题。
<!DOCTYPE html>
<html>
<head>
<style>
.tech-font {
font-family: "Arial", "Helvetica", sans-serif;
font-size: 60px;
color: #090; /* 绿色 */
text-align: center;
}
</style>
</head>
<body>
<div class="tech-font">DevMaster 技术博客</div>
</body>
</html>代码解析：
该代码将文本 "DevMaster 技术博客" 设置为 60px 大小的 Arial 字体。
颜色被设定为绿色（#090）。
文本在页面中居中对齐。
使用了 .tech-font 类在 HTML 中进行样式绑定。
CSS 通过一系列特定属性来控制文本的风格和外观。以下是五个最关键的属性：
font-family 属性定义了文本应使用的字体。你可以提供一个字体列表作为“回退机制”，以防首选字体在用户设备上不可用。
语法：
font-family: "首选字体", "备选字体", 通用字体族;示例：
body {
font-family: "Arial", sans-serif;
}说明： 浏览器会首先尝试使用 Arial 显示文本。如果用户的系统中没有安装 Arial，它将回退到系统默认的无衬线字体（sans-serif）。
font-size 属性控制文本的大小。你可以使用多种单位来设置，包括像素（px）、相对单位（em）和百分比（%）。
语法：
font-size: 值;示例：
h1 {
font-size: 32px; /* 固定像素值 */
}
p {
font-size: 1.2em; /* 相对于父元素字体大小 */
}单位对比：
Pixels (px)：提供固定的字体大小，不随用户设置或父元素变化。
Ems (em)：相对于父元素的字体大小，非常适合响应式设计，能实现层级缩放。
font-weight 属性控制文本的粗细程度。它可以接受关键字（如 normal, bold）或数值（100 到 900）。
语法：
font-weight: 值;示例：
p {
font-weight: bold; /* 加粗文本 */
}
strong {
font-weight: 700; /* 数值 700 等同于 bold */
}说明： 数值允许更精细的控制，例如 100 代表极细（Thin），900 代表极粗（Extra Bold）。
font-style 属性定义字体的风格，通常用于设置斜体。
语法：
font-style: 值;示例：
em {
font-style: italic; /* 斜体文本 */
}
p {
font-style: normal; /* 正常文本，用于取消继承的斜体 */
}line-height 属性定义文本行之间的垂直间距。增加行高可以显著提高长段落的可读性。
语法：
line-height: 值;示例：
p {
line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
}建议： 对于正文内容，通常推荐将 line-height 设置在 1.5 到 1.8 之间，以获得最佳的阅读体验。
Web 安全字体是指在所有主流浏览器和操作系统中广泛支持的字体。这些字体通常预装在大多数计算机上，能确保你的文本在不同设备上显示一致。
常见的 Web 安全字体：
Arial
Times New Roman
Courier New
Verdana
Georgia
使用示例：
body {
font-family: "Verdana", sans-serif;
}自定义字体允许你使用用户设备上未预装的字体。你可以通过“Web 字体”技术加载它们。最流行的方法是使用 Google Fonts 服务，或者将字体文件托管在自己的服务器上。
使用 Google Fonts 示例：
<head>
<!-- 引入 Roboto 字体 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Roboto', sans-serif;">你好，世界！</h1>
</body>优势： 极大地丰富了网页设计的视觉表现力，使品牌风格更加独特。
为了使排版能够适应不同的屏幕尺寸，建议使用相对单位（如 em, rem, %, vw）来设置字体大小。此外，结合 CSS 媒体查询（Media Queries）可以确保文本在各种设备上保持良好的可读性。
示例代码：
body {
font-size: 16px; /* 默认字体大小 */
}
@media (max-width: 600px) {
body {
font-size: 14px; /* 在小屏幕上减小字体 */
}
}关键单位解析：
em 和 rem：这些单位分别相对于父元素或根元素（html）的字体大小，能够实现更好的比例缩放。
vw (Viewport Width)：该单位根据视口宽度缩放字体大小，非常适合流体布局（Fluid Layouts），使文字随屏幕宽度自动调整。
为了在 Web 设计中有效地定制字体，理解以下主要属性至关重要：
回退机制：在设置 font-family 时，务必提供通用字体族（如 sans-serif）作为后备，以防首选字体加载失败。
相对单位优先：在响应式设计中，优先使用 rem 或 em 而非 px，以便字体能随用户偏好或屏幕尺寸自动缩放。
行高的重要性：合适的 line-height（通常为 1.5 左右）是提升长文阅读体验的关键，切勿忽略。
Web 字体加载：使用 Google Fonts 等服务可以轻松引入高质量自定义字体，但需注意网络加载性能。
属性组合：熟练使用 font 简写属性（如 font: italic bold 16px/1.5 Arial;）可以提高编码效率。
在响应式设计中，使用 rem 单位设置字体大小相比于 px 单位有什么主要优势？
如果我想让一段文本的所有字母都自动转换为大写，应该使用哪个 CSS 属性？请写出代码示例。
为什么在设置 font-family 时，通常建议在自定义字体后面加上 sans-serif 或 serif？如果不加会发生什么情况？