使用 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 会如何挤压任何用户偏好设置，以及为何应以 rems 格式设置字体大小：

最后，为了居中显示并支持该演示，我们需要添加一些 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;
  }
}

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

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

注意：如果您需要查看其中某些样式，请参阅有关媒体查询的 Learn 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 中找到。