Масштабирование текста

Пример масштабирования текста в Windows 11 (100% по 225%)

Обзор

Чтение текста на экране компьютера может быть сложной задачей для многих людей. Наоборот, некоторым пользователям кажется, что размеры шрифтов, используемых в приложениях и на веб-сайтах, больше, чем необходимо.

Чтобы обеспечить, чтобы текст был максимально удобочитаемым для самых широких диапазонов пользователей, Windows предоставляет пользователям возможность изменять относительный размер шрифта как в ОС, так и в отдельных приложениях. Вместо использования приложения-лупы (которое обычно просто увеличивает всё в пределах области экрана и вызывает проблемы с удобством использования), изменения разрешения дисплея или масштаба DPI (который изменяет размер всего на основе дисплея и типичного расстояния просмотра), пользователь может быстро получить доступ к параметру изменения только размера текста, от 100% (размер по умолчанию) до 225%.

Support

Приложения WinUI поддерживают масштабирование текста по умолчанию.

Если приложение Windows включает пользовательские элементы управления, пользовательские текстовые поверхности, высоты жестко закодированных элементов управления, старые платформы или сторонние платформы, скорее всего, необходимо внести некоторые обновления, чтобы обеспечить согласованный и полезный интерфейс для пользователей.

DirectWrite, GDI и XAML SwapChainPanels изначально не поддерживают масштабирование текста, а поддержка Win32 ограничена меню, значками и панелями инструментов.

Взаимодействие с пользователем

Пользователи могут настроить масштаб текста с помощью ползунка "Сделать текст больше" на экране "Параметры" -> "Простота Access -> визуального и отображаемого экрана".

Настройка масштаба текста из параметров -> Простота доступа -> Экран и дисплей

Руководство по пользовательскому интерфейсу

По мере изменения размера текста, элементы управления и контейнеры также должны изменять размер и перестраиваться для аккомодации текста и его нового макета. Как упоминалось ранее, в зависимости от приложения, фреймворка и платформы, большая часть этой работы выполняется для вас. В следующих рекомендациях по пользовательскому интерфейсу рассматриваются те случаи, когда это не так.

Используйте элементы управления платформы

Мы уже сказали это? Стоит повторить: по возможности всегда используйте встроенные элементы управления, предоставляемые различными платформами приложений Windows, чтобы получить наиболее полный пользовательский опыт при наименьших затратах сил.

Например, все элементы управления текстом WinUI поддерживают полнотекстовое масштабирование без каких-либо настроек или шаблонов.

Ниже приведен фрагмент из базового приложения WinUI, включающего несколько стандартных элементов управления текстом:

<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 TextBox и TextWrapping, чтобы обеспечить максимальную гибкость макета.

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

Масштабирование анимированного текста с помощью оболочки текста

Задание параметров обрезки текста

Если перенос текста не является предпочтительным, большинство элементов управления текстом позволяет обрезать текст или указать многоточие для настройки обрезки текста. Обрезка предпочтительна по сравнению с многоточием, так как многоточие занимает место само.

Замечание

Если вам нужно обрезать текст, обрезайте конец текста, а не начало.

В этом примере показано, как вырезать текст в TextBlock с помощью свойства TextTrimming .

<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
• TextScaleFactorChanged