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

  • Статья

Главное изображение, показывающее пример масштабирования текста со 100 % до 225 %.
Пример масштабирования текста в Windows 11 (100–225 %)

Общие сведения

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

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

Поддержка

Универсальные приложения для Windows (как стандартные, так и PWA) поддерживают масштабирование текста по умолчанию.

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

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

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

Пользователи могут настраивать масштаб текста с помощью ползунка Увеличить текст на экране Параметры —> Специальные возможности —> визуальное распознавание/дисплей.

Снимок экрана: страница параметров
Параметры масштабирования текста из параметров —> специальные возможности —> экран визуального зрения или дисплея

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

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

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

Мы уже говорили об этом? Стоит повторить: по возможности всегда используйте встроенные элементы управления, предоставляемые различными платформами приложений 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>

Анимация масштабирования текста со 100 % до 225 %.
Масштабирование анимированного текста

Использование автоматического определения размера

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

В этом фрагменте из предыдущего примера мы используем 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" />

Анимация масштабирования текста со 100 % до 225 % с обтекание текстом.
Масштабирование анимированного текста с помощью обтекания текстом

Указание поведения обрезки текста

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

Примечание

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

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

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

Снимок экрана: масштабирование текста с 100 % до 225 % с обрезкой текста.
Масштабирование текста с помощью обрезки текста

Использование подсказки

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

Здесь мы добавим подсказку в 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