文本缩放

Windows 11 中的文本缩放示例（100% 到 225%）

概述

在计算机屏幕上阅读文本（从移动设备到笔记本电脑到台式显示器到 Surface Hub 的巨型屏幕）对于许多人来说，这很有挑战性。 相反，某些用户发现应用和网站中使用的字体大小大于必要。

为确保文本在最广泛的用户中尽可能清晰可见，Windows 为用户提供了跨 OS 和单个应用程序更改相对字号的功能。 用户无需使用放大镜应用（通常只需放大屏幕区域内的所有内容并引入其自己的可用性问题）、更改显示分辨率或依赖 DPI 缩放（它基于显示和典型观看距离调整所有内容），用户可以快速访问仅调整文本大小的设置，范围从 100%（默认大小）到 225%。

Support

通用 Windows 应用程序（标准版和 PWA）默认支持文本缩放。

如果 Windows 应用程序包括自定义控件、自定义文本图面、硬编码控件高度、旧框架或第三方框架，则可能需要进行一些更新，以确保为用户提供一致且有用的体验。

DirectWrite、GDI 和 XAML SwapChainPanels 本身不支持文本缩放，而 Win32 支持仅限于菜单、图标和工具栏。

用户体验

用户可以使用“设置 - 轻松访问 ->> 视觉/显示”屏幕上的“使文本变大”滑块调整文本比例。

“设置”中的文本缩放设置 -> 轻松访问 -> 视觉/显示屏幕

UX 指南

调整文本大小时，控件和容器还必须调整大小和重排以适应文本及其新布局。 如前所述，根据应用、框架和平台，大部分工作都是为你完成的。 以下 UX 指南涵盖不在此情况下的情况。

使用平台控件

我们已经说过了吗？ 值得重复：尽可能使用随各种 Windows 应用框架提供的内置控件，以尽可能少地获得最全面的用户体验。

例如，所有 UWP 文本控件都支持全文缩放体验，无需进行任何自定义或模板化。

下面是一个来自基本 UWP 应用的代码片段，其中包含几个标准文本控件：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test" 
                HorizontalTextAlignment="Center" />
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
        <StackPanel Grid.Column="1" 
                    HorizontalAlignment="Center">
            <TextBlock TextWrapping="WrapWholeWords">
                The quick brown fox jumped over the lazy dog.
            </TextBlock>
            <TextBox PlaceholderText="Type something here" />
        </StackPanel>
        <Image Grid.Column="2" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
    </Grid>
    <TextBlock Grid.Row="2" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test footer" 
                HorizontalTextAlignment="Center" />
</Grid>

动画文本缩放

使用自动调整大小

不要为控件指定绝对大小。 尽可能让平台根据用户和设备设置自动调整控件大小。

在此示例中，我们使用一组网格列的 Auto 和 * 宽度值，让平台根据网格中包含的元素大小调整应用布局。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

使用文本换行

若要确保应用的布局尽可能灵活且可适应，请在包含文本的任何控件中启用文本换行（默认情况下，许多控件不支持文字环绕）。

如果未指定文字环绕，平台将使用其他方法来调整布局，包括剪裁（请参阅前面的示例）。

在这里，我们使用 AcceptsReturnTextWrapping TextBox 属性来确保布局尽可能灵活。

<TextBox PlaceholderText="Type something here" 
          AcceptsReturn="True" TextWrapping="Wrap" />

使用文本换行的动画文本缩放

指定文本修整行为

如果文本环绕不是首选行为，则大多数文本控件都允许你裁剪文本或为文本修整行为指定使用省略号。 剪裁首选椭圆，因为椭圆本身占用空间。

在此示例中，我们演示如何使用 TextTrimming 属性剪辑 TextBlock 中的文本。

<TextBlock TextTrimming="Clip">
    The quick brown fox jumped over the lazy dog.
</TextBlock>

使用文本剪辑进行文本缩放

使用工具提示

如果剪辑文本，请使用 工具提示 向用户提供全文。

在这里，我们将工具提示添加到不支持文本环绕的 TextBlock：

<TextBlock TextTrimming="Clip">
    <ToolTipService.ToolTip>
        <ToolTip Content="The quick brown fox jumped over the lazy dog."/>
    </ToolTipService.ToolTip>
    The quick brown fox jumped over the lazy dog.
</TextBlock>

不要缩放基于字体的图标或符号

使用基于字体的图标进行强调或修饰时，请禁用对这些字符的缩放。

将大多数 XAML 控件的 IsTextScaleFactorEnabled 属性设置为 false 。

支持原生文本缩放

在自定义框架和控件中处理 TextScaleFactorChanged UISettings 系统事件。 每次用户在其系统上设置文本缩放因子时都会引发此事件。

概要

本主题概述了 Windows 中的文本缩放支持，并包括有关如何自定义用户体验的 UX 和开发人员指南。

相关文章

API 参考

• IsTextScaleFactorEnabled
• TextScaleFactorChanged