CSS 字体设置指南 – wiki基地

作者： /

CSS 字体设置指南：打造引人入胜的网页排版

网页设计不仅仅是布局和颜色，文字作为信息的主要载体，其排版和呈现方式对用户体验起着决定性作用。CSS (Cascading Style Sheets) 为我们提供了强大且灵活的工具来控制网页上的字体，从选择字体家族到调整字重、大小、样式甚至是 OpenType 特性，无所不能。

本指南将带你深入探索 CSS 中的字体设置，从基础属性到高级技巧，再到 Web Font 的使用、性能优化和最佳实践，帮助你创建既美观又易读的网页排版。

1. 理解字体在网页设计中的重要性

在深入技术细节之前，我们首先要认识到字体的重要性：

  • 可读性与易读性 (Readability & Legibility): 好的字体选择和设置能让文字更清晰、更舒适阅读，减少用户阅读疲劳。
  • 品牌识别与调性 (Branding & Tone): 字体是视觉设计的重要组成部分，能传达网站的个性、专业性或创意性。
  • 用户体验 (User Experience): 合理的字体大小、行高和间距能优化信息呈现，提升用户满意度。
  • 无障碍性 (Accessibility): 确保字体大小可调整、对比度足够、行距适宜，是构建无障碍网站的基础。

因此，掌握 CSS 字体设置是每一位前端开发者和网页设计师的必备技能。

2. CSS 字体基础属性

CSS 提供了多个属性来控制字体的各个方面。我们将从最常用、最基础的属性开始。

2.1 font-family: 选择字体家族

font-family 属性用于指定元素使用的字体。它接受一个按优先级排序的字体名称列表。浏览器会依次尝试列表中指定的字体，直到找到用户系统上或能够下载的可用字体。

语法:

css
font-family: font-name1, font-name2, ..., generic-family;

  • font-name: 特定字体的名称，如 "Times New Roman", Arial, "Microsoft YaHei", Impact 等。如果字体名称包含空格或特殊字符，必须使用引号包裹（单引号或双引号均可）。
  • generic-family: 通用字体家族名称。这是一个兜底选项，如果所有指定的特定字体都不可用，浏览器会选择该通用家族中最接近的一个字体。始终强烈建议在列表末尾包含一个通用字体家族。

常用的通用字体家族:

  • serif: 有衬线字体（如 Times New Roman, Georgia）。适合长篇文章，具有古典、正式感。
  • sans-serif: 无衬线字体（如 Arial, Verdana, Helvetica, Microsoft YaHei, PingFang SC）。现代、简洁，在屏幕上通常有更好的可读性。
  • monospace: 等宽字体（如 Courier New, Monaco, Consolas）。每个字符宽度相同，常用于代码块。
  • cursive: 手写体或草书体（如 Brush Script MT）。模仿手写笔迹，用于特殊标题或装饰。
  • fantasy: 装饰性或创意性字体（如 Impact, Comic Sans MS）。通常不适合大段文字，用于标题或特殊效果。

示例:

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

/ 使用 Times New Roman，如果不可用则使用 Georgia，最后使用任意有衬线字体 /
h1 {
font-family: “Times New Roman”, Georgia, serif;
}

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

/ 使用包含空格的中文字体，需要引号 /
body {
font-family: “Microsoft YaHei”, “PingFang SC”, sans-serif;
}
“`

重要提示: 字体堆栈 (Font Stack) 的设计至关重要。你应该首先列出你最理想的字体，然后是相似的、用户系统中可能存在的字体，最后是通用字体家族。对于中文字体，情况更复杂，因为不同操作系统和浏览器有不同的默认中文字体名称（如 Windows 的微软雅黑/宋体，macOS 的苹方/黑体，Android 的 Roboto/Noto Sans CJK）。一个健壮的中文字体堆栈通常会包含多个名称。

2.2 font-size: 控制字体大小

font-size 属性用于设置字体的大小。选择合适的字体大小对可读性至关重要。

语法:

css
font-size: value;

value 可以是以下类型：

  • 关键字:

    • 绝对大小: xx-small, x-small, small, medium, large, x-large, xx-large。这些是相对于用户浏览器默认字体大小的预设值，不推荐用于精确控制。
    • 相对大小: smaller, larger。相对于父元素的字体大小进行调整。

  • 长度单位:

    • 绝对单位: px (像素), pt (磅), pc (皮卡), in (英寸), cm (厘米), mm (毫米)。绝对单位在不同设备或用户设置下不会改变大小，尤其 px 是最常用的像素单位。但通常不建议使用绝对单位设置文本的 font-size，特别是对于主体内容，因为它们不便于用户缩放页面或在不同分辨率设备上保持一致的可读性。
    • 相对单位:
      • em: 相对于父元素的 font-size。例如，如果父元素是 16px，子元素设置为 1.5em 就是 24px。使用 em 的缺点在于其大小是层层继承计算的，容易产生嵌套时的“复利”效应，导致难以预测最终大小。
      • rem (root em): 相对于根元素 (<html>) 的 font-size。这是 强烈推荐 用于设置文本大小的单位。默认情况下，大多数浏览器根元素的字体大小是 16px。如果根元素设置为 16px，那么 1rem 就是 16px，1.5rem 就是 24px。它的优势在于计算基准统一，不会受父元素影响，使得字体大小调整更可控，且支持用户在浏览器设置中调整基础字体大小，提高了无障碍性。
      • %: 相对于父元素的 font-size。功能上类似于 em。
      • vw (viewport width): 相对于视口宽度的 1%。
      • vh (viewport height): 相对于视口高度的 1%。
      • vmin (viewport minimum): 相对于视口宽度和高度中较小者的 1%。
      • vmax (viewport maximum): 相对于视口宽度和高度中较大者的 1%。
      • 使用 vw/vh 等视口单位设置字体大小可以实现根据视口尺寸无缝缩放字体，但可能导致在极宽或极窄的视口下字体过大或过小，需谨慎使用，或结合媒体查询限制范围。

推荐实践:

  1. 在 <html> 元素上设置一个基础字体大小，通常保持默认 16px 或设置为 100% (等于用户浏览器默认字体大小)。或者为了方便计算，可以设置为 62.5%，这样 1rem 就等于 10px (16px * 0.625 = 10px)，方便将像素值转换为 rem (如 12px -> 1.2rem, 18px -> 1.8rem)。
  2. 对于页面上的大部分文本元素（如段落、列表项），使用 rem 单位设置 font-size。
  3. 对于一些需要根据父容器调整大小的元素（如按钮、输入框内部文本），或者相对于其他文本元素进行微调时，可以考虑使用 em。
  4. 标题 (h1 – h6)、导航等元素也优先使用 rem。

示例:

“`css
/ 设置根元素字体大小为默认的 16px /
html {
font-size: 100%; / 等同于 16px (在大多数浏览器中) /
}

/ 或者为了方便计算，设置为 10px /
/ html {
font-size: 62.5%; / 1rem = 10px /
/ } */

/ 段落字体大小为 18px (如果根元素是 16px) /
p {
font-size: 1.125rem; / 1.125 * 16 = 18 /
/ 如果根元素是 10px /
/ font-size: 1.8rem; / 1.8 * 10 = 18 */
}

/ H1 字体大小，通常更大 /
h1 {
font-size: 2.5rem; / 2.5 * 16 = 40px /
}

/ 按钮字体大小，相对于按钮自身的字体大小（默认为继承） /
button {
font-size: 0.9em; / 相对于 button 继承的字体大小的 0.9 倍 /
padding: 0.5em 1em; / padding 也使用 em，与字体大小联动 /
}
“`

2.3 font-weight: 控制字体字重（粗细）

font-weight 属性用于设置字体的粗细程度。

语法:

css
font-weight: value;

value 可以是：

  • 关键字:
    • normal: 正常字重，通常对应数字 400。
    • bold: 粗体，通常对应数字 700。
    • lighter: 相对于父元素计算的更轻的字重。
    • bolder: 相对于父元素计算的更粗的字重。
  • 数字值: 100, 200, 300, 400, 500, 600, 700, 800, 900。这些值表示从最细到最粗的字重。400 通常对应 normal，700 对应 bold。注意： 字体文件必须包含相应的字重变体，否则浏览器会尝试模拟或使用最接近的可用字重。并非所有字体都提供所有 100-900 之间的字重。

示例:

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

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

h2 {
font-weight: 500; / 中等粗细，如果字体支持 /
}

.thin-text {
font-weight: 200; / 较细，如果字体支持 /
}
“`

2.4 font-style: 控制字体样式（斜体）

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

语法:

css
font-style: value;

value 可以是：

  • normal: 正常字体样式。
  • italic: 斜体。如果字体文件包含真正的斜体变体，则使用该变体；否则，浏览器会尝试通过倾斜正常字体来模拟。
  • oblique: 倾斜体。与 italic 类似，但更倾向于直接倾斜正常字体而不是使用专门的斜体变体。在大多数情况下，italic 和 oblique 的视觉效果非常相似，并且浏览器会优先使用 italic 对应的字体变体（如果存在）。

示例:

“`css
p {
font-style: normal;
}

em {
font-style: italic; / 通常表示强调 /
}

.caption {
font-style: oblique; / 可选，用于标注等 /
}
“`

2.5 line-height: 控制行高（行距）

line-height 属性用于设置文本行之间的垂直距离。合适的行高可以显著提升文本的可读性。

语法:

css
line-height: value;

value 可以是：

  • normal: 默认行高，通常是字体大小的 1.2 倍左右，具体取决于用户代理（浏览器）。
  • 数字 (无单位): 设置为字体大小的倍数。这是推荐的方式。 例如，line-height: 1.5; 表示行高是字体大小的 1.5 倍。这种方式的优势在于行高会随着 font-size 的改变而自动调整，并且继承时继承的是这个比例值，而不是计算后的绝对值。
  • 长度单位: px, em, rem, % 等。使用绝对单位（如 px）可以精确控制行高，但可能导致字体大小改变时行高不变，影响布局和可读性。使用 em 或 % 会相对于元素的 font-size 计算，但继承时继承的是计算后的值，不像无单位数字那样灵活。

推荐实践:

对于大部分主体文本，建议使用无单位的 line-height，值通常在 1.4 到 1.8 之间，具体取决于字体、字体大小和文本宽度。

示例:

“`css
p {
font-size: 1rem; / 16px /
line-height: 1.6; / 16px * 1.6 = 25.6px 的行高 /
}

h1 {
font-size: 2.5rem; / 40px /
/ 标题行高可以稍微小一些，但仍需考虑可读性 /
line-height: 1.2; / 40px * 1.2 = 48px 的行高 /
}

.compact-text {
font-size: 0.9rem;
line-height: 1.4;
}
“`

3. font 属性：字体设置的简写形式

font 属性是一个简写属性，允许在一个声明中设置多个字体相关的属性。使用它可以让 CSS 代码更紧凑。

语法:

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

  • 方括号 [] 表示可选。
  • 双竖线 || 表示可以选择其中一个或多个属性，顺序随意。
  • 问号 ? 表示前面的组或属性是可选的。
  • <font-size> 和 <font-family> 是必须的。
  • <font-size> 和 <line-height> 之间用斜杠 / 分隔，且 line-height 必须紧跟在 font-size 后面。

顺序（推荐按此顺序书写，尽管规范允许部分属性顺序随意）：

font-style font-variant font-weight font-stretch font-size/line-height font-family

示例:

“`css
/ 设置字体样式、字重、大小、行高和字体家族 /
p {
font: italic bold 1.2rem / 1.6 Arial, sans-serif;
/ 等同于:
font-style: italic;
font-weight: bold;
font-size: 1.2rem;
line-height: 1.6;
font-family: Arial, sans-serif;
/
}

/ 只设置大小和字体家族 /
h2 {
font: 2rem Georgia, serif;
/ 等同于:
font-size: 2rem;
font-family: Georgia, serif;
其他 font 属性（style, weight, variant, stretch, line-height）会被重置为其默认值 (normal, normal, normal, normal, normal)。
注意 line-height 会被重置为 normal，这可能不是你想要的，所以通常建议单独设置 line-height。
/
}

/ 常用写法：设置字重、大小、行高和字体家族 /
body {
font: 400 1rem / 1.5 “Microsoft YaHei”, sans-serif;
}
“`

使用 font 属性的注意事项:

  • 它是简写属性，会重置所有相关属性（font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family）的默认值（如果未在简写中显式设置）。
  • 如果省略了 line-height，它会被重置为 normal。
  • 通常建议至少包含 font-size 和 font-family。
  • 为了清晰和避免意外重置，有时候单独设置 font-size, line-height, font-weight, font-family 可能更好。

4. CSS 字体高级属性

除了基础属性，CSS 还提供了一些更高级的属性来控制字体的更多细节。

4.1 font-variant: 控制字体变体

font-variant 属性用于选择字体的特殊变体，如小型大写字母 (small-caps)。

语法:

css
font-variant: value;

value 可以是：

  • normal: 正常字体变体。
  • small-caps: 将所有小写字母转换为小型大写字母。字体文件需要支持此特性，否则浏览器会尝试模拟（将小写字母转换为大写字母并缩小尺寸）。
  • font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-numeric, font-variant-alternates: 这些是更细粒度的属性，允许你更精确地控制连字、大小写形式、东亚文字变体、数字形式等 OpenType 特性。通常更推荐使用 font-feature-settings 来直接控制 OpenType 特性，因为它兼容性更好且更灵活。

示例:

css
h1 {
font-variant: small-caps; /* 标题使用小型大写字母 */
}

4.2 font-stretch: 控制字体宽度

font-stretch 属性用于设置字体的宽度（拉伸或压缩）。这主要用于支持不同宽度字形的字体文件。

语法:

css
font-stretch: value;

value 可以是：

  • normal: 正常宽度。
  • 关键字: ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded。
  • 百分比: 50% (最窄) 到 200% (最宽)。

注意: 并非所有字体都提供这些变体。这个属性在可变字体 (Variable Fonts) 中尤其有用，因为它们可以在一个字体文件中包含多种宽度。

示例:

css
.condensed-text {
font-family: "MyVariableFont", sans-serif; /* 假设这是一个可变字体 */
font-stretch: condensed;
/* 或者使用百分比 */
/* font-stretch: 75%; */
}

4.3 font-feature-settings: 控制 OpenType 特性

font-feature-settings 属性提供了对 OpenType 字体高级排版特性的低级别控制。你可以启用或禁用特定的 OpenType 特性，如连字 (ligatures)、旧式数字 (oldstyle-nums)、分数 (fractions)、斜体数字 (tabular-nums) 等。

语法:

css
font-feature-settings: feature-tag value, feature-tag value, ...;

  • feature-tag: 4个字符的 OpenType 特性标签（如 "liga" 表示标准连字，"onum" 表示旧式数字，"frac" 表示分数，"tnum" 表示表格数字，"swsh" 表示花体字）。
  • value: 通常是 0 (禁用) 或 1 (启用)。有些特性可以接受其他数值。

你需要知道你想使用的 OpenType 特性的标签。一些字体管理工具或网站可以帮助你查找这些标签。

示例:

“`css
/ 启用标准连字和旧式数字 /
p {
font-feature-settings: “liga” 1, “onum” 1;
}

/ 启用分数和表格数字 /
.data-table {
font-feature-settings: “frac” 1, “tnum” 1;
}

/ 禁用一些默认启用的特性 /
h1 {
font-feature-settings: “liga” 0; / 禁用标准连字 /
}
“`

注意事项:

  • 这是一个低级别属性，对于一些常用特性，CSS 提供了更友好的属性（如 font-variant-ligatures, font-variant-numeric 等）。然而，这些高级属性的浏览器支持不如 font-feature-settings 广泛和稳定。
  • 使用前请检查所需特性在目标字体中是否存在。

4.4 font-language-override: 控制语言特定的字形

font-language-override 属性用于指定语言特定的字形，例如在不同语言中同一字符可能使用不同的字形。

语法:

css
font-language-override: value;

value 是一个语言标签字符串（如 "SRB" 表示塞尔维亚语）。

注意: 只有支持特定语言变体的字体才会有效果。这个属性不常用，大多数情况下字体能根据元素的 lang 属性或浏览器设置自动选择合适的字形。

5. Web Fonts: 使用非系统字体

到目前为止，我们讨论的都是用户系统上已安装的字体。但为了实现更独特或统一的品牌视觉，我们通常需要使用 Web Fonts（网络字体），即通过网络下载到用户浏览器并在网页上显示的字体文件。

使用 Web Fonts 的主要方式有两种：

  1. 通过 @font-face 规则引入自定义字体。
  2. 使用第三方字体服务，如 Google Fonts 或 Adobe Fonts。

5.1 使用 @font-face 规则

@font-face CSS 规则允许你定义和加载自定义字体。

语法:

“`css
@font-face {
font-family: ‘MyCustomFont’; / 定义一个字体家族名称，供 font-family 属性引用 /
src: url(‘mycustomfont.woff2’) format(‘woff2’), / 字体文件路径和格式，建议包含多种格式以提高兼容性 /
url(‘mycustomfont.woff’) format(‘woff’);
font-weight: normal; / 指定这个字体文件的字重（如果一个字体家族有多个字重文件，则需要多个 @font-face 规则） /
font-style: normal; / 指定这个字体文件的样式（normal 或 italic） /
font-display: swap; / 控制字体加载时的行为 /
unicode-range: U+000-5FF; / 可选：指定这个字体文件包含的 Unicode 字符范围，用于按需加载 /
}

/ 在 CSS 中使用定义的字体家族 /
body {
font-family: ‘MyCustomFont’, sans-serif;
}
“`

@font-face 规则详解:

  • font-family: 必需。 定义一个你在 font-family 属性中引用的名称。这个名称可以是你喜欢的任何名称，但要保持一致性。
  • src: 必需。 指定字体文件的路径。可以包含多个 url() 指令，用逗号分隔。浏览器会按顺序尝试加载。使用 format() 函数可以指定字体文件的格式，帮助浏览器选择合适的格式并优化加载。
    • 推荐的字体格式顺序: woff2 (最新，压缩率高), woff (广泛支持), ttf (TrueType), otf (OpenType), svg (SVG字体，用于旧iOS), eot (嵌入式OpenType，用于旧IE)。优先使用 woff2 和 woff。
    • 可以使用 local('Font Name') 指定先查找用户本地是否安装了同名字体，如果有则使用本地字体，否则下载。
  • font-weight 和 font-style: 可选，但强烈建议指定。 如果你的字体家族包含不同的字重和样式文件（如 MyFont-Regular.woff2, MyFont-Bold.woff2, MyFont-Italic.woff2），你应该为每个文件定义一个 @font-face 规则，并在此处指定对应的 font-weight 和 font-style。这样，当你使用 font-weight: bold; 或 font-style: italic; 时，浏览器就会加载并使用对应的字体文件，而不是尝试模拟。
  • font-display: 推荐且重要。 控制字体加载和可用前的行为。
    • auto: 浏览器默认行为，通常类似 block。
    • block: 字体加载完成前，文本会先隐藏（可能出现 FOIT – Flash of Invisible Text），加载完成后显示。
    • swap: 字体加载完成前，先使用回退字体显示文本，加载完成后替换为 Web Font（可能出现 FOUT – Flash of Unstyled Text）。这是通常推荐的值，能保证内容尽快可见。
    • fallback: 短暂的 block 周期（通常100ms），然后是 swap 周期。如果在 block 周期内加载完成则立即显示，否则切换到回退字体并在 Web Font 加载完成后再切换。
    • optional: 极短暂的 block 周期（通常100ms）。如果在 block 周期内加载完成则使用 Web Font，否则始终使用回退字体，不再切换。用户体验最流畅，但如果网络慢可能始终看不到 Web Font。
  • unicode-range: 可选。 指定这个字体文件包含的 Unicode 字符范围。例如，一个字体文件可能只包含拉丁字母，另一个只包含中文字符。使用 unicode-range 可以让浏览器只下载和使用需要显示特定字符范围的字体文件，优化性能。

示例 (为不同字重和样式定义 @font-face):

“`css
@font-face {
font-family: ‘MyBodyFont’;
src: url(‘mybodyfont-regular.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: ‘MyBodyFont’;
src: url(‘mybodyfont-italic.woff2’) format(‘woff2’);
font-weight: 400;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: ‘MyBodyFont’;
src: url(‘mybodyfont-bold.woff2’) format(‘woff2’);
font-weight: 700;
font-style: normal;
font-display: swap;
}

/ 使用时，浏览器会自动根据 weight 和 style 属性选择对应的文件 /
p {
font-family: ‘MyBodyFont’, serif; / 使用 regular 文件 /
font-weight: 400;
font-style: normal;
}

p strong {
font-weight: 700; / 使用 bold 文件 /
}

p em {
font-style: italic; / 使用 italic 文件 /
}
“`

5.2 使用第三方字体服务

Google Fonts 和 Adobe Fonts 等服务提供了大量可供网页使用的字体，通常使用简单，并提供了一些性能优化（如 CDN 加速，自动选择最优格式）。

Google Fonts 示例:

  1. 在 Google Fonts 网站选择字体并添加到你的集合。
  2. 网站会提供一个 <link> 标签或 @import 规则。推荐使用 <link> 标签，因为它可以更快地并行加载字体文件。

  3. 将 <link> 标签粘贴到你的 HTML 文件 <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">
    这里的 &display=swap 参数就是在 URL 中指定 font-display: swap; 行为。

  4. 在你的 CSS 中使用指定的字体家族名称：

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

第三方服务的优缺点:

  • 优点: 使用简单，提供大量选择，通常有良好的 CDN 和性能优化。
  • 缺点: 依赖第三方服务，增加了额外的 HTTP 请求，可能存在隐私问题（某些服务会记录用户 IP）。

6. Variable Fonts (可变字体)

可变字体是一种现代的字体格式，它允许将一个或多个排版轴（如字重、宽度、倾斜度等）的可变范围打包到一个字体文件中。这意味着你可以在这些轴上连续地调整字体样式，而无需加载多个独立的字体文件。

优点:

  • 文件大小更小: 一个可变字体文件通常比提供相同范围样式所需的多个常规字体文件总和要小。
  • 更大的设计灵活性: 可以使用介于预设字重（如 Light 300 和 Regular 400 之间）的任意字重，或者实现平滑的字体动画。

在 CSS 中使用可变字体:

  1. 通过 @font-face 规则引入可变字体文件：

    css
    @font-face {
    font-family: 'MyVariableFont';
    src: url('myvariablefont.woff2') format('woff2');
    font-weight: 100 900; /* 指定字重轴的可变范围 */
    font-stretch: 50% 200%; /* 指定宽度轴的可变范围 */
    font-style: oblique 0deg 10deg; /* 指定倾斜轴的可变范围（对于斜体） */
    /* 或 font-style: italic; 如果字体包含 true italic 轴 */
    font-display: swap;
    }
    注意 font-weight, font-stretch, font-style 现在可以接受范围值。

  2. 使用 font-weight, font-stretch, font-style 或 font-variation-settings 属性来控制具体的变体：

    “`css
    p {
    font-family: ‘MyVariableFont’, sans-serif;
    font-weight: 350; / 可以使用 100-900 之间的任意值 /
    font-stretch: 80%; / 可以使用 50%-200% 之间的任意值 /
    }

    / 使用 font-variation-settings 控制更低层级或非标准的轴 /
    h1 {
    font-family: ‘MyVariableFont’, sans-serif;
    font-weight: 700;
    font-variation-settings: “wght” 700, “wdth” 120, “opsz” 18; / 直接控制 ‘wght’, ‘wdth’, ‘opsz’ 等轴 /
    }
    “`

font-variation-settings 属性是控制可变字体的通用方法，接受一个轴标签（4个字符）和对应的值列表。这对于控制标准轴（如 wght, wdth, ital, slnt, opsz）以及字体设计者自定义的轴（如 XTRA, GRAD）非常有用。

7. 单位的选择：Px, Em, Rem 的权衡

前面已经提到了单位的选择，这里再次强调并总结一下：

  • px (像素): 绝对单位。1px 通常对应设备屏幕上的一个物理像素（在高密度屏幕上更复杂）。精确控制，但在不同屏幕密度或用户缩放时表现不佳。不建议用于主体文本的 font-size。 可用于需要固定大小的元素，如图标、边框等。
  • em (相对父元素字体大小): 相对单位。嵌套时会层层继承计算，复杂且难以管理。适用于相对于当前元素的字体大小进行调整的场景，如 padding, margin, border-radius 等与文本相关的间距或尺寸。
  • rem (相对根元素字体大小): 相对单位。计算基准固定在 <html> 元素上，易于管理和预测。支持用户在浏览器设置中调整基础字体大小，对无障碍性友好。强烈推荐用于设置页面主体文本的 font-size。 也可用于 margin, padding 等与整体排版相关的间距。
  • % (相对父元素): 类似于 em。
  • 视口单位 (vw, vh, vmin, vmax): 相对于视口尺寸。可用于实现根据视口大小动态调整的标题等元素，但用于主体文本需谨慎。

总结:

  • 对于文本大小 (font-size)：优先使用 rem。
  • 对于与文本相关的间距 (padding, margin, line-height)：
    • line-height 优先使用无单位数字。
    • padding, margin 可以根据需要使用 rem (与整体排版对齐) 或 em (与元素自身文本大小关联)。
  • 对于非文本相关的尺寸：可以使用 px 或其他单位。

通过在 <html> 上设置一个基础 font-size (100% 或 62.5%)，然后普遍使用 rem，可以构建一个既响应式又支持用户缩放的灵活排版系统。

8. 字体设置的最佳实践与性能优化

良好的字体设置不仅关乎美观和可读性，也与网页性能和用户体验息息相关。

  • 选择合适的字体数量: 不要在一个页面中使用过多不同的字体家族，通常 1-3 种字体就足够了，过多的字体文件会增加加载时间。
  • 优化字体文件:
    • 使用现代格式: 优先使用 WOFF2 格式，它提供了更好的压缩。
    • 子集化 (Subsetting): 只包含你需要的字符。例如，如果只需要拉丁字母，就不要包含所有 Unicode 字符。对于中文字体，通常按需加载或使用较小的子集版本（如常用字）。Google Fonts 和 Adobe Fonts 会自动进行子集化。
    • 加载所需字重和样式: 只加载你实际使用的字重（Regular, Bold 等）和样式（Italic）。不要加载一个字体家族的所有变体，除非你确定都会用到。
  • 利用 font-display 优化加载体验: 使用 swap 或 fallback 可以避免文本在字体加载期间完全隐藏 (FOIT)，提升感知性能。

  • 预加载重要字体 (<link rel="preload">): 对于页面首屏的关键字体，可以使用 <link rel="preload"> 指令让浏览器尽快下载它们，减少 FOUT 或 FOIT 的时间。

    html
    <link rel="preload" href="/fonts/mybodyfont-regular.woff2" as="font" type="font/woff2" crossorigin>
    as="font" 和 type="font/woff2" 是必需的，crossorigin 对于跨域字体文件（如 CDN 上的）是必需的。

  • 使用字体堆栈提供回退: 确保你的 font-family 列表包含足够的通用字体家族作为回退，即使 Web Font 加载失败，文本也能以可读的方式显示。

  • 测试不同设备和浏览器: 在不同的屏幕尺寸、分辨率和浏览器上测试你的字体设置，确保效果一致且可读。
  • 关注无障碍性:
    • 确保字体大小可以通过浏览器设置进行调整（使用 rem 单位有助于此）。
    • 提供足够的文本对比度 (color 与 background-color 之间的对比度)。
    • 保持合适的行高 (line-height) 和段落间距。

9. 常见的字体设置问题及解决方案

  • 字体未显示或显示为回退字体:
    • 检查 @font-face 规则的 src 路径是否正确。
    • 检查字体文件名和格式是否正确。
    • 检查 @font-face 规则中的 font-family 名称是否与 CSS 中使用的名称一致。
    • 检查字体文件是否已正确上传到服务器且访问权限正确。
    • 如果使用第三方服务，检查 <link> 或 @import URL 是否正确，网络是否可达。
  • 字体粗细或样式不正确:
    • 检查字体文件是否包含所需的字重或样式变体。
    • 检查 @font-face 规则中为该字体文件指定的 font-weight 和 font-style 是否正确对应。
    • 如果你使用了 font 简写属性，确保没有意外地重置了 font-weight 或 font-style。
  • 文本在加载时闪烁 (FOUT/FOIT):
    • 使用 font-display: swap; 或 fallback;。
    • 对关键字体进行预加载 (<link rel="preload">)。
    • 优化字体文件大小和加载速度。
  • 字体大小在不同设备上不一致:
    • 确保使用了相对单位 (rem, em, 视口单位) 而不是绝对单位 (px) 来设置字体大小。
    • 如果使用视口单位，考虑结合媒体查询限制其范围。
  • 中文和英文字体混排问题:
    • 确保你的字体堆栈同时包含了合适的英文字体和中文字体。
    • 优先列出的字体会优先应用，所以根据你的设计意图调整中英文字体的顺序。通常会将主要的英文字体放在前面，然后是中文字体，最后是通用家族。

10. 结论

CSS 字体设置是一个看似简单实则深奥的领域。掌握 font-family, font-size, font-weight, font-style, line-height 这些基础属性是构建可读性良好网页的基础。进一步了解 font 简写、@font-face 规则、font-display、font-feature-settings 以及可变字体等高级特性，可以帮助你实现更具创意和性能优势的排版效果。

永远记住，字体设置的核心目标是为了提升用户体验：让信息更清晰、更易读、更符合品牌调性，并兼顾性能和无障碍性。不断实践、测试和学习新的 Web Typography 技术，你就能在网页设计中发挥出字体的巨大力量。

希望这篇详细的指南能帮助你更好地理解和应用 CSS 字体设置！

发表评论

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

滚动至顶部