通过

Windows 中的版式

  • 项目

在 Segoe UI 变量中呈现的几个单词

作为语言的视觉表示形式，版式的主要任务是传达信息。 Windows 类型系统可帮助你在内容中创建结构和层次结构，以便最大程度地提高 UI 中的可读性和可读性。

Segoe UI Variable 是 Windows 的新系统字体。 它是对经典 Segoe 字体的全新演绎，并使用可变字体技术在非常小的尺寸下动态提供出色的易读性，并在显示尺寸下改进轮廓。

提示

本文介绍如何 将 Fluent Design 语言 应用于 Windows 应用。 有关详细信息，请参阅 Fluent Design - 版式。

使用 Segoe Fluent Variable

Segoe UI 变量支持两个轴，以便对文本进行精细控制： 权重 和 光学大小。

  • 权重轴 （wght） 以从细（100）到粗体（700）的权重递增。
  • 光学大小轴 （opsz） 默认为自动和打开。 它控制字体中计数器的形状和大小，以较小的大小和个性确定可读性（对于从 8pt 到 36pt 的光学缩放）。

使用 XAML 通用控件时，默认情况下会为支持的语言选择 Segoe UI Variable 字体。 使用此字体或其他带有光轴的可变字体时，光学尺寸将自动匹配请求的字体大小。 使用 HTML 时，也会自动进行光学缩放，但需要在 CSS 中指定 Segoe UI Variable 字体。

在 Segoe UI 变量中呈现的单词“Segoe”，其中突出显示了字形的几个方面

权重

权重名称 权重轴值 可视
浅色 300 在 Segoe UI 变量浅色中呈现的单词“Segoe”
Semilight 350 在 Segoe UI 变量半光中呈现的单词“Segoe”
常规 400 在 Segoe UI 变量中呈现的单词“Segoe” 正则
半曲 600 在 Segoe UI 变量半曲中呈现的单词“Segoe”
加粗 700 在 Segoe UI 变量粗体中呈现的单词“Segoe”

光轴

在 Segoe UI 变量中呈现的小写字母，其中包含它根据呈现形状的不同形状的轮廓

Windows 11 中的版式最佳做法

Windows 11 根据显示文本的上下文使用具有以下属性的 Segoe UI Variable。

Attribute 值 备注
Weight 常规，半粗体 大多数文本使用常规粗体，标题使用半粗体
对齐 左，中 默认左对齐，仅在极少数情况下居中对齐，例如图标下方的文本
最小值 14px 半粗体，12px 正常 小于这些大小和重量的文本在某些语言中难以辨认
套管 句子大小写 对所有 UI 文本使用句子大小写，包括标题
截断 省略号和剪切 大多数情况下使用省略号；仅在极少数情况下使用剪裁

示例

打开 WinUI 3 库应用并查看操作中的版式原则。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

Windows 应用中的版式

主图

作为语言的视觉表示形式，版式的主要任务是传达信息。 它的样式应永远不妨碍该目标。 本文介绍如何在 Windows 应用中设计版式以帮助用户轻松高效地了解内容。

字体

应用的全部 UI 应使用同一种字体，建议始终使用 Windows 应用的默认字体 Segoe UI Variable。 其设计目的是为保持不同字体大小和像素密度下的最佳可读性，并提供可润色系统内容的清晰、明朗的美学效果。

Segoe UI 变量字体的示例文本。

若要在应用上显示非英语语言或为应用选择另一种字体，请参阅语言和字体，了解我们推荐的 Windows 应用字体。

大小和缩放

XAML 应用中的字体大小在所有设备上自动缩放。 缩放算法可确保大屏幕上 10 英尺外的 24 像素字体与距离几英寸的小屏幕上的 24 像素字体一样清晰。

不同设备的观看距离。

因系统缩放的工作原理，设计时采用的是有效像素而非实际物理像素，所以不必更改字体大小来适应不同尺寸的屏幕的分辨率。

层次结构

用户在扫描页面时依赖于视觉层次结构：标题用于总结内容，正文文本用于提供更多详细信息。 若要在应用中创建清晰的视觉层次结构，请遵循 Windows 字体渐变。

三行文本的屏幕截图，其中字体大小一行比一行小。

类型渐变

Windows 字体渐变可在页面上的字型之间建立关键关系，帮助用户轻松阅读内容。 所有大小都采用有效像素，并且针对在所有屏幕大小上运行的 Windows 应用进行了优化。

Windows 11 对 UI 中的各种类型的文本使用以下值。

示例 Weight 大小/线高
标题文本示例 小型 12/16 epx
正文文本示例 文本 14/20 epx
正文强文本的示例 文本半粗体 14/20 epx
正文大文本的示例 文本 18/24 epx
副标题文本示例 显示半粗体 20/28 epx
标题文本示例 显示半粗体 28/36 epx
标题大文本的示例 显示半粗体 40/52 epx
显示文本示例 显示半粗体 68/92 epx

有关更多详细信息，请查看有关使用 XAML 字体渐变的指南。

对齐

默认 TextAlignment 是左对齐，在大多数情况下，左边对齐但右边不对齐可提供一致的内容编排效果和统一的布局。 有关 RTL 语言，请参阅调整布局和字体以支持全球化。

显示刷新左文本。

<TextBlock TextAlignment="Left">

字符计数

绿色栏的第四个屏幕截图，其中包含绿色复选标记和文本“执行”。 保持每行 50–60 个字母，以方便阅读。

这次测试 不要使用少于 20 个字符或每行 60 个字符，因为很难阅读。

剪裁和省略号

当文本数量超出可用空间时，建议剪裁文本并插入省略号 [...]，这是大多数 UWP 文本控件的默认行为。

显示剪裁一些文本后的设备框架。

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

绿色栏的第五个屏幕截图，其中包含绿色复选标记和文本“执行”。 剪辑文本，并在启用多行时换行。

这次测试 不要使用省略号来避免视觉混乱。

注意

如果未对容器进行完善定义（例如，不区分背景颜色），或者存在用于查看更多文本的链接，则使用省略号。

语言

Segoe UI Variable 是用于英语、欧洲语言、希腊语和俄语的字体。 对于其他语言，请参阅以下建议。

全球化/本地化字体

使用 LanguageFont 字体映射 API 以编程方式访问特定语言的建议字体系列、大小、粗细和样式。 LanguageFont 对象提供对各种类别内容的正确字体信息的访问权限，包括 UI 标头、通知、正文文本和用户可编辑的文档正文字体。 有关详细信息，请参阅 调整布局和字体以支持全球化。

非拉丁语言的字体

字体系列 样式 备注
Ebrima 常规、粗体 非洲语言脚本的用户界面字体（阿德拉姆文、埃塞俄比亚文、西非书面文、索马里文、提芬纳格文、瓦伊文）。
Gadugi 常规、粗体 北美语言脚本的用户界面字体（加拿大音节文字、切罗基语、奥塞治文）。
Leelawadee UI

 常规、半光、粗体 东南亚语言脚本的用户界面字体（布吉斯语、高棉语、老挝语、泰语）。
Malgun Gothic

 常规 适用于朝鲜语的用户界面字体。
Microsoft JhengHei UI

 常规、粗体、浅色 繁体中文的用户界面字体。
Microsoft YaHei UI

 常规、粗体、浅色 简体中文的用户界面字体。
缅甸文

 常规 缅甸脚本的回退字体。
Nirmala UI

 常规、半光、粗体 南亚语言脚本的用户界面字体（孟加拉语、查克马文、梵文、古吉拉特语、锡克教文、埃纳德语、马拉雅拉姆语、曼尼普尔文、奥里亚语、欧甘语、僧伽罗语、索拉文、泰米尔语、泰卢固语）。
Segoe UI

 常规、斜体、浅斜体、黑色斜体、粗体、粗斜体、浅色、半光、半蓬勃、黑色 阿拉伯语、亚美尼亚语、格鲁吉亚语和希伯来语的用户界面字体。
SimSun

 常规 旧版中文 UI 字体。
Yu Gothic UI

 细体、半细、常规、半粗、粗体 日语的用户界面字体。

字体

Sans-serif 字体

Sans-serif 字体是标题和 UI 元素的绝佳选择。

字体系列 样式 备注
Arial 常规、斜体、粗体、粗体斜体、黑色 支持欧洲和中东语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语、亚美尼亚语和希伯来语）。 黑粗体仅支持欧洲语言脚本。
Calibri 常规、斜体、粗体、粗体斜体、浅斜体、浅斜体 支持欧洲和中东脚本（拉丁文、希腊文、西里尔文、阿拉伯语和希伯来语）。 阿拉伯语仅在直立中可用。
Consolas 常规、斜体、粗体、粗体斜体 固定了支持欧洲脚本（拉丁文、希腊文和西里尔文）的宽度字体。
Segoe UI 常规、斜体、浅斜体、黑色斜体、粗体、粗斜体、浅色、半光、半蓬勃、黑色 欧洲和中东脚本（阿拉伯语、亚美尼亚语、西里尔文、格鲁吉亚语、希腊语、希伯来语、拉丁语）和 Lisu 脚本的用户界面字体。
Selawik 常规、半光、浅色、粗体、半曲 计量方面与 Segoe UI 兼容的开源字体，用于其他平台上不希望包含 Segoe UI 的应用。 在 GitHub 上获取 Selawik。

Serif 字体

Serif 字体非常适合呈现大量文本。

字体系列 样式 备注
Cambria 常规 支持欧洲脚本的 Serif 字体（拉丁语、希腊文、西里尔文）。
Courier New 常规、斜体、粗体、粗体斜体 支持欧洲和中东语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语、亚美尼亚语和希伯来语）的 Serif 固定宽度字体。
格鲁吉亚 常规、斜体、粗体、粗体斜体 支持欧洲脚本（拉丁文、希腊文和西里尔文）。
宋体, Times New Roman 常规、斜体、粗体、粗体斜体 支持欧洲脚本（拉丁文、希腊文、西里尔文、阿拉伯语、亚美尼亚文、希伯来语）的旧字体。

可变字体

可变字体有利于精确控制文本的外观。

字体系列 Axes 备注
Bahnschrift 粗细、宽度 支持拉丁文、希腊语和西里尔文的可变字体。
Segoe UI Variable 粗细、光学尺寸 支持拉丁文、希腊语和西里尔文的可变字体。

符号和图标

字体系列 样式 备注
Segoe MDL2 Assets 常规 应用图标的用户界面字体。 有关详细信息，请参阅 Segoe Fluent Icons 字体 文章。
Segoe UI 表情符号 常规 表情符号的用户界面字体。
Segoe UI 符号 常规 符号的后备字体。