Примечание
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
Основная цель оформления текста как визуального представления языка — передача информации. Система типов Windows помогает создавать структуру и иерархию в содержимом, чтобы повысить удобочитаемость и удобочитаемость в пользовательском интерфейсе.
Переменная пользовательского интерфейса Segoe — это новый системный шрифт для Windows. Это обновленный подход к классическому Segoe и использует технологию шрифтов переменных для динамического обеспечения большой удобочитаемости при очень небольших размерах и улучшенных контуров при размерах дисплея.
Совет
В этой статье описывается применение языка Fluent Design к приложениям Windows. Дополнительные сведения см. в разделе Fluent Design — Typeography.
Использование переменной Segoe Fluent
Переменная пользовательского интерфейса Segoe поддерживает два оси для более точного управления текстом: вес и оптический размер.
- Ось веса (
wght) увеличивается с весами от тонких (100) до полужирного (700). - Ось оптического размера (
opsz) автоматически и включена по умолчанию. Он управляет фигурой и размером счетчиков в шрифте, чтобы определить приоритет удобочитаемости на небольших размерах и личности на больших размерах (для оптического масштабирования от 8pt до 36pt).
При использовании общих элементов управления XAML шрифт переменной пользовательского интерфейса Segoe будет выбран по умолчанию для поддерживаемых языков. Если используется этот шрифт или другой шрифт переменной с оптической осью, оптический размер будет автоматически соответствовать запрошенному размеру шрифта. При использовании HTML оптическое масштабирование также выполняется автоматически, но вам потребуется указать шрифт Переменной пользовательского интерфейса Segoe в CSS.
Вес
| Имя веса | Значение оси веса | Визуальный элемент |
|---|---|---|
| Свет | 300 |
|
| Полусвет | 350 |
|
| Регулярный | 400 |
|
| Полуболд | 600 |
|
| Жирный | 700 |
|
Оптитическая ось
Рекомендации по печати в Windows 11
Windows 11 использует переменную пользовательского интерфейса Segoe со следующими атрибутами в зависимости от контекста, в котором отображается текст.
| Атрибут | Значение | Примечания. |
|---|---|---|
| Вес | Обычный, Semibold | Использование регулярного веса для большинства текста используйте Semibold для заголовков |
| Выравнивание | Слева, Центр | Выравнивание по умолчанию в центре выравнивания по умолчанию только в редких случаях, таких как текст ниже значков |
| Минимальные значения | 14 пикселей полужирный, 12 пикселей обычный | Текст меньше этих размеров и весов является неразборчивым на некоторых языках |
| Оболочка | Дело предложения | Использование регистра предложений для всего текста пользовательского интерфейса, включая заголовки |
| Усечение | Многоточие и вырезка | В большинстве случаев используйте многоточие; Вырезка используется только в редких случаях |
Примеры
Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, функций и функциональных возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub
Шрифтовое оформление в приложениях Windows
Основная цель оформления текста как визуального представления языка — передача информации. Его стиль никогда не должен попасть на путь этой цели. В этой статье мы обсудим, как использовать шрифтовое оформление в вашем приложении Windows, чтобы помочь пользователям легко понимать содержимое.
Шрифт
Вы должны использовать один шрифт в пользовательском интерфейсе приложения, и мы рекомендуем придерживаться шрифта по умолчанию для приложений Windows , Segoe UI Variable. Он создан для обеспечения оптимальной четкости для любых размеров и любой плотности пикселей, а также отличается четкой, легкой и открытой эстетикой, которая дополняет содержимое системы.
Чтобы отобразить языки, отличные от английского языка или выбрать другой шрифт для приложения, см. статью "Языки и шрифты " для наших рекомендуемых шрифтов для приложений Windows.
Размер и масштабирование
Размеры шрифтов в приложениях XAML автоматически масштабируется на всех устройствах. Алгоритм масштабирования гарантирует, что шрифт размером 24 пикселей на большом экране 10 футов находится так же удобочитаем, как 24 px шрифт на небольшом экране, который находится в нескольких дюймах.
В силу особенностей работы системы масштабирования вы работаете с эффективными пикселями, а не физическими пикселями, и вам не следует изменять размер шрифта для различных размеров и разрешений экрана.
Иерархия
Пользователи полагаются на визуальную иерархию при просмотре страницы, когда заголовки представляют сводку содержимого, а основной текст содержит более подробные сведения. Чтобы создать четкую визуальную иерархию в приложении, используйте набор шрифтов Windows.
Тип пандуса
Набор шрифтов Windows определяет важные отношения между начертаниями шрифтов на странице, помогая пользователям легко читать содержимое. Все размеры находятся в эффективных пикселях и оптимизированы для приложений Windows, работающих на всех размерах экрана.
Windows 11 использует следующие значения для различных типов текста в пользовательском интерфейсе.
| Пример | Вес | Высота или размер линии |
|---|---|---|
|
Небольшой | 12/16 эпх |
|
Текст | 14/20 эпх |
|
Запятая текст | 14/20 эпх |
|
Текст | 18/24 пикселей |
|
Отображение с запятой | 20/28 эпх |
|
Отображение с запятой | 28/36 эпх |
|
Отображение с запятой | 40/52 EPX |
|
Отображение с запятой | 68/92 эпх |
Дополнительные сведения см. в руководстве по использованию шаблона типа XAML .
Точное понимание
По умолчанию TextAlignment имеет значение Left, и в большинстве случаев выравнивание по левому краю и неровный правый край обеспечивают согласованную привязку содержимого и равномерный макет. Языки RTL см. в разделе "Настройка макета и шрифтов для поддержки глобализации".
<TextBlock TextAlignment="Left">
Количество символов
Оставить до 50–60 букв на строку для удобства чтения.
Не используйте менее 20 символов или более 60 символов на строку, так как это трудно читать.
Вырезка и многоточие
Если объем текста выходит за рамки доступного пространства, рекомендуется вырезать текст и вставлять многоточия [...], что является поведением по умолчанию большинства элементов управления текстом UWP.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Обрезать текст и переносить, если включено отображение в несколько строк.
Не используйте многоточие, чтобы избежать визуального беспорядка.
Примечание.
Если контейнеры не определены точно (например, не указан отличающий цвет фона) или доступна ссылка для просмотра всего текста, используйте многоточия.
Языки
Segoe UI Variable — это наш шрифт для английского, европейского языка, греческого и русского. Для других языков см. следующие рекомендации.
Глобализация и локализация шрифтов
Используйте API сопоставления шрифтов LanguageFont для программного доступа к рекомендуемой семейству шрифтов, размеру, весу и стилю для определенного языка. Объект LanguageFont предоставляет доступ к правильным сведениям о шрифте для различных категорий содержимого, включая заголовки пользовательского интерфейса, уведомления, текст текста и шрифты текста документа, редактируемые пользователем. Дополнительные сведения см. в разделе "Настройка макета и шрифтов для поддержки глобализации".
Шрифты для языков, отличных от латиниции
| Семейство шрифтов | Стили | Примечания. |
|---|---|---|
| Эббрима | Обычный, полужирный | Шрифт пользовательского интерфейса для африканских скриптов (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai). |
| Гадуги | Обычный, полужирный | Шрифт пользовательского интерфейса для скриптов Северная Америка n (канадские Syllabics, Cherokee, Osage). |
| Пользовательский интерфейс Leelawadee | Обычный, Полусвет, полужирный | Шрифт пользовательского интерфейса для скриптов Юго-Восточной Азии (Buginese, Кхмер, Лаос, Тайский). |
| Малгун Готика | Обычное | Шрифт пользовательского интерфейса для корейского языка. |
| Пользовательский интерфейс Microsoft JhengHei | Обычный, полужирный, свет | Шрифт пользовательского интерфейса для традиционного китайского языка. |
| Пользовательский интерфейс Microsoft YaHei | Обычный, полужирный, свет | Шрифт пользовательского интерфейса для упрощенного китайского языка. |
| Текст Мьянмы | Обычное | Резервный шрифт для скрипта Мьянмы. |
| Пользовательский интерфейс Nirmala | Обычный, Полусвет, полужирный | Шрифт пользовательского интерфейса для сценариев Южной Азии (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Малаялам, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu). |
| Пользовательский интерфейс Segoe | Регулярный, курсив, светлый курсив, черный курсив, полужирный курсив, полужирный курсив, свет, полусвет, Полуболд, черный | Шрифт пользовательского интерфейса для арабского, армянского, грузинского и иврита. |
| СимСан | Обычное | Устаревший китайский шрифт пользовательского интерфейса. |
| Готический пользовательский интерфейс Yu | Светлый, полусветлый, обычный, плотный, полужирный | Шрифт пользовательского интерфейса для японского языка. |
Шрифты
Шрифты Sans-serif
Шрифты Sans-serif являются отличным выбором для заголовков и элементов пользовательского интерфейса.
| Семейство шрифтов | Стили | Примечания. |
|---|---|---|
| Ариал | Регулярный, курсив, полужирный, полужирный курсив, черный | Поддерживает европейские и ближневосточные сценарии (латинский, греческий, кириллический, арабский, армянский и иврит). Черный вес поддерживает только европейские скрипты. |
| Калибри | Регулярный, курсив, полужирный, полужирный курсив, свет, курсив | Поддерживает европейские и ближневосточные скрипты (латинский, греческий, кириллический, арабский и иврит). Арабский язык доступен только в вертикальном режиме. |
| Консолы | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины, поддерживающий европейские скрипты (латинский, греческий и кириллический). |
| Пользовательский интерфейс Segoe | Регулярный, курсив, светлый курсив, черный курсив, полужирный курсив, полужирный курсив, свет, полусвет, Полуболд, черный | Шрифт пользовательского интерфейса для европейских и ближневосточных сценариев (арабский, армянский, кириллический, грузинский, греческий, иврит, латиница), а также скрипт Lisu. |
| Селовик | Обычный, Полусвет, Свет, Полужирный, Полуболд | Шрифт с открытым исходным кодом, совместимый с пользовательским интерфейсом Segoe, предназначенный для приложений на других платформах, которые не хотят упаковать пользовательский интерфейс Segoe. Получите Selawik на GitHub. |
Сережные шрифты
Сережные шрифты хорошо подходит для представления больших объемов текста.
| Семейство шрифтов | Стили | Примечания. |
|---|---|---|
| Камбрия | Обычное | Серий шрифт, поддерживающий европейские скрипты (латинский, греческий, кириллический). |
| Курьер New | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины, поддерживающий европейские и ближневосточные скрипты (латиница, греческий, кириллический, арабский, армянский и иврит). |
| Грузия | Обычный, курсив, полужирный, полужирный курсив | Поддерживает европейские скрипты (латинский, греческий и кириллический). |
| Times New Roman Cyr | Обычный, курсив, полужирный, полужирный курсив | Устаревший шрифт, поддерживающий европейские скрипты (латинский, греческий, кириллический, арабский, армянский, иврит). |
Шрифты переменных
Переменные шрифты хорошо подходит для точного управления внешним видом текста.
| Семейство шрифтов | Оси | Примечания. |
|---|---|---|
| Schrift | Вес, ширина | Шрифт переменной, поддерживающий латинскую, грековую и кириллицу. |
| Переменная пользовательского интерфейса Segoe | Вес, оптический размер | Шрифт переменной, поддерживающий латинскую, грековую и кириллицу. |
Символы и значки
| Семейство шрифтов | Стили | Примечания. |
|---|---|---|
| Ресурсы Segoe MDL2 | Обычное | Шрифт пользовательского интерфейса для значков приложения. Дополнительные сведения см. в статье о шрифте Segoe Fluent Icons. |
| Segoe UI Эмоджи | Обычное | Шрифт пользовательского интерфейса для Эмодзи. |
| Символ пользовательского интерфейса Segoe | Обычное | Резервный шрифт для символов. |
Связанные статьи
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.
Windows developer