使用 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;
  }
}

A
screenshot preview of the demo so far, in both dark and light themes.

此演示设置使您可以开始测试和实施此简洁的排版 UX 功能。

加载 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;
  }
}

A
screenshot preview of the demo so far, with the font now in Roboto Flex in both
dark and light themes.

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 中提供。