CSS字体系列[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

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

基本语法[编辑 | 编辑源代码]

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

selector {
    font-family: "首选字体", "备用字体1", "备用字体2", generic-family;
}

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

字体分类与示例[编辑 | 编辑源代码]

以下是常见的字体类型及其典型应用场景：

1. 衬线体（Serif）[编辑 | 编辑源代码]

适合印刷品和长文本阅读，如`Georgia`、`Times New Roman`。

body {
    font-family: Georgia, "Times New Roman", serif;
}

2. 无衬线体（Sans-serif）[编辑 | 编辑源代码]

现代网页设计首选，如`Arial`、`Helvetica`。

h1 {
    font-family: Arial, Helvetica, sans-serif;
}

3. 等宽字体（Monospace）[编辑 | 编辑源代码]

用于代码显示，如`Courier New`、`Consolas`。

code {
    font-family: "Courier New", Consolas, monospace;
}

字体栈设计原则[编辑 | 编辑源代码]

设计字体栈时需考虑以下因素：

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

示例：专业网站的字体栈

article {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

实际案例[编辑 | 编辑源代码]

案例1：响应式字体选择[编辑 | 编辑源代码]

根据设备类型切换字体：

/* 移动端使用系统默认无衬线体 */
@media (max-width: 600px) {
    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
}

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

案例2：代码高亮[编辑 | 编辑源代码]

为代码块指定等宽字体：

<pre>
    <code class="language-css">
        /* 这里显示CSS代码 */
    </code>
</pre>

.language-css {
    font-family: "SF Mono", Menlo, Monaco, monospace;
    font-size: 14px;
}

高级技巧[编辑 | 编辑源代码]

使用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); }

字体匹配逻辑[编辑 | 编辑源代码]

浏览器选择字体的过程可通过流程图表示：

数学公式支持[编辑 | 编辑源代码]

当需要计算字体缩放比例时，可使用公式： $实际大小 = 基准大小 \times 缩放系数$

注意事项[编辑 | 编辑源代码]

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

总结[编辑 | 编辑源代码]

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