Skip to main content

动态字体缩放

🌐 Dynamic Font Scaling

动态字体缩放是一项功能，允许用户选择屏幕上显示的文本大小。这有助于需要更大文本以提高可读性的用户，同时也适应可以阅读较小文本的用户。

🌐 Dynamic Font Scaling is a feature that allows users to choose the size of the text displayed on the screen. This helps users who need larger text for better readability, and it also accommodates users who can read smaller text.

试试看​

🌐 Try It Out

tip

请务必在 Android、iOS 或 iPadOS 设备上尝试此操作。

如果你在 Android 版 Chrome 上进行测试，请确保已启用 “辅助功能页面缩放”。

🌐 If you are testing on Chrome for Android, make sure "Accessibility Page Zoom" is enabled. :::

请按照在设备上更改字体大小指南设置你偏好的字体大小，并观察下面的演示文本根据你的偏好增大或缩小。

🌐 Follow the Changing the Font Size on a Device guide to set your preferred font size, and watch the text in the demo below grow or shrink according to your preferences.

使用动态字体缩放​

🌐 Using Dynamic Font Scaling

在应用中启用​

🌐 Enabling in an Application

只要导入 typography.css 文件，动态字体缩放默认是启用的。导入此文件将定义 --ion-dynamic-font 变量，从而激活动态字体缩放。虽然不推荐，但开发者可以通过在应用代码中将此变量设置为 initial 来选择不使用动态字体缩放。

🌐 Dynamic Font Scaling is enabled by default as long as the typography.css file is imported. Importing this file will define the --ion-dynamic-font variable which will activate Dynamic Font Scaling. While not recommended, developers can opt-out of Dynamic Font Scaling by setting this variable to initial in their application code.

集成自定义组件​

🌐 Integrating Custom Components

开发者可以通过将任何使用 px 单位的 font-size 声明转换为使用 rem 单位 来配置其自定义组件，从而利用动态字体缩放。将 px 转换为 rem 的一个简单方法是将像素字体大小除以默认浏览器字体大小，通常为 16px。例如，如果组件的字体大小为 14px，则可以通过执行 14px / 16px = 0.875rem 将其转换为 rem。还需要注意的是，任何被覆盖字体大小的 Ionic 组件也应更新为使用 rem 单位。

🌐 Developers can configure their custom components to take advantage of Dynamic Font Scaling by converting any font-size declarations that use px units to use rem units instead. An easy way to convert from px to rem is to divide the pixel font size by the default browser font size, which is typically 16px. For example, if a component has a font size of 14px, then this could be converted to rem by doing 14px / 16px = 0.875rem. Also note that any Ionic components that have had their font sizes overridden should also be updated to use rem units.

需要注意的一点是，你的组件尺寸可能需要调整以适应更大的字体。例如，width 和 height 属性可能需要分别更改为 min-width 和 min-height。开发者应审查其应用中使用 长度值 的任何 CSS 属性，并将适用的 px 转换为 rem。我们还建议让长文本换行到下一行，而不是截断，以保持大字号文本的可读性。

🌐 One thing to keep in mind is that the dimensions of your components may need to change to accommodate the larger font sizes. For example, width and height properties may need to change to min-width and min-height, respectively. Developers should audit their applications for any CSS properties that use length values and make any applicable conversions from px to rem. We also recommend having long text wrap to the next line instead of truncating to keep large text readable.

自定义字体系列​

🌐 Custom Font Family

我们建议使用 Ionic 中的默认字体，因为它们设计得在任何尺寸下都很好看，并且确保与其他移动应用的一致性。不过，开发者可以通过 CSS 使用带有动态字体缩放的自定义字体系列：

🌐 We recommend using the default fonts in Ionic as they are designed to look good at any size and ensure consistency with other mobile apps. However, developers can use a custom font family with Dynamic Font Scaling via CSS:

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

em 单位对比 rem 单位​

🌐 em units versus rem units

开发者有两种相对字体大小的选项：em 和 rem。

🌐 Developers have two options for relative font sizes: em and rem.

em 单位根据其父元素的字体大小设置元素的字体大小。

在以下示例中，.child 的计算字体大小为 40px，因为它是 .parent（2em * 20px = 40px）的子元素。

🌐 In the following example, the computed font size of .child is 40px because it is a child of .parent (2em * 20px = 40px).

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;
}

然而，em 单元具有复合效应，这可能会导致问题。在以下示例中，第二个 .child 元素的计算字体大小为 80px，因为字体大小会相互叠加。

🌐 However, the em unit has a compounding effect which can cause issues. In the following example, the second .child element has a computed font size of 80px since the font sizes compound.

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

<div style={{ fontSize: '20px' }}>
  Parent element with 20px
  <div style={{ fontSize: '2em' }}>
    Child element with 40px
    <div style={{ fontSize: '2em' }}>Child element with 80px</div>
  </div>
</div>

由于这种累积效应，我们强烈建议在使用动态字体缩放时使用 rem 单位而不是 em 单位。rem 单位将元素的字体大小设置为相对于根元素的字体大小，根元素的字体大小通常为 <html>。根元素的默认字体大小通常为 16px。

🌐 Due to this compounding effect, we strongly recommend using rem units instead of em units when working with Dynamic Font Scaling. rem units set the font size of an element relative to the font size of the root element, which is typically <html>. The default font size of the root element is typically 16px.

在以下示例中，.child 的计算字体大小是 32px，因为字体大小是相对于 html 计算的，而不是相对于 .parent。

🌐 In the following example, the computed font size of .child is 32px because the font size is being computed relative to html, not .parent.

.parent {
  font-size: 20px;
}

.child {
  font-size: 2rem;
}

动态字体缩放在 Ionic 中的工作原理​

🌐 How Dynamic Font Scaling works in Ionic

定义字体大小并参与动态字体缩放的 Ionic 组件通常使用 rem 单位。这会使每个组件中的文本大小相对于根元素的字体大小进行设置，根元素通常是 html 元素。这意味着随着根元素字体大小的变化，所有 Ionic 组件中的文本都会以一致的方式缩放。这避免了需要手动覆盖每个组件的字体大小。一些组件内部的元素，例如图标，则使用 em 单位，以便这些元素的大小相对于文本进行调整，而文本本身则使用 rem 单位进行设置。

🌐 Ionic components that define font sizes and participate in Dynamic Font Scaling typically use rem units. This sizes the text in each component relative to the font size of the root element, which is usually the html element. This means that as the root element's font size changes, the text in all Ionic components scale in a consistent manner. This avoids the need to manually override each component's font size. Some elements inside of these components, such as icons, use em units instead so the elements are sized relative to the text, though the text itself is sized using rem units.

iOS​

Ionic中的动态字体缩放建立在iOS的一个名为Dynamic Type的功能之上。为此，Ionic将根元素的字体设置为Apple定义的文本样式。为了保持一致性，Ionic使用body文本样式。

🌐 Dynamic Font Scaling in Ionic builds on top of an iOS feature called Dynamic Type. To do this, Ionic sets the font of the root element to an Apple-defined text style. For consistency, Ionic uses the body text style.

使用 Apple 定义的文本样式可以启用动态字体，使 Ionic 组件中的所有文本根据系统级偏好进行缩放。请注意，这些 Apple 定义的字体仅在 Apple 设备上有效。因此，即使你的应用使用 ios 模式，这些字体在 Android 设备上也无法使用。

🌐 Using the Apple-defined text style enables Dynamic Type, allowing all text in Ionic components to scale according to the system-level preference. Note that these Apple-defined fonts only work on Apple devices. As a result, these fonts will not work on Android devices even if your app is using ios mode.

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

🌐 Ionic follows Apple's Human Interface Guidelines for Typography when an app is in ios mode. As a result, important content is prioritized when the text size changes. This means a few things:

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

安卓网页视图​

🌐 Android Web View

Android Web View 的字体缩放机制在网页内容中始终启用，并会自动缩放使用 px 单位定义的字体大小。这意味着，即使最终的字体大小与指定的最大或最小字体大小不一致，使用 px 指定的任何最大或最小字体大小仍然会被缩放。

🌐 The Android Web View's font scaling mechanism is always enabled in web content and will automatically scale font sizes defined using the px unit. This means that any maximum or minimum font sizes specified using px will still be scaled even if the final font size does not align with the maximum or minimum font sizes specified.

在以下示例中，我们使用 min() 函数来表示 .foo 的字体大小不应大于 14px。

🌐 In the following example we are using the min() function to indicate that the font size of .foo should be no larger than 14px.

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

如果根元素的默认字体大小是 16px，并且系统级字体缩放是 1.5（即文字大小应增加 50%），那么 1rem 将评估为 24px，因为 16 * 1.5 = 24。

🌐 If the root element's default font size is 16px, and the system-level font scale is 1.5 (i.e text sizes should be increased by 50%), then 1rem will evaluate to 24px because 16 * 1.5 = 24.

这比我们定义的最大值 14px 要大，因此人们可能会认为评估出的字体大小 .foo 是 14px。然而，由于 Android Web View 会缩放任何使用 px 单位定义的字体大小，这意味着我们在 min() 函数中使用的 14px 也将按 1.5 缩放。

🌐 This is larger than our defined maximum of 14px, so one might assume that the evaluated font size of .foo is 14px. However, since the Android Web View scales any font sizes defined using the px unit, this means the 14px used in our min() function will also be scaled by 1.5.

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

🌐 As a result, this means that the maximum computed font size is actually 21px since 14 * 1.5 = 21 and therefore the overall computed font size of .foo is 21px.

安卓版 Chrome​

🌐 Chrome for Android

Android 上的 Chrome 网络浏览器的行为与 Android Web View 不同。默认情况下，Android 版 Chrome 不会遵循系统级别的字体缩放设置。然而，Chromium 团队正在开发一项新功能以支持这一点。启用该功能后，它将更改 html 元素的 zoom 级别，这将导致布局在文本之外的情况下也随之增大。

🌐 The Chrome Web Browser on Android behaves differently than the Android Web View. By default, Chrome for Android does not respect the system-level font scale setting. However, the Chromium team is working on a new feature to allow for this. When enabled, this feature will change the zoom level of the html element which will cause the layout to increase in size in addition to the text.

开发者可以通过在 chrome://flags 中启用实验性的“辅助功能页面缩放”功能来测试此行为。

🌐 Developers can test this behavior by enabling the experimental "Accessibility Page Zoom" feature in chrome://flags.

请参阅 https://bugs.chromium.org/p/chromium/issues/detail?id=645717 了解更多信息。

🌐 See https://bugs.chromium.org/p/chromium/issues/detail?id=645717 for more information.

不同平台上的使用模式​

🌐 Using Modes on Different Platforms

每个平台的字体缩放行为略有不同，ios 和 md 模式的实现是为了利用各自平台上的缩放行为。

🌐 Each platform has slightly different font scaling behaviors, and the ios and md modes have been implemented to take advantage of the scaling behaviors on their respective platforms.

例如，ios 模式利用最大和最小字体大小来遵循 Apple 的人机界面排版指南。md 模式没有实现相同的行为，因为 Material Design 没有相同的指导原则。这意味着在 iOS 设备上使用 md 模式可能会允许标题和页脚中的字体非常大。

🌐 For example, ios mode makes use of maximum and minimum font sizes to follow Apple's Human Interface Guidelines for Typography. md mode does not implement this same behavior because Material Design does not have that same guidance. This means that using md mode on an iOS device may allow for very large font sizes in headers and footers.

因此，我们强烈建议在使用动态字体缩放时，在 iOS 设备上使用 ios 模式，在 Android 设备上使用 md 模式。

🌐 As a result, we strongly recommend using ios mode on iOS devices and md mode on Android devices when using Dynamic Font Scaling.

更改设备上的字体大小​

🌐 Changing the Font Size on a Device

字体缩放偏好由用户按每台设备进行配置。这允许用户为所有支持此功能的应用缩放字体。本指南展示了如何在每个平台上启用字体缩放。

🌐 Font scaling preferences are configured on a per-device basis by the user. This allows the user to scale the font for all applications that support this behavior. This guide shows how to enable font scaling for each platform.

iOS​

iOS 上的字体缩放可以在“设置”应用中配置。

🌐 Font scaling on iOS can be configured in the Settings app.

有关更多信息，请参阅 Apple 支持。

🌐 See Apple Support for more information.

安卓​

🌐 Android

用户访问字体缩放配置的位置因设备而异，但通常可以在设置应用的“辅助功能”页面中找到。

🌐 Where users access the font scaling configuration varies across devices, but it is typically found in the "Accessibility" page in the Settings app.

info

Android 上的 Chrome 网络浏览器在遵守系统级字体缩放方面存在一些限制。更多信息请参见 Chrome for Android。

故障排除​

🌐 Troubleshooting

动态字体缩放不起作用​

🌐 Dynamic Font Scaling is not working

有许多原因可能导致动态字体缩放对应用没有任何效果。以下列表虽然不全面，但提供了一些可以检查的事项，以调试为什么动态字体缩放不起作用。

🌐 There are a number of reasons why Dynamic Font Scaling may not have any effect on an app. The following list, while not exhaustive, provides some things to check to debug why Dynamic Font Scaling is not working.

  1. 确认你的 Ionic 版本支持动态字体缩放。动态字体缩放从 Ionic v7.5 开始添加。
  2. 确认已导入 typography.css 文件。此文件是动态字体缩放功能正常工作的必要条件。
  3. 请确认你的代码没有覆盖根元素的默认字体大小。在根元素上手动设置字体大小将阻止动态字体缩放按预期工作。
  4. 验证你的代码是否没有覆盖 Ionic 组件的字体大小。设置了 font-size 规则的 Ionic 组件将使用 rem 单位。然而，如果你的应用覆盖了该规则以使用 px，那么该自定义规则需要转换为使用 rem。有关更多信息，请参阅 集成自定义组件。
  5. 如果使用 Android 版 Chrome，请验证“辅助功能页面缩放”是否已启用。更多信息请参见 Android 版 Chrome。

Android 不考虑最大和最小字体大小​

🌐 Maximum and minimum font sizes are not being respected on Android

Android Web View 会根据系统级字体缩放偏好调整使用 px 单位定义的任何字体大小。这意味着实际字体大小可能会比在 min()、max() 或 clamp() 中定义的字体大小大或小。

🌐 The Android Web View scales any font sizes defined using the px unit by the system-level font scale preference. This means that actual font sizes may be larger or smaller than the font sizes defined in min(), max(), or clamp().

有关更多信息，请参见 Android 上字体缩放的工作原理。

🌐 See how font scaling works on Android for more information.

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

🌐 Font sizes are larger/smaller even with Dynamic Font Scaling disabled

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

🌐 Ionic components define font sizes using rem units even when Dynamic Font Scaling is disabled. This sizes the text in each component relative to the font size of the root element, which is usually the html element. As a result, if the font size of html changes, the computed font size of all Ionic components will change too.

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

🌐 Scaled Ionic iOS component font sizes do not exactly match native iOS equivalents

某些原生 iOS 组件，例如操作表，会使用 Ionic 无法访问的私有字体缩放。虽然我们尽量保持与原生行为一致，但某些组件中的文本可能比其原生版本略大或略小。

🌐 Certain native iOS components such as the Action Sheet make use of private font scales that Ionic does not have access to. While we try to stay as close as possible to the native behavior, text in some components may render slightly larger or smaller than their native counterparts.

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

🌐 The text size in my Ionic app on iOS changed when enabling Dynamic Font Scaling

根元素的默认字体大小通常是 16px。然而，iOS 设备上的动态字体缩放会使用 Body 文本样式，其默认字体大小为 17px。由于 Ionic 组件中的文本是相对于根元素的字体大小进行缩放的，因此即使系统级别的文本缩放没有改变，启用动态字体缩放时某些文本也可能变大或缩小。

🌐 The root element's default font size is typically 16px. However, Dynamic Font Scaling on iOS devices make use of the "Body" text style which has a default font size of 17px. Since the text in Ionic components is scaled relative to the root element's font size, some text may get larger or smaller when Dynamic Font Scaling is enabled, even if the system-level text scale did not change.

info

iOS 提供了一种“Callout”文本样式，其默认字体大小为 16px。然而，这种字体样式目前无法用于网页内容。有关更多信息，请参阅 WebKit 支持的文本样式。

目录