CSS 字体

字体是网页排版的核心。CSS 提供了从基本字体属性到自定义 Web 字体的完整控制。

font-family — 字体族

指定元素使用的字体，可以设置多个作为回退：

css 
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

浏览器按顺序检查：如果 system-ui 不可用，尝试 -apple-system，依此类推。最后一个通常是通用字体族，作为兜底。

通用字体族

族名说明示例字体
serif衬线体，笔画末端有装饰Georgia, Times New Roman
sans-serif无衬线体，笔画干净Arial, Helvetica, system-ui
monospace等宽字体，每个字符宽度相同Consolas, Courier New
cursive手写体/草书Comic Sans, Brush Script
fantasy装饰性字体Impact, Papyrus
css 
/* 中文排版：先写中文字体，再写英文/通用 */
body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

system-ui — 系统原生字体

现代项目中，system-ui 作为首选，让网站在各平台上使用操作系统的最佳字体（Windows 用 Segoe UI，macOS 用 San Francisco，Android 用 Roboto）。零加载时间、零额外请求。

font-size — 字号

css 
html {
  font-size: 16px; /* 浏览器默认，通常不用改 */
}

h1 { font-size: 2.5rem; }      /* 40px */
h2 { font-size: 1.875rem; }    /* 30px */
p { font-size: 1rem; }         /* 16px */
.small { font-size: 0.875rem; } /* 14px */

推荐使用 rem 而非 px 设置字号（见 CSS 宽高与尺寸 中关于 rem 的说明）。

font-weight — 字重

控制字体的粗细：

css 
.light { font-weight: 300; }    /* 细体 */
.normal { font-weight: 400; }   /* 常规（默认） */
.medium { font-weight: 500; }   /* 中等 */
.semibold { font-weight: 600; } /* 半粗 */
.bold { font-weight: 700; }     /* 粗体 */
.black { font-weight: 900; }    /* 特粗 */

常用关键字：normal（=400）、bold（=700）。并不是所有字体都支持所有字重——如果指定的字重不存在，浏览器会选择一个最接近的。

font-style — 斜体

css 
.italic { font-style: italic; }   /* 斜体 */
.oblique { font-style: oblique; } /* 倾斜（与 italic 区别细微） */
.normal-text { font-style: normal; } /* 取消斜体 */

italic 使用字体设计的专用斜体字形，oblique 则是将正常字形机械倾斜。大多数情况下用 italic。

font 简写

可以将所有字体属性合并到一条声明中：

css 
.text {
  font: italic 600 1rem/1.75 'JetBrains Mono', monospace;
  /*     style weight size/line-height family */
}

简写的必需值只有 font-size 和 font-family，且 font-size 必须在 font-family 前面。

font 简写有几个陷阱：它会把所有未声明的字体属性重置为初始值。如果你先设置了 font-weight: 700，再用 font: 16px sans-serif，字重会被重置为 normal。font 简写适合一次性完整设置，日常推荐用分写属性。

@font-face — 自定义字体

@font-face 让你在网页中使用服务器上的字体文件：

css 
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 加载策略 */
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

字体的完整定义

同一字体的不同变体需要分别声明：

css 
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

字体格式

格式说明
.woff2推荐——压缩率最高，所有现代浏览器支持
.woff广泛兼容的良好回退
.ttf / .otf桌面字体格式，不建议用于 Web（文件大）
.eot仅 IE，现代项目不需要

font-display — 加载策略

控制 Web 字体加载期间文字的显示方式：

值行为
swap推荐——立即显示回退字体，字体加载后替换
block短暂隐藏文字（最多 3s），加载后显示
fallback短暂隐藏（~100ms），之后显示回退字体；若字体在 swap 期内加载完成则替换，超时后不再替换
optional短暂隐藏，网络差时放弃加载字体
auto浏览器默认行为

swap 是多数场景的最佳选择——它确保内容立即可见（不会被 FOIT（Flash of Invisible Text，不可见文字闪烁）遮挡），字体加载完成后平滑切换。唯一的代价是用户可能短暂看到回退字体（FOUT，Flash of Unstyled Text，无样式文字闪烁），但比看不到文字要好得多。

Web 安全字体 vs Web 字体

Web 安全字体是几乎所有操作系统都预装的字体，无需额外下载：

css 
/* 三种常见的 Web 安全字体栈 */
.sans  { font-family: Arial, Helvetica, sans-serif; }
.serif { font-family: Georgia, 'Times New Roman', serif; }
.mono  { font-family: 'Courier New', Courier, monospace; }

Web 字体需要从服务器或 CDN 加载（如 Google Fonts）。

html 
<!-- 引入 Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

使用 Google Fonts 等外部字体服务时，注意隐私合规（GDPR 等）和国内网络环境——Google Fonts 在国内可能加载缓慢或完全不可用。可以将字体文件下载到自己的服务器上并使用 @font-face 引入。