使用 CSS 根据用户偏好调整排版

一种根据用户偏好设置调整字体的功能，让用户能够尽可能舒适地阅读您的内容。

Adam Argyle

对用户、设计师和开发者而言，将用户纳入设计流程是一个激动人心的时刻。用户可以进入您的体验，并无缝开始观看内容，他们的偏好会丰富地融入到设计结果中。

这篇博文探讨了如何使用具有可变字体的 CSS 媒体查询，进一步定制阅读体验。您可以使用 font-variation-settings 自定义字体等级和字重，根据各种偏好设置和上下文（例如偏好使用深色模式或高对比度）进行微调。我们可以采用这些偏好，并根据用户体验定制可变字体。

  • 深色模式的渐变效果略有减少。
  • 高对比度会使用更粗的字体。
  • 低对比度的字体会变细。
https://codepen.io/argyleink/pen/mdQrqvj

请继续观看，了解实现这一有意义时刻的 CSS 和可变字体的各个部分！

开始设置

为了帮助您专注于 CSS 和字体变体设置值，同时也为我们提供可读取和查看的内容，下面提供了可用于预览工作的标记：

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

无需添加任何 CSS，字体大小就已经会根据用户偏好进行自适应。以下视频来自另一个演示，展示了以像素设置 font-size 会如何覆盖所有用户偏好设置，以及为何应以 rem 设置字号：

最后，为了居中显示并支持该演示，我们需要添加一些 CSS：

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

此演示到目前为止的屏幕截图预览（深色主题和浅色主题）。

借助此演示设置，您可以开始测试和实现这种简洁的排版用户体验功能。

加载 Roboto Flex 可变字体

自适应策略取决于具有有意义的轴的可变字体，具体而言，您需要 GRAD 和 wght。本文中的目标自适应用户偏好设置针对的是配色方案和对比度，这两者都会根据用户的偏好来定制这些轴。

使用 CSS 的 @font-face API 加载可变字体：

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

接下来，将字体应用于一些内容。以下 CSS 会将其应用于所有内容：

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

演示到目前为止的屏幕截图预览，现在字体在深色和浅色主题中均采用 Roboto Flex。

善用 CSS 自定义属性和媒体查询

加载字体后，您可以查询用户偏好设置，并相应地调整可变字体设置。

没有偏好设置时的设置（默认）

以下初始样式将是默认样式，换句话说，是没有任何偏好的用户的样式。

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

偏好设置为高对比度时的设置

对于在系统设置中表明偏好高对比度的用户，请将 --base-weight 值从 400 提高到 700：

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

现在，阅读时对比度更高。

偏好设置为低对比度时的设置

对于在系统设置中表明偏好低对比度的用户，请将 --base-weight 值从 400 降低到 200：

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

现在，阅读时对比度较低。

偏好设置为深色模式时的设置

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

现在，浅色背景上的深色文本与深色背景上的浅色文本之间的感知差异已得到考虑。

所有产品现集于一处

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

或者，为了好玩，您可以将所有这些都与 CSS 嵌套结合使用：

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

这样一来，阅读体验就会根据用户的偏好调整字体。完整的源代码可在下面的 Codepen 中找到。