通过

Windows 11 中的版式

  • 项目

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

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

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

指标

在 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 变量中呈现的小写字母，其中包含它根据呈现形状的不同形状的轮廓

Segoe UIVariable 支持两个轴：权重和光学大小。 重量轴是递增的，而光学尺寸轴是自动的并且是默认打开的。 光学尺寸轴控制字体中计数器的形状和大小，优先考虑小尺寸的易读性和大尺寸的个性。

使用 Segoe Fluent Variable

类型渐变

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

Windows 11 中的版式最佳做法

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

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

示例

提示

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

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