跳至主要内容
版本：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 的一项名为 Dynamic Type 的功能。为此，Ionic 将根元素的 font 设置为 Apple 定义的文本样式。为了保持一致性，Ionic 使用 body 文本样式。

使用 Apple 定义的文本样式可以启用 Dynamic Type，允许所有 Ionic 组件中的文本根据系统级首选项进行缩放。请注意，这些 Apple 定义的字体仅在 Apple 设备上有效。因此，即使您的应用程序使用 ios 模式，这些字体在 Android 设备上也不起作用。

Ionic 遵循 Apple 的人机界面指南中的排版指南，当应用程序处于 ios 模式时。因此，在文本大小发生变化时，重要内容会优先显示。这意味着以下几点

  1. ion-header 或 ion-footer 中的内容将具有最大字体大小，以优先显示 ion-content 中的内容，因为 ion-content 被认为比 ion-header 和 ion-footer 中的内容更重要。
  2. ion-badge 和 ion-back-button 等组件将具有最小字体大小，以便它们保持可读性。
  3. ion-tab-bar 和 ion-picker 等组件中的文本不参与动态字体缩放，因为这符合 Apple 的人机界面指南。

Android WebView​

Android 网页视图的字体缩放机制始终在网页内容中启用，并将自动缩放使用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 网页视图会缩放使用px单位定义的任何字体大小，这意味着我们min()函数中使用的14px也将按 1.5 比例缩放。

因此，这意味着最大计算字体大小实际上是21px，因为14 * 1.5 = 21，因此.foo的整体计算字体大小为21px。

Android 版 Chrome​

Android 版 Chrome 浏览器与 Android 网页视图的行为不同。默认情况下，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 网页视图按系统级字体缩放首选项缩放使用px单位定义的任何字体大小。这意味着实际字体大小可能大于或小于在min()、max()或clamp()中定义的字体大小。

有关详细信息，请参阅Android 上的字体缩放工作原理。

即使禁用动态字体缩放，字体大小也更大/更小​

即使禁用动态字体缩放，Ionic 组件也使用rem 单位定义字体大小。这根据根元素的字体大小对每个组件中的文本进行大小调整，根元素通常是html元素。因此，如果html的字体大小发生变化，所有 Ionic 组件的计算字体大小也会发生变化。

缩放的 Ionic iOS 组件字体大小与原生 iOS 等效项不完全匹配​

某些原生 iOS 组件（如操作表）使用 Ionic 无法访问的私有字体缩放比例。虽然我们努力尽可能接近原生行为，但某些组件中的文本的渲染可能略大于或小于其原生对应项。

启用动态字体缩放后，我的 Ionic 应用程序在 iOS 上的文本大小发生了变化​

根元素的默认字体大小通常为16px。但是，iOS 设备上的动态字体缩放利用“正文”文本样式，该样式的默认字体大小为17px。由于 Ionic 组件中的文本相对于根元素的字体大小进行缩放，因此即使系统级文本缩放比例没有改变，某些文本在启用动态字体缩放后也可能会变大或变小。

信息

iOS 提供“呼叫出”文本样式，该样式的默认字体大小为16px。但是，此字体样式目前未公开给网页内容。有关详细信息，请参阅WebKit 中支持的文本样式。

内容

编辑此页面