本頁面由 Cloud Translation API 翻譯而成。

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

一種可根據使用者需求調整字型的方法以便閱讀內容。

Adam Argyle

讓使用者進入設計流程很令人興奮各位可以考慮使用 AI讓使用者順利開始使用你的應用程式就會發現他們的偏好已經緊密結合。

這篇網誌文章探討如何運用 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;
  }
}

A 罩杯
示範目前為止的螢幕截圖預覽，均包含深色和淺色主題。

這個示範設定可讓您開始測試及實作這項簡潔的字體排版使用者體驗而不是每個特徵的分數

載入 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 罩杯
示範目前示範的螢幕截圖預覽，以及 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 取得。