Шрифтовое оформление в приложениях Windows
Как визуальное представление языка, main задача типографии заключается в обмене информацией. Стиль шрифтов никогда не должен затмевать эту цель. В этой статье мы обсудим, как использовать шрифтовое оформление в вашем приложении Windows, чтобы помочь пользователям легко понимать содержимое.
Шрифт
В пользовательском интерфейсе приложения следует использовать один шрифт, и мы рекомендуем использовать шрифт по умолчанию для приложений Для Windows, Segoe UI Variable. Он создан для обеспечения оптимальной четкости для любых размеров и любой плотности пикселей, а также отличается четкой, легкой и открытой эстетикой, которая дополняет содержимое системы.
Сведения об отображениях текста на языках, отличных от английского, или выборе другого шрифта для приложения см. в разделах Языки и Шрифты, в которых описываются шрифты, рекомендованные для приложений Windows.
Выберите один шрифт для пользовательского интерфейса.
Не смешивайте несколько шрифтов.
Оси шрифта переменных
Шрифт Segoe UI Variable содержит две оси для более точного управления текстом. Этот шрифт имеет ось веса (wght
) с весами от Тонкий (100) до Полужирный (700). Он также имеет ось оптического размера (opsz
) для оптического масштабирования от 8 до 36 пт. При использовании общих элементов управления XAML шрифт Segoe UI Variable будет выбран по умолчанию для поддерживаемых языков. При использовании этого шрифта или другого шрифта переменной с оптической осью оптический размер автоматически совпадает с запрошенным размером шрифта. При использовании HTML оптическое масштабирование также выполняется автоматически, но вам потребуется указать шрифт Segoe UI Variable в CSS.
Размер и масштабирование
Размеры шрифтов в приложениях UWP масштабируются автоматически на всех устройствах. Алгоритм масштабирования позволяет добиться того, что шрифт размером 24 пикселя на Surface Hub, который располагается на расстоянии трех метров от пользователя, будет таким же читаемым, как и шрифт аналогичного размера, отображаемый на телефоне с диагональю экрана 5 дюймов, который располагается на расстоянии нескольких сантиметров от пользователя.
В силу особенностей работы системы масштабирования вы работаете с эффективными пикселями, а не физическими пикселями, и вам не следует изменять размер шрифта для различных размеров и разрешений экрана.
Следуйте указаниям по размеру рампы типа Windows.
Не используйте размер шрифта меньше 12 пикселей.
Иерархия
Пользователи полагаются на визуальную иерархию при просмотре страницы, когда заголовки представляют сводку содержимого, а основной текст содержит более подробные сведения. Чтобы создать четкую визуальную иерархию в приложении, используйте набор шрифтов Windows.
Набор шрифтов
Набор шрифтов Windows определяет важные отношения между начертаниями шрифтов на странице, помогая пользователям легко читать содержимое. Все размеры указываются в эффективных пикселях и оптимизированы для приложений UWP, работающих на всех устройствах.
Дополнительные сведения см. в руководстве по использованию пандуса типов XAML .
Соответствие
Значение TextAlignment по умолчанию — "Left", и в большинстве случаев такой подход, в котором содержимое сдвинуто влево и не выравнивается по правому краю, обеспечивает согласованную привязку содержимого и универсальный макет. Сведения о языках RTL см. в разделе Настройка макета и шрифтов для поддержки глобализации.
<TextBlock TextAlignment="Left">
Количество знаков
Храните до 50–60 букв на строку для удобства чтения.
Не используйте менее 20 символов или более 60 символов в строке, так как это трудно читать.
Обрезка и многоточия
Если объем текста выходит за пределы доступного пространства, рекомендуется обрезать текст и вставить многоточие [...], что является поведением по умолчанию для большинства элементов управления текстом UWP.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Обрезка текста и перенос, если включено несколько строк.
Не используйте многоточие, чтобы избежать визуального загромождений.
Примечание
Если контейнеры не определены точно (например, не указан отличающий цвет фона) или доступна ссылка для просмотра всего текста, используйте многоточия.
Языки
Segoe UI Variable — это шрифт для английского, европейского, греческого и русского языков. Для других языков см. следующие рекомендации.
Шрифты для глобализации и локализации
Используйте API сопоставления шрифтов LanguageFont для программного доступа к рекомендуемому семейству, размеру, насыщенности и стилю шрифта определенного языка. Объект LanguageFont предоставляет доступ к нужной информации о шрифте для различных категорий содержимого, включая заголовки, уведомления, текст и шрифты доступных для редактирования текстов пользовательского интерфейса. Дополнительные сведения см. в разделе Настройка макета и шрифтов для поддержки глобализации.
Шрифты для языков, не использующих латинский алфавит
Семейство шрифтов | Стили | Примечания |
---|---|---|
Ebrima | Обычный, полужирный | Шрифт пользовательского интерфейса для африканских сценариев (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai). |
Gadugi | Обычный, полужирный | Шрифт пользовательского интерфейса для североамериканских сценариев (канадские слоговые, чероки, осейдж). |
Leelawadee UI | Обычный, полусветлый, полужирный | Шрифт пользовательского интерфейса для скриптов юго-восточной Азии (бугинский, кхмерский, лаосский, тайский). |
Malgun Gothic | Обычный | Шрифт пользовательского интерфейса для корейского письма. |
Microsoft JhengHei UI | Обычный, полужирный, светлый | Шрифт пользовательского интерфейса для традиционного китайского письма. |
Microsoft YaHei UI | Обычный, полужирный, светлый | Шрифт пользовательского интерфейса для упрощенного китайского письма. |
Myanmar Text | Обычный | Резервный шрифт для бирманского письма. |
Nirmala UI | Обычный, полусветлый, полужирный | Шрифт пользовательского интерфейса для южноазиатских сценариев (Бангла, Чакма, Деванагари, Гуджарати, Гурмухи, Каннада, Малаялам, Метей Майек, Одия, Ол-Чики, Сингала, Сора Сомпенг, Тамиль, Телугу). |
Segoe UI | Обычный, курсив, светлый курсив, черный курсив, полужирный, полужирный курсив, светлый, полусветлый, плотный, черный | Шрифт пользовательского интерфейса для арабского, армянского, грузинского и иврита. |
SimSun | Обычный | Устаревший шрифт пользовательского интерфейса для китайского языка. |
Yu Gothic UI | Светлый, полусветлый, обычный, плотный, полужирный | Шрифт пользовательского интерфейса для японского языка. |
Fonts
Рубленые шрифты (без засечек)
Рубленые шрифты хорошо подходят для заголовков и элементов пользовательского интерфейса.
Семейство шрифтов | Стили | Примечания |
---|---|---|
Arial | Обычный, курсив, полужирный, полужирный курсив, черный | Поддерживает европейские и ближневосточные буквы (латиница, греческий, кириллица, арабский, армянский и иврит). Черный вес поддерживает только европейские скрипты. |
Calibri | Обычный, курсив, полужирный, полужирный курсив, светлый, светлый курсив | Поддерживаются наборы знаков для европейских и ближневосточных языков (латинский, греческий, кириллический, арабский и иврит). Арабские символы доступны только в вертикальном написании. |
Consolas | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины, поддерживающий наборы знаков для европейских языков (латинский, греческий и кириллический). |
Segoe UI | Обычный, курсив, светлый курсив, черный курсив, полужирный, полужирный курсив, светлый, полусветлый, плотный, черный | Шрифт пользовательского интерфейса для набора знаков европейских и ближневосточных языков (арабский, армянский, кириллический, грузинский, греческий, иврит и латинский), а также набора знаков письма Лису. |
Selawik | Обычный, полусветлый, светлый, полужирный, плотный | Шрифт с открытым кодом, метрически совместимый с Segoe UI, предназначенный для приложений на других платформах, которые не хотят использовать segoe UI. Скачать Selawik на GitHub. |
Шрифты с засечками
Шрифты с засечками хорошо подходят для представления больших объемов текста.
Семейство шрифтов | Стили | Примечания |
---|---|---|
Cambria | Обычный | Шрифт с засечками, поддерживающий наборы знаков для европейских языков (латинский, греческий, кириллический). |
Courier New | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины с засечками, поддерживающий европейские и ближневосточные шрифты (латиница, греческий, кириллица, арабский, армянский и иврит). |
Грузия | Обычный, курсив, полужирный, полужирный курсив | Поддерживаются наборы знаков европейских языков (латинский, греческий и кириллический). |
Times New Roman | Обычный, курсив, полужирный, полужирный курсив | Устаревший шрифт, поддерживающий наборы знаков для европейских языков (латинский, греческий, кириллический, арабский, армянский, иврит). |
Переменные шрифты
Переменные шрифты хорошо подходит для точного управления внешним видом текста.
Семейство шрифтов | Оси | Примечания |
---|---|---|
Банешрифт | Вес, ширина | Переменный шрифт, поддерживающий латинский, греческий и кириллический. |
Segoe UI Variable | Вес, оптический размер | Переменный шрифт, поддерживающий латинский, греческий и кириллический. |
Символы и значки
Семейство шрифтов | Стили | Примечания |
---|---|---|
Segoe MDL2 Assets | Обычный | Шрифт пользовательского интерфейса для значков приложений. Дополнительные сведения см. в статье Ресурсы Segoe MDL2 . |
Segoe UI Emoji | Обычный | Шрифт пользовательского интерфейса для эмодзи. |
Segoe UI Symbol | Обычный | Резервный шрифт для символов. |
Похожие статьи
Windows developer
Обратная связь
https://aka.ms/ContentUserFeedback.
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделеОтправить и просмотреть отзыв по