跳到主要內容
版本：v8

動態字體縮放

動態字體縮放是一項功能，可讓使用者選擇螢幕上顯示的文字大小。這有助於需要較大文字才能更好閱讀的使用者，也適用於可以閱讀較小文字的使用者。

試試看​

提示

請務必在 Android、iOS 或 iPadOS 裝置上嘗試此操作。

如果您正在 Chrome for Android 上測試，請確保已啟用「協助工具頁面縮放」。

按照在裝置上變更字體大小指南設定您偏好的字體大小，並觀察下方示範中的文字根據您的喜好放大或縮小。

使用動態字體縮放​

在應用程式中啟用​

只要匯入typography.css檔案，預設就會啟用動態字體縮放。匯入此檔案會定義 --ion-dynamic-font 變數，這會啟用動態字體縮放。雖然不建議，但開發人員可以透過在其應用程式程式碼中將此變數設定為 initial 來選擇退出動態字體縮放。

整合自訂元件​

開發人員可以設定其自訂元件，以利用動態字體縮放，方法是將任何使用 px 單位的 font-size 宣告轉換為改用 rem 單位。從 px 轉換為 rem 的簡單方法，是將像素字體大小除以預設瀏覽器字體大小，通常為 16px。例如，如果元件的字體大小為 14px，則可以透過執行 14px / 16px = 0.875rem 將其轉換為 rem。另請注意，任何覆寫字體大小的 Ionic 元件也應更新為使用 rem 單位。

需要牢記的一件事是，您的元件尺寸可能需要變更，以適應較大的字體大小。例如，width 和 height 屬性可能需要分別變更為 min-width 和 min-height。開發人員應稽核其應用程式中任何使用 長度值的 CSS 屬性，並進行任何適用的 px 到 rem 轉換。我們也建議讓長文字換行到下一行，而不是截斷，以保持大型文字的可讀性。

自訂字體系列​

我們建議在 Ionic 中使用預設字體，因為這些字體在任何大小下都設計得很美觀，並確保與其他行動應用程式的一致性。但是，開發人員可以透過 CSS 將自訂字體系列與動態字體縮放一起使用

html {
  --ion-dynamic-font: var(--ion-default-dynamic-font);
  --ion-font-family: 'Comic Sans MS';
}

em 單位與 rem 單位​

開發人員有兩種設定相對字體大小的選項：em 和 rem。

em 單位會設定元素相對於其父元素的字體大小。

在以下範例中，.child 的計算字體大小為 40px，因為它是 .parent 的子系 (2em * 20px = 40px)。

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;
}

但是，em 單位具有複合效果，可能會導致問題。在以下範例中，由於字體大小會複合，因此第二個 .child 元素的計算字體大小為 80px。

<div class="parent">
  Parent element with 20px
  <div class="child">
    Child element with 40px
    <div class="child">Child element with 80px</div>
  </div>
</div>

父元素為 20px

子元素為 40px

子元素為 80px

由於此複合效果，我們強烈建議您在使用動態字體縮放時使用 rem 單位，而不是 em 單位。rem 單位會設定元素相對於根元素字體大小的字體大小，通常為 <html>。根元素的預設字體大小通常為 16px。

在以下範例中，.child 的計算字體大小為 32px，因為字體大小是相對於 html 而計算，而不是 .parent。

.parent {
  font-size: 20px;
}

.child {
  font-size: 2rem;
}

動態字體縮放在 Ionic 中的運作方式​

定義字體大小並參與動態字體縮放的 Ionic 元件通常會使用 rem 單位。這會將每個元件中的文字大小設定為相對於根元素 (通常為 html 元素) 的字體大小。這表示當根元素的字體大小變更時，所有 Ionic 元件中的文字都會以一致的方式縮放。這避免了需要手動覆寫每個元件的字體大小。這些元件內的一些元素 (例如圖示) 會改用 em 單位，因此元素大小會相對於文字設定，儘管文字本身的大小是使用 rem 單位設定。

iOS​

Ionic 中的動態字體縮放是建立在稱為 動態類型 的 iOS 功能之上。為了做到這一點，Ionic 會將根元素的 字體 設定為 Apple 定義的文字樣式。為了保持一致性，Ionic 使用 body 文字樣式。

使用 Apple 定義的文字樣式會啟用動態類型，允許 Ionic 元件中的所有文字根據系統層級的偏好縮放。請注意，這些 Apple 定義的字體僅適用於 Apple 裝置。因此，即使您的應用程式使用 ios 模式，這些字體也不適用於 Android 裝置。

當應用程式處於 ios 模式時，Ionic 會遵循 Apple 的排版人類介面指南。因此，當文字大小變更時，會優先顯示重要內容。這表示幾件事

  1. ion-header 或 ion-footer 中的內容會具有最大字體大小，以優先顯示 ion-content 中的內容，後者被視為比 ion-header 和 ion-footer 中的內容更重要。
  2. 諸如 ion-badge 和 ion-back-button 之類的元件會具有最小字體大小，以使其保持可讀性。
  3. 根據 Apple 的人類介面指南，諸如 ion-tab-bar 和 ion-picker 之類的元件中的文字不會參與動態字體縮放。

Android 網頁視圖​

Android Web View 的字體縮放機制在網頁內容中始終啟用，並會自動縮放使用 px 單位定義的字體大小。這表示即使最終字體大小與指定的最大或最小字體大小不一致，任何使用 px 指定的最大或最小字體大小仍會被縮放。

在以下範例中，我們使用 min() 函式來表示 .foo 的字體大小不應大於 14px。

.foo {
  font-size: min(1rem, 14px);
}

如果根元素的預設字體大小為 16px，且系統級別的字體縮放比例為 1.5（即文字大小應增加 50%），則 1rem 將評估為 24px，因為 16 * 1.5 = 24。

這大於我們定義的最大值 14px，因此有人可能會認為 .foo 的評估字體大小為 14px。但是，由於 Android Web View 會縮放任何使用 px 單位定義的字體大小，這表示我們 min() 函式中使用的 14px 也會被縮放 1.5 倍。

因此，這表示計算出的最大字體大小實際上是 21px，因為 14 * 1.5 = 21，因此 .foo 的整體計算字體大小為 21px。

Android 版 Chrome​

Android 上的 Chrome 網頁瀏覽器與 Android Web View 的行為不同。預設情況下，Android 版 Chrome 不會考慮系統級別的字體縮放設定。但是，Chromium 團隊正在開發一項新功能來允許這樣做。啟用後，此功能會變更 html 元素的 zoom 級別，這除了文字外，還會導致版面配置尺寸增加。

開發人員可以透過在 chrome://flags 中啟用實驗性的「輔助功能頁面縮放」功能來測試此行為。

有關更多資訊，請參閱 https://bugs.chromium.org/p/chromium/issues/detail?id=645717。

在不同平台上使用模式​

每個平台的字體縮放行為略有不同，並且已實作 ios 和 md 模式以利用其各自平台上的縮放行為。

例如，ios 模式利用最大和最小字體大小來遵循 Apple 的人機介面排版指南。 md 模式不實作相同的行為，因為 Material Design 沒有相同的指導方針。這表示在 iOS 裝置上使用 md 模式可能會導致頁首和頁尾中的字體大小非常大。

因此，當使用動態字體縮放時，我們強烈建議在 iOS 裝置上使用 ios 模式，在 Android 裝置上使用 md 模式。

變更裝置上的字體大小​

字體縮放偏好設定是由使用者針對每個裝置進行設定的。這允許使用者縮放所有支援此行為的應用程式的字體。本指南說明如何為每個平台啟用字體縮放。

iOS​

可以在「設定」應用程式中設定 iOS 上的字體縮放。

有關更多資訊，請參閱 Apple 支援。

Android​

使用者存取字體縮放設定的位置因裝置而異，但通常位於「設定」應用程式中的「輔助功能」頁面。

資訊

Android 上的 Chrome 網頁瀏覽器在考慮系統級別的字體縮放方面有一些限制。有關更多資訊，請參閱Android 版 Chrome。

疑難排解​

動態字體縮放無法運作​

動態字體縮放可能對應用程式沒有任何影響的原因有很多。以下清單雖然不詳盡，但提供了一些檢查事項，以除錯動態字體縮放無法運作的原因。

  1. 確認您的 Ionic 版本支援動態字體縮放。動態字體縮放是從 Ionic v7.5 開始新增的。
  2. 確認已匯入 typography.css 檔案。此檔案是動態字體縮放運作的必要檔案。
  3. 確認您的程式碼沒有覆寫根元素的預設字體大小。在根元素上手動設定字體大小會阻止動態字體縮放如預期般運作。
  4. 確認您的程式碼沒有覆寫 Ionic 元件上的字體大小。設定 font-size 規則的 Ionic 元件將使用 rem 單位。但是，如果您的應用程式覆寫為使用 px，則該自訂規則需要轉換為使用 rem。有關更多資訊，請參閱整合自訂元件。
  5. 如果使用 Android 版 Chrome，請確認已啟用「輔助功能頁面縮放」。有關更多資訊，請參閱Android 版 Chrome。

Android 上不考慮最大和最小字體大小​

Android Web View 會按系統級別字體縮放偏好設定來縮放任何使用 px 單位定義的字體大小。這表示實際字體大小可能會大於或小於在 min()、 max() 或 clamp() 中定義的字體大小。

有關更多資訊，請參閱字體縮放在 Android 上的運作方式。

即使停用動態字體縮放，字體大小仍然較大/較小​

即使停用動態字體縮放，Ionic 元件仍會使用 rem 單位定義字體大小。這會根據根元素（通常是 html 元素）的字體大小來調整每個元件中的文字大小。因此，如果 html 的字體大小變更，所有 Ionic 元件的計算字體大小也會變更。

縮放的 Ionic iOS 元件字體大小與原生 iOS 等效元件不完全相符​

某些原生 iOS 元件（例如「動作選單」）會使用 Ionic 無法存取的私有字體縮放。雖然我們盡可能接近原生行為，但某些元件中的文字可能會比其原生對應項目稍微大或小。

啟用動態字體縮放後，我在 iOS 上 Ionic 應用程式中的文字大小發生變更​

根元素的預設字體大小通常為 16px。但是，iOS 裝置上的動態字體縮放會使用 「內文」文字樣式，其預設字體大小為 17px。由於 Ionic 元件中的文字是根據根元素的字體大小進行縮放的，因此即使系統級別的文字縮放沒有變更，當啟用動態字體縮放時，某些文字可能會變大或變小。

資訊

iOS 提供「標題」文字樣式，其預設字體大小為 16px。但是，此文字樣式目前未向網頁內容公開。有關更多資訊，請參閱WebKit 中支援的文字樣式。

目錄

編輯此頁面