CSS 字体

CSS 字体

在网站设计中，选择合适的字体至关重要，能直接影响用户的体验。

合适的字体能够增强文本可读性，营造舒适的视觉感受，使用户更轻松地获取信息，沉浸于网站内容之中。

按照字体的外观风格和设计特点，字体可分为：

• 衬线字体
  Times New Roman
• 无衬线字体
  Arial
• 等宽字体
  Courier New
• 草书字体
  Comic Sans MS
• 幻想字体
  Papyrus

1. 衬线字体(Serif)

衬线字体（Serif）是西文字体设计中的一种经典风格，特点是笔画末端有装饰性衬线（小短线），笔画粗细对比明显。

这种字体风格源于古罗马石刻文字，适合长篇阅读，常见于书籍、报纸和杂志。

示例（Times New Roman）：
"The quick brown fox jumps over the lazy dog."
"敏捷的棕色狐狸跳过了懒惰的狗。"

• 常见的衬线字体：Times New Roman（传统印刷）、Georgia（屏幕友好的衬线体）、Garamond（优雅复古）。

2. 无衬线字体(Sans-serif)

无衬线字体（Sans-serif）是西文字体设计中的一种现代风格，特点是整体线条简洁、粗细均匀，视觉上更加干净利落。

这种字体因其高辨识度和易读性，尤其适合屏幕显示、UI设计和标题应用，广泛用于网页、广告和数字媒体。

示例（Arial）：
"The quick brown fox jumps over the lazy dog."
"敏捷的棕色狐狸跳过了懒惰的狗。"

• 常见的无衬线字体：Helvetica（经典中性）、Arial（通用屏幕字体）、Roboto（现代科技感）。

3. 等宽字体(Monospace)

等宽字体（Monospace）是一种特殊的字体设计风格，特点是每个字符（包括字母、数字、符号等）占据相同的水平宽度。

这种字体在编程、代码编辑、终端显示和表格排版等场景中广泛应用，它能确保代码缩进、对齐和格式的精确性。

示例（Courier New）：
"The quick brown fox jumps over the lazy dog."
"敏捷的棕色狐狸跳过了懒惰的狗。"

• 常见的等宽字体：Courier New（经典打字机风格）、Consolas（屏幕优化，适合编程）、Roboto Mono（代码编辑）。

4. 草书字体(Cursive)

草书字体（Cursive）是一种手写连笔风格的字体类型，特点是笔画流畅、字母衔接自然，呈现优雅、随性化的视觉效果。

这种字体风格常用于品牌标志、邀请函、广告标题等需要展现个性、复古或奢华感的场合。

示例（Times New Roman）：
"The quick brown fox jumps over the lazy dog."
"敏捷的棕色狐狸跳过了懒惰的狗。"

• 常见的草书字体：Brush Script（活泼的笔刷风格）、Lobster（现代流行，圆润流畅）、Zapfino（华丽古典，适合高端设计）、Segoe Script（微软系统自带，自然手写感）。

5. 幻想字体(Fantasy)

幻想字体（Fantasy）是一类极具风格化的装饰性字体，常用于营造奇幻、科幻、童话或哥特式的视觉氛围。

这种字体带有夸张的笔画、独特地装饰，适用于游戏、电影、书籍封面等需要强烈主题感的场景。

示例（Fantasy）：
"The quick brown fox jumps over the lazy dog."
"敏捷的棕色狐狸跳过了懒惰的狗。"

• 常见的草书字体：Blackletter（哥特体）、Dungeon：仿古石刻体）、Ringbearer（《指环王》风格字体）、Cyberpunk（霓虹灯体）、Jokerman（扭曲俏皮体）。

CSS font-family 属性

font-family属性用于指定元素的字体族名称或字体族名称列表（按优先级排列）：

selector {
    font-family: "字体名称", 备用字体, 通用字体族;
}

在字体调用方面，我们拥有多种灵活的选择方案：

• 系统默认字体：直接调用用户设备预装的通用字体，兼容性好且无需额外加载。
• 自定义字体：通过@font-face自托管字体文件（如.woff2优先、.woff、.ttf），实现品牌化设计。
• 第三方字体：借助第三方服务（如 Google Fonts API）快速引入数百种高质量字体，无需本地存储。

1. 系统默认字体（最轻量）

使用默认字体是我们最常用的字体调用方式，它无需额外加载时间，兼容所有浏览器，适合性能敏感场景。

如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji";
}

适用场景：

• 内容型网站（如新闻、博客）
• 移动端或低网速环境
• 对品牌字体要求不高的场景

2. 自定义字体（品牌化控制）

使用默认字体是我们最常用的字体调用方式，它无需额外加载时间，兼容所有浏览器，适合性能敏感场景

@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
    font-display: swap; /* 避免布局偏移 */
}

适用场景：

• 企业官网、品牌电商等需要强化视觉识别度的场景
• 设计稿中必须使用的非标准字体

3. 第三方字体服务（快速丰富）

使用默认字体是我们最常用的字体调用方式，它无需额外加载时间，兼容所有浏览器，适合性能敏感场景。

<link rel="preconnect" href="https://fonts.googleapis.com">

适用场景：

• 快速原型开发或设计系统搭建
• 需要多语言字体支持（如Noto Sans涵盖多种语言）

常见网页字体