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

一种根据用户的字体调整字体的方法以便用户可以轻松阅读您的内容。

Adam Argyle

将用户带入设计流程对用户来说一直都是激动人心的时刻， 设计人员和开发者。用户可以顺畅地打开您的体验 消费内容，他们的偏好将融入设计结果。

这篇博文探讨了如何使用具有可变字体的 CSS 媒体查询来量身定制 进一步提升阅读体验可自定义字体等级和粗细 使用 font-variation-settings，允许针对各种偏好进行微调整 和情境，例如偏爱深色模式或高对比度。我们可以 这些偏好设置，并根据用户体验定制可变字体。

  • 深色模式的色调会稍微降低。
  • 对比度较高的字体会加粗。
  • 低对比度的字体会变细。
。 <ph type="x-smartling-placeholder">
</ph>
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;
  }
}

答 演示到目前为止的屏幕截图预览，其中字体现在为 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 中找到。