透過 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，請使用以下 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 取得。