编辑“︁CSS字体系列”︁（章节）

= CSS字体系列 =

== 介绍 ==
'''CSS字体系列'''（CSS Font Families）是CSS中用于定义文本显示字体的核心属性，通过`font-family`属性指定。字体选择直接影响网页的可读性和视觉风格，开发者可以指定一个或多个字体作为备选方案（称为“字体栈”），确保在不同操作系统或设备上都能优雅降级。

== 基本语法 ==
`font-family`属性接受一个由逗号分隔的字体名称列表，浏览器会优先使用列表中的第一个可用字体。语法结构如下：

<syntaxhighlight lang="css">
selector {
    font-family: "首选字体", "备用字体1", "备用字体2", generic-family;
}
</syntaxhighlight>

* '''带引号的字体名'''：包含空格或特殊字符的字体名称需用引号包裹（如`"Times New Roman"`）。
* '''通用字体系列'''（generic-family）：作为最终回退选项，例如`serif`（衬线体）、`sans-serif`（无衬线体）等。

== 字体分类与示例 ==
以下是常见的字体类型及其典型应用场景：

=== 1. 衬线体（Serif）===
适合印刷品和长文本阅读，如`Georgia`、`Times New Roman`。
<syntaxhighlight lang="css">
body {
    font-family: Georgia, "Times New Roman", serif;
}
</syntaxhighlight>

=== 2. 无衬线体（Sans-serif）===
现代网页设计首选，如`Arial`、`Helvetica`。
<syntaxhighlight lang="css">
h1 {
    font-family: Arial, Helvetica, sans-serif;
}
</syntaxhighlight>

=== 3. 等宽字体（Monospace）===
用于代码显示，如`Courier New`、`Consolas`。
<syntaxhighlight lang="css">
code {
    font-family: "Courier New", Consolas, monospace;
}
</syntaxhighlight>

== 字体栈设计原则 ==
设计字体栈时需考虑以下因素：
* '''跨平台兼容性'''：确保字体在Windows、macOS、Linux等系统均存在。
* '''性能'''：避免强制下载未安装的字体（除非使用`@font-face`）。
* '''风格一致性'''：备用字体应尽量接近首选字体的视觉比例。

示例：专业网站的字体栈
<syntaxhighlight lang="css">
article {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
</syntaxhighlight>

== 实际案例 ==
=== 案例1：响应式字体选择 ===
根据设备类型切换字体：
<syntaxhighlight lang="css">
/* 移动端使用系统默认无衬线体 */
@media (max-width: 600px) {
    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
}

/* 桌面端使用定制字体 */
@media (min-width: 601px) {
    body { font-family: "Garamond", "Baskerville", serif; }
}
</syntaxhighlight>

=== 案例2：代码高亮 ===
为代码块指定等宽字体：
<syntaxhighlight lang="html">
<pre>
    <code class="language-css">
        /* 这里显示CSS代码 */
    </code>
</pre>
</syntaxhighlight>
<syntaxhighlight lang="css">
.language-css {
    font-family: "SF Mono", Menlo, Monaco, monospace;
    font-size: 14px;
}
</syntaxhighlight>

== 高级技巧 ==
=== 使用CSS变量管理字体 ===
定义全局字体变量便于维护：
<syntaxhighlight lang="css">
:root {
    --main-font: "Open Sans", sans-serif;
    --code-font: "Fira Code", monospace;
}

body { font-family: var(--main-font); }
code { font-family: var(--code-font); }
</syntaxhighlight>

=== 字体匹配逻辑 ===
浏览器选择字体的过程可通过流程图表示：
<mermaid>
graph TD
    A[检查第一个字体] -->|可用| B[使用该字体]
    A -->|不可用| C[检查下一个字体]
    C -->|遍历所有选项| D[使用通用字体系列]
</mermaid>

== 数学公式支持 ==
当需要计算字体缩放比例时，可使用公式：
<math>
\text{实际大小} = \text{基准大小} \times \text{缩放系数}
</math>

== 注意事项 ==
* '''引号规则'''：英文字体名含空格时必须加引号，中文字体名推荐始终加引号。
* '''字体加载性能'''：自定义字体（如通过`@font-face`引入）可能引发布局偏移。
* '''安全字体'''：常见跨平台安全字体包括`Arial`、`Verdana`、`Georgia`等。

== 总结 ==
`font-family`是控制网页排版的基础属性，合理的字体栈设计能提升跨平台兼容性。建议始终以通用字体系列结尾，并通过CSS变量集中管理字体定义。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]