网页字体设置：CSS 字体完全指南 – wiki基地

作者： /

网页字体设置：CSS 字体完全指南

引言：文字是网页的灵魂

在网页设计中，文字不仅是信息传递的载体，更是用户体验和品牌形象的重要组成部分。优秀的排版能够提升网页的可读性、美观度和专业性。而CSS作为网页样式的核心语言，提供了强大而灵活的字体控制能力。

本指南将带您深入了解CSS如何进行网页字体设置，从基础的字体属性到复杂的Web Font应用，再到字体加载优化和最佳实践，助您全面掌握CSS字体技术，打造更具吸引力和易读性的网页。

第一部分：CSS 基础字体属性

CSS提供了多个属性来控制文本的显示方式，其中最核心的是直接影响字体外观的属性。

1. font-family: 选择你心仪的字体

font-family 属性用于指定一个元素的字体。它的值是一个优先级列表，浏览器会尝试按照列表顺序查找并使用第一个在其系统中可用的字体。

css
selector {
font-family: font-name1, font-name2, generic-family;
}

  • font-name1, font-name2: 这是您希望使用的具体字体名称。如果字体名称包含空格或特殊字符，需要用引号括起来，例如 "Times New Roman" 或 "Microsoft YaHei".
  • generic-family: 这是一个通用字体族名称，用于在所有指定的具体字体都不可用时作为备选。指定一个通用字体族非常重要，它能确保在极端情况下，页面至少能以一种可读的字体显示。CSS定义了五种通用字体族：
    • serif: 有衬线字体，如 Times New Roman, Georgia。通常用于正文，给人古典、正式的感觉。
    • sans-serif: 无衬线字体，如 Arial, Verdana, Helvetica, 宋体, 黑体。通常用于标题或UI元素，现代、简洁。
    • monospace: 等宽字体，每个字符宽度相同，如 Courier New, Consolas。常用于代码块。
    • cursive: 手写体/草书，如 Brush Script MT。
    • fantasy: 装饰性字体，如 Impact。

示例：

“`css
body {
/ 优先使用 Arial，如果不可用则使用 Helvetica，最后使用任意无衬线字体 /
font-family: Arial, Helvetica, sans-serif;
}

h1 {
/ 优先使用 “Microsoft YaHei” (微软雅黑)，如果不可用则使用黑体，最后使用任意无衬线字体 /
font-family: “Microsoft YaHei”, “SimHei”, sans-serif;
}

pre {
/ 代码块使用等宽字体 /
font-family: Consolas, Monaco, ‘Andale Mono’, ‘Ubuntu Mono’, monospace;
}
“`

重要提示： 确保您列出的具体字体名称是常见的系统字体或已通过 @font-face 加载的 Web 字体。指定多个备选字体（字体栈）是提高网页兼容性和用户体验的关键。

2. font-size: 控制文本的大小

font-size 属性用于设置文本的大小。这是一个影响可读性和视觉层级非常重要的属性。

css
selector {
font-size: value;
}

value 可以是多种单位：

  • 绝对单位:

    • px (像素): 固定的屏幕像素大小。16px 通常是浏览器的默认字体大小。使用像素的好处是精确控制，但在用户改变浏览器默认字体大小时，基于像素的字体大小不会缩放，可能影响辅助功能。
    • pt (点), pc (皮卡), in (英寸), cm (厘米), mm (毫米): 物理单位，主要用于打印样式，网页上较少使用。

  • 相对单位:

    • em: 相对于父元素的 font-size。例如，如果父元素的字体大小是 16px，子元素的 font-size: 1.2em 就是 16px * 1.2 = 19.2px。它的优点是能够创建可伸缩的布局，但计算可能有点复杂，特别是多层嵌套时。
    • rem (root em): 相对于根元素（<html>）的 font-size。这是目前推荐的用于字体大小设置的相对单位。例如，如果 html { font-size: 16px; }，那么任何元素的 font-size: 1.2rem 都是 16px * 1.2 = 19.2px，无论它嵌套在哪里。它结合了相对单位的优点（可伸缩性、对用户设置的响应）和像素的优点（计算简单）。
    • %: 相对于父元素的 font-size。与 em 类似，但通常直接使用百分比。
    • vw (viewport width): 相对于视口宽度。1vw 是视口宽度的 1%。
    • vh (viewport height): 相对于视口高度。1vh 是视口高度的 1%。
    • vmin (viewport minimum): 相对于视口宽度和高度中较小的一个。
    • vmax (viewport maximum): 相对于视口宽度和高度中较大的一个。
    • ex, ch: 相对于当前字体的 x-height 或字符 ‘0’ 的宽度，较少用。

  • 关键字:

    • xx-small, x-small, small, medium, large, x-large, xx-large: 相对于父元素的字体大小的相对大小，或相对于浏览器默认字体大小的绝对大小。
    • smaller, larger: 相对于父元素的字体大小稍微增大或减小。

最佳实践：

  • 对于响应式设计和辅助功能，强烈建议使用相对单位，特别是 rem。您可以在 html 元素上设置一个基础字体大小（例如 font-size: 100%; 或 font-size: 16px;），然后使用 rem 来设置其他元素的字体大小。这样用户在浏览器中调整字体大小设置时，您的网页字体也会相应地缩放。
  • 避免在大量元素上使用固定的 px 单位。

示例：

“`css
html {
font-size: 100%; / 基础字体大小，通常是 16px /
}

body {
font-size: 1rem; / 16px /
}

h1 {
font-size: 2.5rem; / 16px * 2.5 = 40px /
}

p {
font-size: 1rem; / 16px /
}

.small-text {
font-size: 0.875rem; / 16px * 0.875 = 14px /
}

/ 响应式调整字体大小 /
@media (max-width: 768px) {
html {
font-size: 90%; / 在小屏幕上稍微减小基础字体大小 /
}
h1 {
font-size: 2rem; / 随基础字体大小调整 /
}
}
“`

3. font-weight: 控制字体的粗细

font-weight 属性用于设置字体的粗细。并非所有字体都支持所有粗细值。

css
selector {
font-weight: value;
}

value 可以是：

  • 关键字:

    • normal: 正常粗细，通常对应数字 400。
    • bold: 粗体，通常对应数字 700。
    • lighter: 相对于父元素的字体稍微细一点（如果可用）。
    • bolder: 相对于父元素的字体稍微粗一点（如果可用）。

  • 数字值:

    • 100, 200, 300, 400, 500, 600, 700, 800, 900: 这些数字值表示字体的粗细，其中 400 对应 normal，700 对应 bold。可用的数字值取决于具体的字体文件。并非所有字体都有这 9 个等级的粗细。

示例：

“`css
p {
font-weight: normal; / 等同于 400 /
}

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

h2 {
font-weight: 600; / 比 normal 粗，比 bold 细，如果字体支持 /
}
“`

注意： 如果指定的数字值在当前字体中不可用，浏览器会选择一个接近的可用值。例如，如果只提供 400 和 700 两种粗细，设置 font-weight: 600 可能会显示为 700 的粗细。

4. font-style: 设置字体的样式

font-style 属性用于设置字体的样式，如斜体。

css
selector {
font-style: value;
}

value 可以是：

  • normal: 正常样式。
  • italic: 斜体。通常使用字体的斜体版本（如果字体文件提供了）。
  • oblique: 倾斜。如果字体没有斜体版本，浏览器可能会简单地倾斜正常版本的字体。在大多数情况下，italic 和 oblique 在视觉上看起来相似，但技术上是不同的。优先使用 italic。

示例：

“`css
em {
font-style: italic; / 强调文本通常使用斜体 /
}

.tilted-text {
font-style: oblique; / 使用倾斜样式 /
}
“`

5. font-variant: 小写字母的大写变体

font-variant 属性用于设置文本是否使用小写字母的大写变体（small-caps）。

css
selector {
font-variant: value;
}

value 可以是：

  • normal: 正常显示。
  • small-caps: 将小写字母转换为大写字母，但这些大写字母会比原始文本中的大写字母稍小。

示例：

css
h3 {
font-variant: small-caps;
}

注意： font-variant 是一个更复杂的属性的简写，它涵盖了 OpenType 字体的更多高级特性（如等宽数字、上下标等），这些可以通过 font-variant-ligatures, font-variant-caps, font-variant-numeric 等属性进行更精细的控制。但 font-variant: small-caps 是最常用的值。

6. line-height: 控制行高

line-height 属性设置文本行的最小高度。它影响文本行的垂直间距，对可读性至关重要。虽然不是以 font- 开头，但因为它紧密影响文本排版，常与字体属性一起设置，甚至包含在 font 简写属性中。

css
selector {
line-height: value;
}

value 可以是：

  • normal: 默认行高，通常约为 1.2，取决于用户代理。
  • 数字: 一个无单位的数字。实际行高将是这个数字乘以元素的 font-size。这是推荐的方式，因为子元素会继承这个比例而不是计算后的固定像素值。
  • 长度单位 (px, em, rem, %等): 固定的行高。使用相对单位 % 或 em 时，它是相对于元素的 font-size。使用像素时是固定值。
  • %: 相对于元素的 font-size。

最佳实践：

  • 使用无单位数字是最好的方法 (line-height: 1.5;)，这表示行高是字体大小的 1.5 倍。这样，即使子元素的字体大小不同，其行高比例也能保持一致，避免了继承固定像素值可能导致的排版问题。
  • 正文的理想行高通常在 1.4 到 1.7 之间，具体取决于字体、字体大小和行宽。

示例：

“`css
p {
font-size: 1rem;
line-height: 1.6; / 行高是字体大小的 1.6 倍 /
}

h1 {
font-size: 2.5rem;
line-height: 1.2; / 标题行高可以小一些 /
}
“`

第二部分：font 简写属性

font 属性是一个简写属性，可以一次性设置 font-style, font-variant, font-weight, font-size, line-height, 和 font-family。使用简写属性可以使CSS代码更简洁。

css
selector {
font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ];
}

语法规则：

  • 属性值的顺序是固定的。
  • font-size 和 font-family 是必须的属性。
  • font-size 必须出现在 font-family 之前。
  • line-height 是可选的，如果包含，必须紧跟在 font-size 后面，用斜杠 / 分隔。
  • font-style, font-variant, font-weight 是可选的，它们的顺序可以随意，但必须出现在 font-size 之前。
  • 如果省略了 font-style, font-variant, font-weight, line-height 中的任何一个，它们将被设置为其默认值。

示例：

“`css
/ 等同于设置 font-style: normal; font-variant: normal; font-weight: normal;
font-size: 16px; line-height: normal; font-family: Arial, sans-serif; /
p {
font: 16px Arial, sans-serif;
}

/ 等同于设置 font-style: italic; font-variant: normal; font-weight: bold;
font-size: 1.2rem; line-height: 1.5; font-family: Georgia, serif; /
.highlight {
font: italic bold 1.2rem / 1.5 Georgia, serif;
}

/ 等同于设置 font-style: normal; font-variant: small-caps; font-weight: normal;
font-size: large; line-height: normal; font-family: “Courier New”, monospace; /
h3 {
font: small-caps large “Courier New”, monospace;
}
“`

使用建议：

  • font 简写属性非常方便，但在覆盖单个属性时需要小心，因为简写属性会重置所有未指定的值为默认值。
  • 为了代码的可读性和维护性，有时单独使用各属性可能更好，尤其是在只需要修改其中一两个属性时。但在定义基本文本样式时，font 简写属性非常有用。

第三部分：Web Font 的应用 (@font-face)

使用系统字体存在局限性，用户能看到的字体取决于他们操作系统安装了哪些字体。为了在所有用户的浏览器中都能显示相同的设计字体，Web Font应运而生。Web Font允许您在服务器上托管字体文件，并通过CSS的 @font-face 规则将其下载并应用于网页。

1. @font-face 规则

@font-face 规则允许您定义并引入自定义字体。

css
@font-face {
font-family: 'YourCustomFont'; /* 定义字体名称 */
src: url('yourcustomfont.woff2') format('woff2'), /* 字体文件路径和格式 */
url('yourcustomfont.woff') format('woff');
font-weight: normal; /* 定义字体的粗细，与字体文件实际对应的粗细一致 */
font-style: normal; /* 定义字体的样式，与字体文件实际对应的样式一致 */
font-display: swap; /* 控制字体加载过程中的显示行为 */
}

@font-face 描述符：

  • font-family: 必须 定义字体的名称。您可以自由命名，然后在其他CSS规则中使用这个名称。
  • src: 必须 指定字体文件的位置。可以是一个URL (url()) 或本地字体名称 (local())。
    • url(): 指向字体文件的路径。可以包含多个 URL，浏览器会按顺序尝试加载。
    • local(): 允许浏览器使用用户本地安装的字体。如果用户本地有这个字体，就无需下载。这通常放在 src 列表的最前面。
    • format(): 推荐 用于指定字体文件的格式（如 woff2, woff, truetype, opentype, embedded-opentype, svg）。这有助于浏览器选择合适的字体文件，提高效率。现代浏览器主要支持 woff2 和 woff。
  • font-weight: 可选 定义此字体文件对应的字重。可以使用数字 (100-900) 或关键字 (normal, bold)。如果一个字体族有多个字重和样式，您需要为每个变体定义一个 @font-face 规则，并指定其对应的 font-weight 和 font-style。
  • font-style: 可选 定义此字体文件对应的样式 (normal, italic, oblique)。
  • font-display: 可选 控制字体文件在下载过程中以及下载后的显示行为。这对于优化用户体验和避免 FOIT/FOUT 很重要。常见值有：
    • auto: 浏览器默认行为，通常类似 block 或 swap。
    • block: 在字体加载完成前，文本会先隐藏一小段时间（最长 3 秒），然后显示。如果超过这个时间，会先使用回退字体显示，加载完成后再替换。会导致 FOIT。
    • swap: 字体加载完成后立即替换文本。在字体加载期间，会先使用回退字体显示。这是最常用的值，因为它优先显示文本内容，避免了 FOIT，但可能导致 FOUT。
    • fallback: 文本先隐藏一小段时间（非常短，约 100ms），然后使用回退字体显示。如果字体在短时间内加载完成，立即替换；否则，回退字体会持续显示，直到字体加载完成（如果加载时间较长，浏览器可能不会替换）。适用于对字体加载要求非常高的场景。
    • optional: 文本先隐藏一小段时间（非常短，约 100ms），然后使用回退字体显示。浏览器可以选择是否下载并使用该字体，如果网络条件差，浏览器可能会选择不加载该字体以提高性能。适用于对字体非必需的场景。

2. Web Font 格式

了解不同的字体格式有助于您选择最优化的文件：

  • WOFF2 (Web Open Font Format 2.0): 最新的格式，压缩率最高，兼容性良好（现代浏览器都支持）。首选格式。
  • WOFF (Web Open Font Format): WOFF2 的前身，压缩率较高，兼容性广泛。作为 WOFF2 的回退格式。
  • EOT (Embedded OpenType): Microsoft 开发，仅 IE 支持。如果需要支持旧版 IE 可以包含。
  • TTF (TrueType Fonts) / OTF (OpenType Fonts): 桌面字体格式，未针对 Web 优化，文件通常较大。作为旧浏览器或特定情况下的回退。
  • SVG Fonts: SVG 格式的字体，文件通常较大，功能有限，已不推荐使用。

最佳 @font-face src 顺序：

为了兼容性和性能优化，src 中的 URL 列表通常按以下顺序排列：

css
src: local('Your Font Name'), /* 检查本地是否安装 */
url('yourfont.woff2') format('woff2'), /* 首选 WOFF2 */
url('yourfont.woff') format('woff'); /* WOFF 作为回退 */
/* url('yourfont.ttf') format('truetype'), */ /* TTF/OTF 作为更老的回退 */
/* url('yourfont.eot?#iefix') format('embedded-opentype'); */ /* IE 老版本支持 */
注意 IE 的 EOT 格式需要一个特殊的 #iefix 后缀。

3. 使用第三方 Web Font 服务 (例如 Google Fonts)

手动托管字体需要处理格式转换、托管服务和性能优化。第三方服务简化了这一过程。Google Fonts 是最受欢迎的免费 Web Font 服务之一。

使用 Google Fonts 的步骤通常是：

  1. 在 Google Fonts 网站上选择您喜欢的字体和所需的字重/样式。
  2. 网站会提供两种嵌入代码：
    • <link> 标签方式 (推荐，放在 <head> 中):
      html
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
      这种方式浏览器可以并行下载 CSS 文件，通常加载速度更快。&display=swap 参数直接在 URL 中设置了 font-display: swap 行为。preconnect 提示浏览器尽快建立连接，进一步优化性能。
    • @import 方式 (放在 CSS 文件顶部):
      css
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
      这种方式会阻塞 CSS 文件本身的解析，直到字体 CSS 文件下载完成，可能影响渲染速度，因此不如 <link> 方式推荐。
  3. 获取字体 CSS 文件后，就可以在您的 CSS 规则中使用该字体家族名称了：
    css
    body {
    font-family: 'Roboto', sans-serif;
    }

其他 Web Font 服务包括 Adobe Fonts (Typekit), Font Awesome (用于图标字体) 等。

第四部分：字体加载优化和性能

Web Font 提高了设计自由度，但同时也带来了性能挑战。字体文件可能较大，下载需要时间，这可能导致页面加载变慢或出现不愉悦的字体切换。优化字体加载至关重要。

1. font-display 属性 (已在 @font-face 部分详细介绍)

如前所述，font-display 是控制字体加载行为的关键属性。合理选择其值（通常推荐 swap）可以在字体未加载完成时先用系统字体显示内容，避免白屏或文本消失。

2. 预加载字体 (Preloading Fonts)

如果您确定某个 Web Font 对页面的首屏内容至关重要，可以使用 <link rel="preload"> 标签来指示浏览器优先下载该字体文件。

html
<head>
...
<!-- 使用 link rel="preload" 预加载 WOFF2 字体 -->
<link rel="preload" href="/path/to/your/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- 然后在 CSS 中使用 @font-face 引入 -->
<style>
@font-face {
font-family: 'YourCustomFont';
src: url('/path/to/your/font.woff2') format('woff2');
font-display: swap; /* 或其他合适的值 */
}
body {
font-family: 'YourCustomFont', sans-serif;
}
</style>
</head>

注意： 预加载应谨慎使用，只用于对渲染关键的字体。过度预加载反而会降低页面性能。as="font" 和 type="font/woff2" 帮助浏览器确定资源的类型。crossorigin 是必须的，因为字体文件通常是从不同源加载的。

3. 字体子集化 (Font Subsetting)

许多字体文件包含了大量您网站可能不会用到的字符（比如不常用语言的字符、数学符号等）。子集化是指从字体文件中移除不需要的字符，生成一个只包含所需字符的更小的字体文件。许多字体工具（如 Font Squirrel 的 Webfont Generator）或 Web Font 服务（如 Google Fonts）提供了子集化选项。

4. 使用 WOFF2 格式

WOFF2 提供了最佳的压缩率，使用它可以显著减小字体文件大小，加快下载速度。始终将 WOFF2 作为 src 列表中的首选格式。

5. 缓存字体文件

Web Font 文件是静态资源，应该设置合适的 HTTP 缓存头，以便浏览器可以缓存字体文件，在用户再次访问您的网站时无需重新下载。

第五部分：相关文本属性

除了直接的 font-* 属性，还有一些CSS属性会影响文本的显示和排版，它们与字体设置紧密相关：

  • text-align: 设置文本的水平对齐方式 (left, right, center, justify)。
  • text-decoration: 设置文本的装饰线 (none, underline, overline, line-through)。可以进一步控制颜色、样式等 (text-decoration-color, text-decoration-style, text-decoration-thickness)。
  • text-transform: 控制文本的大小写 (none, capitalize, uppercase, lowercase)。
  • letter-spacing: 控制字符之间的间距。
  • word-spacing: 控制单词之间的间距。
  • white-space: 控制元素内的空白符如何处理 (normal, nowrap, pre, pre-wrap, pre-line)。
  • text-indent: 设置文本块第一行的缩进。

这些属性与字体属性结合使用，共同构成了网页的完整文本样式。例如，使用 letter-spacing 调整标题字间距，可以提升设计感。

第六部分：最佳实践和注意事项

  • 字体栈 (Font Stacks): 始终提供备选字体，以确保在主要字体不可用时，页面仍能以可读的方式显示。将通用字体族放在列表末尾。
  • 一致性: 在整个网站中保持字体使用的一致性（标题、正文、代码等），除非有特殊设计需求。
  • 可读性:
    • 选择合适的字体大小 (font-size) 和行高 (line-height)。对于正文，通常建议字体大小不小于 14-16px (对应 1rem)，行高在 1.4-1.7 之间。
    • 注意文本颜色和背景颜色之间的对比度。WCAG 标准建议正常文本的对比度至少为 4.5:1，大号文本为 3:1。
    • 限制行宽。过长的文本行会使阅读困难。通常建议每行包含约 45-75 个字符。
  • 响应式排版:
    • 使用相对单位 (rem, em, %, vw) 使字体大小能够根据屏幕尺寸或用户设置进行调整。
    • 使用媒体查询 (@media) 在不同设备或屏幕尺寸下调整字体大小、行高或字间距。
  • 性能: 优先使用 WOFF2 格式，合理使用 font-display，对关键字体进行预加载，并对字体文件进行缓存。
  • 版权: 使用 Web Font 时，请务必遵守字体的授权协议。免费字体通常允许用于商业项目，但商业字体需要购买许可证。Google Fonts 的字体通常是开源的，可以免费使用。
  • 可变字体 (Variable Fonts): 一种较新的字体格式，一个字体文件可以包含多个字重、字宽、斜度等变体，通过 CSS 的 font-variation-settings 或简写属性（如 font-weight: 550; font-stretch: 120%;）来控制。这可以减少 HTTP 请求数量并提供更灵活的样式控制，是未来的趋势。

第七部分：常见问题与排查

  • Web Font 不显示:
    • 检查 @font-face 规则中的 font-family 名称是否与使用该字体的规则中的名称完全匹配（大小写敏感）。
    • 检查 src 中的 URL 路径是否正确，确保字体文件确实存在于该位置。
    • 检查字体文件的格式是否正确，format() 函数是否与文件类型匹配。
    • 检查服务器是否正确配置了 MIME 类型（例如，WOFF2 是 font/woff2）。
    • 检查网络请求，查看字体文件是否成功下载，是否有 CORS 跨域问题（如果字体文件与网页不在同一域名下，需要服务器配置 CORS）。
    • 检查浏览器控制台是否有相关错误信息。
  • 字体粗细/样式不正确:
    • 确保 @font-face 规则中定义的 font-weight 和 font-style 与您在字体使用规则中指定的属性值一致。
    • 确保您为每个需要的字重和样式都定义了对应的 @font-face 规则并指向正确的字体文件。
  • FOUT 或 FOIT 问题严重:
    • 检查是否设置了 font-display 属性，并尝试不同的值（通常 swap 是最好的折衷）。
    • 考虑预加载关键字体。
    • 优化字体文件大小（使用 WOFF2，子集化）。

结论

CSS为网页字体设置提供了强大的能力，从基本的字体选择、大小、粗细、样式控制，到引入和管理自定义的Web Font，再到优化加载性能，每一步都对最终的网页呈现和用户体验产生重要影响。

掌握本指南中涵盖的CSS字体属性、@font-face规则、Web Font应用技巧以及最佳实践，您将能够更好地控制网页的文字排版，创造出既美观又易读、且性能良好的Web体验。文字是网页的灵魂，而CSS是赋予灵魂生命的工具。深入理解并善用CSS字体设置，您的网页将因此焕发光彩。

希望这篇详尽的指南能帮助您全面掌握CSS字体设置！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部