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

提示

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

¥Be sure to try this on an Android, iOS, or iPadOS device.

如果你在 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 声明转换为使用 雷姆单位 来配置其自定义组件，以利用动态字体缩放。从 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 单位设置元素相对于其父元素的字体大小的字体大小。

¥em units set the font size of an element relative to the font size of its parent.

在以下示例中，.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>

Parent element with 20px

Child element with 40px

Child element with 80px

由于这种复合效应，我们强烈建议在使用动态字体缩放时使用 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 组件通常使用 雷姆单位。这会根据根元素（通常是 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 功能之上。为此，Ionic 将根元素的 font 设置为 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 中的内容更重要。

    ¥Content in an ion-header or an ion-footer will have maximum font sizes to prioritize content in ion-content which is deemed more important than content in the ion-header and ion-footer.

  2. ion-badge 和 ion-back-button 等组件将具有最小字体大小，以便保持可读性。

    ¥Components such as ion-badge and ion-back-button will have minimum font sizes so they remain readable.

  3. 根据 Apple 的人机界面指南，ion-tab-bar 和 ion-picker 等组件中的文本不参与动态字体缩放。

    ¥Text in components such as ion-tab-bar and ion-picker do not participate in Dynamic Font Scaling according to Apple's Human Interface Guidelines.

安卓网页视图​

¥Android Web View

Android Web 视图的字体缩放机制始终在 Web 内容中启用，并将自动缩放使用 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 视图会缩放使用 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.

因此，这意味着自 14 * 1.5 = 21 以来计算的最大字体大小实际上是 21px，因此 .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 网络视图不同。默认情况下，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.

请参阅 苹果支持 了解更多信息。

¥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.

信息

Android 上的 Chrome 网络浏览器在系统级字体比例方面存在一些限制。请参阅 安卓版 Chrome 了解更多信息。

¥The Chrome Web Browser on Android has some limitations with respecting system-level font scales. See Chrome for Android for more information.

故障排除​

¥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 开始添加动态字体缩放。

    ¥Verify that your version of Ionic supports Dynamic Font Scaling. Dynamic Font Scaling was added starting in Ionic v7.5.

  2. 验证 typography.css 文件是否已导入。动态字体缩放需要此文件才能正常工作。

    ¥Verify that the typography.css file has been imported. This file is required for Dynamic Font Scaling to work.

  3. 验证你的代码不会覆盖根元素的默认字体大小。在根元素上手动设置字体大小将阻止动态字体缩放按预期工作。

    ¥Verify that your code does not override the root element's default font size. Manually setting a font size on the root element will prevent Dynamic Font Scaling from working as intended.

  4. 验证你的代码不会覆盖 Ionic 组件上的字体大小。设置 font-size 规则的 Ionic 组件将使用 rem 单位。但是，如果你的应用覆盖该规则以使用 px，则需要将该自定义规则转换为使用 rem。请参阅 集成自定义组件 了解更多信息。

    ¥Verify that your code does not override font sizes on Ionic components. Ionic components that set font-size rules will use rem units. However, if your app overrides that to use px, then that custom rule will need to be converted to use rem. See Integrating Custom Components for more information.

  5. 如果使用 Android 版 Chrome，请验证 "辅助功能页面缩放" 是否已启用。请参阅 安卓版 Chrome 了解更多信息。

    ¥Verify "Accessibility Page Zoom" is enabled if using Chrome for Android. See Chrome for Android for more information.

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

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

Android Web 视图会缩放通过系统级字体缩放首选项使用 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 组件也会使用 雷姆单位 定义字体大小。这会根据根元素（通常是 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 设备上的动态字体缩放使用默认字体大小为 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.

信息

iOS 提供了 "大喊" 文本样式，默认字体大小为 16px。但是，此字体样式目前未公开给网页内容。请参阅 WebKit 支持的文本样式 了解更多信息。

¥iOS provides a "Callout" text style which has a default font size of 16px. However, this font style is currently not exposed to web content. See the supported text styles in WebKit for more information.

目录