透過 CSS 根據使用者偏好設定調整字體排版

一種根據使用者偏好設定調整字型的做法,讓他們能盡可能舒適地閱讀您的內容。

讓使用者參與設計過程,是使用者、設計師和開發人員都感到興奮的時刻。使用者可以前往您的體驗,並流暢地開始使用內容,且設計結果會充分納入使用者的偏好設定。

這篇網誌文章會探討如何搭配變數字型使用 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 會如何縮小任何使用者的偏好設定,以及應以通知形式設定字型大小的原因:

最後,為了將示範視為中心並支援,這個 CSS:

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

  h1 {
    text-wrap: balance;
  }
}

以深色和淺色主題顯示目前示範的螢幕截圖。

您可以透過這個示範設定開始測試並實作這項精美的字體使用者體驗功能。

載入 Roboto Flex 變數字型

自動調整策略取決於變數字型,其中包含可自訂的實用軸,具體來說,您需要 GRADwght。本文的目標自適應使用者偏好設定是指色彩配置和對比,這兩者都會根據使用者偏好調整這些軸。

使用 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。