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

Изображение Hero, в котором показан пример масштабирования текста с 100% до 225%.Hero image showing an example of text scaling from 100% to 225%.
Пример масштабирования текста в Windows 10 (100% до 225%)Example of text scaling in Windows 10 (100% to 225%)

ОбзорOverview

Чтение текста на экране компьютера (с переносного устройства на портативный компьютер на настольный монитор до огромного экрана Surface Hub) может быть трудной задачей для многих пользователей.Reading text on a computer screen (from mobile device to laptop to desktop monitor to the giant screen of a Surface Hub) can be challenging for many people. И наоборот, некоторые пользователи находят размеры шрифтов, используемые в приложениях и веб-сайтах, больше, чем требуется.Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

Чтобы обеспечить максимально удобочитаемость текста для широкого спектра пользователей, Windows предоставляет пользователям возможность изменять относительный размер шрифта как для операционной системы, так и для отдельных приложений.To ensure text is as legible as possible for the broadest range of users, Windows provides the ability for users to change relative font size across both the OS and individual applications. Вместо использования приложения "Экранная лупа" (которое обычно просто увеличивает все в пределах области экрана и создает собственные проблемы с удобством использования), изменения разрешения экрана или использования масштабирования (которое изменяет размер всего на основе дисплея и типичного расстояния просмотра) пользователь может быстро получить доступ к настройке для изменения размера только текста в диапазоне от 100 % (размер по умолчанию) до 225 %.Instead of using a magnifier app (which typically just enlarges everything within an area of the screen and introduces its own usability issues), changing display resolution, or relying on DPI scaling (which resizes everything based on display and typical viewing distance), a user can quickly access a setting to resize just text, ranging from 100% (the default size) up to 225%.

ПоддержкаSupport

Универсальные приложения Windows (как Standard, так и PWA) поддерживают масштабирование текста по умолчанию.Universal Windows applications (both standard and PWA), support text scaling by default.

Если приложение Windows содержит пользовательские элементы управления, пользовательские текстовые области, жестко закодированные контрольные значения, более старые платформы или сторонние платформы, вам, скорее всего, придется внести некоторые изменения, чтобы обеспечить единообразное и полезное взаимодействие с пользователями.If your Windows application includes custom controls, custom text surfaces, hard-coded control heights, older frameworks, or 3rd party frameworks, you likely have to make some updates to ensure a consistent and useful experience for your users.

DirectWrite, GDI и XAML Свапчаинпанелс изначально не поддерживают масштабирование текста, а поддержка Win32 ограничена меню, значками и панелями инструментов.DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

Возможности для пользователяUser experience

Пользователи могут настроить масштабирование текста с помощью ползунка увеличить размер текста на странице Параметры, > простоту доступа > экране или экрана.Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

Снимок экрана со страницей "Простота доступа"/"Параметры отображения", на которой показан ползунок увеличить текст.Screenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
Параметр масштабирования текста из параметров — > простоту в доступе > экрана и отображенияText scale setting from Settings -> Ease of Access -> Vision/Display screen

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

При изменении размера текста элементы управления и контейнеры также должны изменять размер и перекомпоновку для размещения текста и его нового макета.As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. Как упоминалось ранее, в зависимости от приложения, платформы и платформы, большая часть этой работы выполняется за вас.As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. В следующих руководствах по UX рассматриваются случаи, когда это не так.The following UX guidance covers those cases where it's not.

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

Мы сказали, что это уже так?Did we say this already? Это стоит повторять: по возможности всегда используйте встроенные элементы управления, предоставляемые с различными платформами приложений Windows, чтобы получить наиболее полный пользовательский интерфейс для минимальных усилий.It's worth repeating: When possible, always use the built-in controls provided with the various Windows app frameworks to get the most comprehensive user experience possible for the least amount of effort.

Например, все текстовые элементы управления UWP поддерживают возможности полнотекстового масштабирования без каких бы то ни было настроек или шаблонов.For example, all UWP text controls support the full text scaling experience without any customization or templating.

Ниже приведен фрагмент кода из базового приложения UWP, включающего несколько стандартных элементов управления "текст":Here's a snippet from a basic UWP app that includes a couple of standard text controls:

<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%.Animation of text scaling 100% to 225%.
Масштабирование анимированного текстаAnimated text scaling

Использовать Автоподбор размераUse auto-sizing

Не указывайте абсолютные размеры элементов управления.Don't specify absolute sizes for your controls. По возможности позвольте платформе изменять размер элементов управления автоматически на основе параметров пользователя и устройства.Whenever possible, let the platform resize your controls automatically based on user and device settings.

В этом фрагменте кода из предыдущего примера мы используем Auto * значения ширины и для набора столбцов сетки и предоставляем платформу для настройки макета приложения на основе размера элементов, содержащихся в сетке.In this snippet from the previous example, we use the Auto and * width values for a set of grid columns and let the platform adjust the app layout based on the size of the elements contained within the grid.

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

Использовать перенос текстаUse text wrapping

Чтобы макет приложения был максимально гибким и адаптируемым, включите перенос текста в любой элемент управления, содержащий текст (многие элементы управления не поддерживают перенос текста по умолчанию).To ensure the layout of your app is as flexible and adaptable as possible, enable text wrapping in any control that contains text (many controls do not support text wrapping by default).

Если не указать перенос текста, платформа использует другие методы для настройки макета, включая обрезку (см. предыдущий пример).If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

Здесь мы используем AcceptsReturn TextWrapping Свойства текстового поля и, чтобы обеспечить максимально гибкую структуру макета.Here, we use the AcceptsReturn and TextWrapping TextBox properties to ensure our layout is as flexible as possible.

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

Анимация масштабирования текста 100% до 225% с обтеканием текста.Animation of text scaling 100% to 225% with text wrapping.
Масштабирование текста с переносом текстаAnimated text scaling with text wrapping

Определение поведения обрезки текстаSpecify text trimming behavior

Если перенос текста не является предпочтительным, большинство текстовых элементов управления позволяют либо обрезать текст, либо задать многоточие для поведения обрезки текста.If text wrapping is not the preferred behavior, most text controls let you either clip your text or specify ellipses for the text trimming behavior. Обрезка является предпочтительным для эллипсов, так как эллипсы занимают место.Clipping is preferred to ellipses as ellipses take up space themselves.

Примечание

Если нужно обрезать текст, обрежьте конец строки, а не начало.If you need to clip your text, clip the end of the string, not the beginning.

В этом примере показано, как вырезать текст в TextBlock с помощью свойства TextTrimming .In this example, we show how to clip text in a TextBlock using the TextTrimming property.

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

Снимок экрана: масштабирование текста 100% до 225% с вырезанием текста.Screenshot of text scaling 100% to 225% with text clipping.
Масштабирование текста с вырезанием текстаText scaling with text clipping

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

При обрезке текста используйте подсказку, чтобы предоставить пользователям полный текст.If you clip text, use a tooltip to provide the full text to your users.

Здесь мы добавим подсказку к TextBlock, которая не поддерживает перенос текста:Here, we add a tooltip to a TextBlock that doesn't support text wrapping:

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

Не масштабировать значки или символы на основе шрифтаDon’t scale font-based icons or symbols

При использовании значков на основе шрифта для выделения или оформления отключите масштабирование этих символов.When using font-based icons for emphasis or decoration, disable scaling on these characters.

Задайте для свойства истекстскалефакторенаблед значение false для большинства элементов управления XAML.Set the IsTextScaleFactorEnabled property to false for most XAML controls.

Встроенная поддержка масштабирования текстаSupport text scaling natively

Обработайте системное событие текстскалефакторчанжед уисеттингс в пользовательской инфраструктуре и элементах управления.Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. Это событие возникает каждый раз, когда пользователь устанавливает коэффициент масштабирования текста в своей системе.This event is raised each time the user sets the text scaling factor on their system.

СводкаSummary

В этом разделе приводятся общие сведения о поддержке масштабирования текста в Windows, а также рекомендации по настройке интерфейса пользователя и разработчика.This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

Справочник по APIAPI reference