文字縮放

Windows 11 文字縮放範例（100% 到 225%）

概觀

在電腦螢幕上閱讀文字（從行動裝置到筆電、桌上型螢幕，再到Surface Hub的大螢幕）對許多人來說都可能很有挑戰性。 相反地，有些使用者覺得應用程式和網站使用的字體大小比必要的還要大。

為了確保文字對最廣泛的使用者來說盡可能清晰可讀，Windows 提供使用者在作業系統與個別應用程式間調整相對字型大小的功能。 使用者不必使用放大鏡應用程式（通常只會放大螢幕區域內所有內容，並帶來使用性問題）、改變顯示解析度，或依賴 DPI 縮放（根據顯示和典型觀看距離調整大小），使用者可以快速進入設定，只調整文字大小，範圍從 100%（預設大小）到 225%。

Support

通用 Windows 應用程式（標準與 PWA）預設支援文字縮放。

如果你的 Windows 應用程式包含自訂控制項、自訂文字表面、硬編碼的控制高度、較舊的框架或第三方框架，你可能需要進行一些更新，以確保使用者使用體驗一致且實用。

DirectWrite、GDI 和 XAML SwapChainPanels 原生不支援文字縮放，而 Win32 的支援僅限於選單、圖示和工具列。

用戶體驗

使用者可以透過設定 -> 易存取性 -> 視覺/顯示畫面中的「讓文字變大」滑桿來調整文字縮放。

來自設定中的文字縮放設定 -> 易存取性 -> 視覺/顯示螢幕

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>

使用文字換行

為了確保應用程式的版面盡可能靈活且具適應性，請在任何包含文字的控制項中啟用文字換行（許多控制項預設不支援文字換行）。

如果你沒有指定文字換行，平台會用其他方法調整版面，包括裁切（見前面範例）。

在這裡，我們使用 AcceptsReturn 和 TextWrapping 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>

不要放大字型圖示或符號

使用字型圖示強調或裝飾時，請關閉這些字元的縮放。

將 IsTextScaleFactorEnabled 屬性 false 設為大多數 XAML 控制項。

原生支援文字縮放

在你的自訂框架和控制項中處理 TextScaleFactorChanged UISettings 系統事件。 每當使用者設定系統上的文字縮放因子時，這個事件都會被提升。

總結

本主題概述 Windows 中文字縮放支援，並包含使用者體驗及開發者如何自訂使用者體驗的指引。

相關文章

API 參考資料

• IsTextScaleFactorEnabled
• 文字比例因子已變更