CSS 字体：font-family、font-size、font-weight

网页的文字是用户获取信息的主要载体，而 CSS 字体属性直接决定了这些文字呈现给读者的面貌。合理运用字体属性，不仅能提升页面的可读性，还能强化品牌调性、引导用户注意力。本文将系统讲解 font-family、font-size、font-weight 三个核心属性，从基础用法到进阶技巧，帮助你彻底掌握 CSS 字体的控制方法。

一、font-family：定义文字的"面孔"

font-family 属性用于指定元素文本所使用的字体家族。这是 CSS 字体属性中最基础也是最重要的一个，因为它直接决定了文字长什么样。

1.1 基本语法与取值类型

font-family 支持两类取值：字体名称和通用字体家族。

/* 指定具体字体 */
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;

/* 使用通用字体家族 */
font-family: sans-serif;
font-family: serif;
font-family: monospace;

通用字体家族是浏览器的备选方案，当指定字体不可用时，浏览器会自动回退到对应的通用家族。常见的通用家族包括 sans-serif（无衬线体）、serif（衬线体）、monospace（等宽字体）、cursive（手写体）和 fantasy（装饰体）。

1.2 字体回退机制

在生产环境中，我们通常会指定多个字体，形成一个"回退队列"。浏览器会从左到右依次检查字体是否可用，直到找到可以显示的字体为止。

/* 最佳实践：完整的中英文混排方案 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
               sans-serif;
}

上述代码的回退逻辑如下：先尝试系统的默认英文字体（如 San Francisco 或 Segoe UI），如果找不到则尝试下一个，直到 sans-serif 作为最终兜底。

1.3 字体名称的注意事项

当字体名称包含空格、数字或特殊符号时，必须用引号包裹。单引号和双引号均可，但建议团队统一使用双引号。

/* 正确写法 */
font-family: "Times New Roman", Georgia, serif;
font-family: "Segoe UI Light", sans-serif;

/* 错误写法 */
font-family: Times New Roman, Georgia, serif;

情况	示例	是否需要引号
单词字体	Arial, Roboto	否
多词字体	"Times New Roman"	是
数字开头	"2D3D69 Serif"	是
含特殊符号	"Haettenschweiler"	是

二、font-size：控制文字的"身材"

font-size 属性决定文字的大小，是页面排版中使用频率最高的属性之一。掌握各种单位系统和使用场景，是实现精准排版的关键。

2.1 单位系统详解

font-size 支持多种单位，每种单位有其特定的使用场景和浏览器行为。

/* 绝对单位 - 固定尺寸，不随父元素变化 */
p {
  font-size: 16px;    /* 像素，最常用 */
  font-size: 12pt;    /* 磅值，1pt = 1/72 英寸 */
}

/* 相对单位 - 相对于基准值计算 */
.container {
  font-size: 20px;
}

.child {
  font-size: 1.5em;   /* 相对于父元素的 font-size，即 30px */
  font-size: 1.2rem;  /* 相对于根元素 html 的 font-size */
  font-size: 150%;    /* 百分比，相对于父元素 */
}

/* 视口单位 - 相对于浏览器窗口 */
h1 {
  font-size: 5vw;     /* 视口宽度的 5% */
}

2.2 em 与 rem 的深度对比

em 和 rem 都是相对单位，但它们的参考基准不同，这个差异决定了各自的使用场景。

em 单位相对于当前元素的父元素 font-size 计算。如果在嵌套元素中使用 em，会产生"复合效应"——每一层都会基于上一层进行缩放。

/* em 的复合效应示例 */
.wrapper {
  font-size: 20px;
}

.wrapper .inner {
  font-size: 2em;   /* 40px */
}

.wrapper .inner .text {
  font-size: 2em;   /* 80px，复合增长 */
}

rem 单位始终相对于根元素（<html>）的 font-size 计算，不受嵌套层级影响，行为更加可预测。

/* rem 的稳定行为 */
html {
  font-size: 16px;
}

.parent {
  font-size: 2rem;  /* 32px */
}

.child {
  font-size: 2rem;  /* 同样是 32px */
}

特性	em	rem
参考基准	父元素 font-size	根元素 font-size
嵌套影响	有复合效应	无影响
可预测性	较低	较高
推荐场景	局部组件缩放	全局响应式排版

2.3 响应式字体大小

现代网页开发中，字体大小通常需要随视口宽度动态调整。除了前面提到的 vw 单位，更推荐使用 clamp() 函数实现更精细的控制。

/* clamp() 实现响应式字体 */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* 多段式响应式方案 */
body {
  font-size: clamp(14px, 2vw, 18px);
}

clamp(min, preferred, max) 函数表示：字体大小在 min 和 max 之间波动，当视口宽度允许时，优先使用 preferred 值（通常是与视口相关的单位）。

三、font-weight：调节文字的"粗细"

font-weight 属性控制文字的粗细程度，从极细到极粗共有多个档位。合理运用字重可以建立视觉层次，突出重点信息。

3.1 关键字取值

font-weight 支持一系列预定义关键字，使用直观易懂。

/* 关键字取值 */
.normal {
  font-weight: normal;    /* 等同于 400 */
}

.bold {
  font-weight: bold;      /* 等同于 700 */
}

.lighter {
  font-weight: lighter;   /* 比父元素细一档 */
}

.bolder {
  font-weight: bolder;    /* 比父元素粗一档 */
}

3.2 数字取值

更精确的控制可以使用 100 到 900 之间的整百数字。大多数英文字体只支持 400（normal）和 700（bold）两个档位，而精心设计的中文字体通常提供完整的 9 档字重。

/* 完整的 9 档字重 */
.thin {
  font-weight: 100;
}

.extra-light {
  font-weight: 200;
}

.light {
  font-weight: 300;
}

.normal {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.extra-bold {
  font-weight: 800;
}

.black {
  font-weight: 900;
}

3.3 font-weight 的回退规则

当指定字重不可用时，浏览器会自动选择最接近的可用车重。这个回退规则由 CSS 规范定义：

如果目标是 400，依次尝试 400 → 500 → 300 → 200 → 100 → 700 → 600 → 800 → 900
如果目标是 500，依次尝试 500 → 400 → 300 → 200 → 100 → 600 → 700 → 800 → 900
如果目标是 600，依次尝试 600 → 500 → 400 → 700 → 300 → 200 → 100 → 800 → 900
如果目标是 700 或更高，优先尝试更高的档位（如 700 → 800 → 900 → 600 → 500 → 400）

为了获得最佳渲染效果，建议在 font-face 规则中定义完整的字重系列，并使用 font-display: swap 确保文字快速可见。

四、综合实战：打造专业排版

掌握了三个属性的基本用法后，我们来看看如何在实际项目中综合运用它们。

4.1 完整的字体栈配置

/* 定义字体族和字重 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

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

/* 全局样式 */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code", "Consolas", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: var(--text-4xl);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

code {
  font-family: var(--font-mono);
  font-weight: 400;
}

strong, b {
  font-weight: 700;
}

4.2 建立视觉层次

优秀的排版通过字重、字号、字体的对比来建立信息的层次关系，引导用户阅读重点。

/* 标题系统：同一家族，不同字重和大小 */
.article-title {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-heading {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-top: 2em;
}

.subsection-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: 1.5em;
}

/* 正文：适中的字重保证可读性 */
.article-body {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.7;
  max-width: 65ch;  /* 最佳阅读行宽 */
}

/* 强调文字：加粗而非变色 */
.highlight {
  font-weight: 600;
  color: inherit;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: #666;
}

五、常见问题与最佳实践

5.1 跨平台字体一致性问题

不同操作系统的默认字体不同，中文字体在不同平台上的表现差异尤为明显。建议采用如下策略：

/* 跨平台中文方案 */
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", 
             "WenQuanYi Micro Hei", sans-serif;

这段配置覆盖了 macOS（PingFang SC）、Windows（Microsoft YaHei / Noto Sans CJK SC）和 Linux（WenQuanYi Micro Hei）三大平台，确保中文用户都能看到高质量的默认字体。

5.2 性能优化建议

字体会显著影响页面加载性能和渲染速度，以下是优化要点：

/* 使用 font-display 避免文字闪烁 */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;  /* 立即显示系统字体，字体加载后替换 */
}

/* 子集化字体文件，减少传输体积 */
@font-face {
  font-family: 'ChineseFont';
  src: url('font-zh.woff2') format('woff2');
  unicode-range: U+4E00-9FFF;  /* 只包含中文汉字范围 */
}

/* 预加载关键字体 */
<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

5.3 可访问性考量

字体设置需要考虑不同用户的需求，包括视力障碍用户和对字体敏感的人群。

/* 保持合理的行高，提升可读性 */
p, li {
  line-height: 1.6;  /* 建议不低于 1.5 */
}

/* 避免使用过小的字号 */
body {
  font-size: 16px;   /* 浏览器默认推荐值 */
}

/* 允许用户调整字体大小 */
html {
  font-size: 100%;   /* 尊重用户浏览器设置 */
}

/* 敏感用户避免纯字重区分信息 */
.warning {
  font-weight: bold;
  color: #d32f2f;    /* 同时使用颜色和字重双重标识 */
}

六、总结

CSS 字体属性的核心在于精确控制文字的外观：font-family 决定了文字的"身份"，font-size 控制了文字的"身材"，font-weight 调节了文字的"气质"。在实际开发中，三者需要协同配合，配合响应式单位、clamp() 函数、完善的字体回退栈，才能打造出既美观又高效的专业排版。

记住三个关键原则：回退机制要完善，确保任何环境下都有合适字体显示；单位选择要谨慎，优先使用 rem 保持一致性；字重定义要完整，特别是需要精细视觉层次的场景。

文章目录

CSS 字体：font-family、font-size、font-weight

CSS 字体：font-family、font-size、font-weight

一、font-family：定义文字的"面孔"

1.1 基本语法与取值类型

1.2 字体回退机制

1.3 字体名称的注意事项

二、font-size：控制文字的"身材"

2.1 单位系统详解

2.2 em 与 rem 的深度对比

2.3 响应式字体大小

三、font-weight：调节文字的"粗细"

3.1 关键字取值

3.2 数字取值

3.3 font-weight 的回退规则

四、综合实战：打造专业排版

4.1 完整的字体栈配置

4.2 建立视觉层次

五、常见问题与最佳实践

5.1 跨平台字体一致性问题

5.2 性能优化建议

5.3 可访问性考量

六、总结

评论 (0)

文章目录

CSS 字体：font-family、font-size、font-weight

CSS 字体：font-family、font-size、font-weight

一、font-family：定义文字的"面孔"

1.1 基本语法与取值类型

1.2 字体回退机制

1.3 字体名称的注意事项

二、font-size：控制文字的"身材"

2.1 单位系统详解

2.2 em 与 rem 的深度对比

2.3 响应式字体大小

三、font-weight：调节文字的"粗细"

3.1 关键字取值

3.2 数字取值

3.3 font-weight 的回退规则

四、综合实战：打造专业排版

4.1 完整的字体栈配置

4.2 建立视觉层次

五、常见问题与最佳实践

5.1 跨平台字体一致性问题

5.2 性能优化建议

5.3 可访问性考量

六、总结

评论 (0)

扫一扫，手机查看