字体

  • 项目

注意

此设计指南是为 Windows 7 创建的，尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用，但演示和示例并不反映我们 当前的设计指南。

用户与文本交互比与 Microsoft Windows 中的任何其他元素交互更多。 Segoe UI (发音为“SEE-go”) 是 Windows 系统字体。 标准字号已增加到 9 磅。

segoe ui 字体中的字母图示

Segoe UI 字体。

Segoe UI 和 Segoe 的字体不同。 Segoe UI 是适用于用户界面文本字符串的 Windows 字体。 Segoe 是 Microsoft 和合作伙伴用于制作印刷和广告材料的品牌字体。

Segoe UI 是一种平易近人、开放且友好的字体，因此具有比 Tahoma、Microsoft Sans Serif 和 Arial 更好的可读性。 它具有人文主义无衬线的特点：例如，与赫尔维蒂卡相比，其首都的不同宽度 (狭窄的E和S，那里的宽度更相似，) 相当宽：其小写的重音和字母形式;和它真正的斜体 (，而不是一个“倾斜”或倾斜的罗马，像许多工业外观的无衬线) 。 字样旨在在屏幕上和打印时提供相同的视觉效果。 它被设计成一个人文主义的无衬线，没有强烈的性格或分散注意力的古怪。

Segoe UI 针对在 Windows 中默认启用的 ClearType 进行了优化。 启用 ClearType 后，Segoe UI 是一种优雅、可读的字体。 如果不启用 ClearType，则 Segoe UI 只能略微接受。 此因素决定何时应使用 Segoe UI。

Segoe UI 包括拉丁语、希腊语、西里尔文和阿拉伯语字符。 新字体也针对 ClearType 进行优化，为其他字符集和用途创建。 其中包括用于日语的 Meiryo、用于朝鲜语的 Malgun 哥特式、用于中文 (传统) 的 Microsoft JhengHei、用于中文 (简体中文) 的 Microsoft YaHei、用于希伯来语的 Gisha 和用于泰语的 Leelawadee，以及专为文档使用而设计的 ClearType 集合字体。

Meiryo 包括基于 Verdana 的拉丁语字符。 Malgun 哥特式、Microsoft JhengHei 和 Microsoft YaHei 使用自定义的 Segoe UI。 不建议使用这些字体的斜体版本。 Malgun 哥特式、Microsoft JhengHei 和 Microsoft YaHei 仅以常规和粗体样式提供，这意味着斜体字符是通过倾斜直立样式合成的。 虽然 Meiryo 包括真正的斜体和粗体斜体，但这些样式仅适用于拉丁字符，在应用斜体样式时，日语字符保持直立。

Meiryo 的变体（称为 Meiryo UI）在 功能区 命令用户界面中是首选。

为了支持使用这些字符集的区域设置，Segoe UI 将替换为正确的字体，具体取决于 本地化 过程中的每个区域设置。

若要通过基于 Windows 的程序许可 Segoe UI 和其他 Microsoft 字体进行分发，请联系 Monotype。

注意： 与 样式、音调 和 用户界面文本 相关的指南在单独的文章中提供。

设计概念

字体、字样、点大小和属性

在传统版式中，字体描述字样、点大小和属性的组合。 字样是字体的外观。 Segoe UI、Tahoma、Verdana 和 Arial 都是字体。 磅大小是指字体的大小，从升序的顶部到下部测量，减去内部间距 (称为前导) 。 一个点大约是 1/72 英寸。 最后，字体可以具有粗体或斜体属性。

非正式地，人们通常使用字体代替字体，如本文所述，但从技术上讲，Segoe UI 是一种字体，而不是字体。 属性的每个组合都是唯一字体 (例如，9 磅 Segoe UI 常规、10 磅 Segoe UI 粗体等) 。

Serif 和 sans serif

字样是衬线或无衬线。 Serif 是指通常用字体完成字母笔划的小转弯。 无衬线字样没有衬线。

读者通常更喜欢在文档中用作正文文本的衬线字体。 衬线为文档提供正式和优雅的感觉。 对于 UI 文本，需要简洁的外观和较低的计算机显示器分辨率，使无衬线字样成为更好的选择。

与此示例

当文本的亮度与背景存在较大差异时，文本是最容易阅读的。 白色背景上的黑色文本在非常浅的背景上提供最高对比度的深色文本也可以提供高对比度。 此组合最适合主 UI 图面。

深色背景上的浅色文本提供良好的对比度，但不如浅色背景上的深色文本好。 此组合适用于要相对于主要 UI 图面去强调的辅助 UI 图面，例如资源管理器任务窗格。

如果要确保用户阅读文本，请在浅色背景上使用深色文本。

提供

文本可以使用以下 提示 来指示它的使用方式：

  • 指针。 I-bar (“text select”) 指针指示文本是可选的，而向左箭头 (“normal select”) 指针指示文本不是。
  • 插入点。 当文本具有输入焦点时，脱字号是闪烁的垂直条，指示可选或可编辑文本中的插入/选择点。
  • 箱。 文本周围的一个框，指示其可编辑。 为了减轻演示文稿的权重，仅当选择了可编辑文本时，才能动态显示该框。
  • 前景色。 浅灰色表示文本已禁用。 非灰色（尤其是蓝色和紫色）表示文本是链接。
  • 背景色。 浅灰色背景弱表示文本是只读的，但实际上只读文本可以具有任何颜色背景。

这些提供组合具有以下含义：

  • 可编辑。 文本显示在框中，带有文本选择指针，插入符号 (输入焦点) ，通常位于白色背景上。
  • 只读，可选择。 输入焦点) 上带有选择指针和插入符号 (的文本。
  • 只读，不可选择。 带箭头指针的文本。
  • 已禁用。 带箭头指针的浅灰色文本，有时位于灰色背景上。

只读文本传统上具有灰色背景，但不需要灰色背景。 事实上，灰色背景可能不可取，尤其是对于大型文本块，因为它表明文本被禁用，并且阻止阅读。

辅助功能和系统字体、大小和颜色

使残障或残障用户能够访问文本的准则可以归结为一个简单的规则：始终使用系统字体、大小和颜色来尊重用户的设置。

如果只执行一件事...

始终使用系统字体、大小和颜色来尊重用户的设置。

开发 人员： 通过代码，可以使用 GetThemeFont API 函数确定系统字体属性 (包括其大小) 。 可以使用 GetThemeSysColor API 函数确定系统颜色。

由于无法对用户的系统主题设置做出任何假设，因此应：

  • 始终将字体颜色和背景与系统主题颜色为基础。 切勿根据固定的 RGB (红、绿、蓝) 值制作自己的颜色。
  • 始终将系统文本颜色与其相应的背景色匹配。 例如，如果选择COLOR_STATICTEXT文本颜色，则还必须为背景色选择COLOR_STATIC。
  • 始终基于系统字体的比例大小变体创建新字体。 根据系统字体指标，可以创建粗体、斜体、更大和更小的变体。

确保程序遵循用户设置的一种简单方法是使用不同的字号和高对比度配色方案进行测试。 所有文本都应在所选配色方案中正确调整大小并正确显示。

使用模式

文本具有多种使用模式：

使用情况 说明
标题栏文本
标题栏上标识窗口的文本。
 标题栏文本字体示例
主要说明
说明对页面、窗口或对话框执行的操作的文本。
main说明文本字体示例
辅助指令
说明对页面、窗口或对话框执行的操作的补充文本。
辅助指令文本字体示例
普通文本
普通 (用户界面中显示的只读) 文本。
普通文本字体示例
强调文本
粗体文本用于使文本更易于分析，并吸引用户必须阅读的文本的注意。 斜体文本用于引用文本字面上 (而不是引号) 并强调特定字词。
强调文本字体的示例
可编辑文本
用户可以编辑的文本显示在框中。 为了减轻演示文稿的重量，仅当选择了可编辑文本时，才可显示该框。
可编辑文本字体示例
禁用的文本
不适用于当前上下文的文本，例如已禁用控件的标签。 禁用的文本表示用户通常 () 不应费心阅读文本。
禁用文本字体的示例
链接
用于导航到其他页面、窗口或帮助主题或启动命令的文本。
链接文本字体示例
(悬停) 文本字体的链接示例
组标头
用于对列表视图中的项目进行分组的文本。
组标题文本字体示例
文件名
仅) 内容视图中 (文件名文本。
内容视图中的文件名 (示例) 文本字体
文档文本
文档中使用的文本 (，而不是 ui 文本) 。
文档文本字体示例
文档标题
用作文档中标题的文本。
文档标题文本字体示例

准则

字体和颜色

  • 以下字体和颜色是 Windows Vista 和 Windows 7 的默认值。
模式 主题符号 字体、颜色
标题栏文本字体示例
CaptionFont
 9 pt. 黑色 (#000000) Segoe UI
main说明文本字体示例
 MainInstruction
 12 pt. blue (#003399) Segoe UI
辅助指令文本字体示例
指令
 9 pt. 黑色 (#000000) Segoe UI
普通文本字体示例
BodyText
 9 pt. 黑色 (#000000) Segoe UI
强调文本字体的示例
BodyText
 9 pt. 黑色 (#000000) Segoe UI，粗体或斜体
可编辑文本字体示例
BodyText
 9 pt. 黑色 (#000000) Segoe UI，在框中
禁用文本字体的示例
已禁用
 9 pt. 深灰色 (#323232) Segoe UI
链接文本字体示例
HyperLinkText
 9 pt. blue (#0066CC) Segoe UI
(悬停) 文本字体的链接示例
热
 9 pt. 浅蓝色 (#3399FF) Segoe UI
组标题文本字体示例
11 pt. blue (#003399) Segoe UI
内容视图中的文件名 (示例) 文本字体
11 pt. 黑色 (#000000) Segoe UI
文档文本字体示例
（无）
 9 pt. 黑色 (#000000) Calibri
文档标题文本字体示例
（无）
 17 pt. 黑色 (#000000) Calibri
  • 根据 UI 技术和 Windows 的目标版本选择字体并优化窗口布局：
UI 技术 目标 Windows 版本 要使用的字体并对其进行优化
Windows Presentation Foundation
 全部
 使用 WPF 主题部件。
Win32 或 WinForms
 Windows Vista 或更高版本
 使用适当的 Segoe UI 字体。
可扩展组件或 Windows Vista 之前的组件
 若要面向 Windows XP 和 Windows 2000，请使用映射到 Tahoma 的 8 点 MS Shell Dlg 2 伪字体。
若要面向早期版本的 Windows，请使用 8 点 MS Shell Dlg 伪字体，该字体映射到 Windows 2000 和 Windows XP 上的 Tahoma，以及 Windows 95、Windows 98、Windows Millennium Edition 和 Windows NT 4.0 上的 MS Sans Serif。
  • 开发 人员：
    • 对于使用固定布局 (（如 Windows 对话框模板和 WinForms) ）的元素，请硬编码上表中的相应字体。
    • 对于使用动态布局 (（如 Windows Presentation Foundation) ）的元素，请使用主题字体。 使用主题 API（如 DrawThemeText）基于主题符号绘制文本。 如果主题服务未运行，请确保有一个基于系统指标的替代项。
  • 对于 Segoe UI，请使用 9 磅或更大的字号。 Segoe UI 字体针对这些大小进行优化，因此请避免使用较小的字体。
  • 始终将系统文本颜色与其相应的背景色匹配。 例如，如果选择COLOR_STATICTEXT文本颜色，则还必须为背景色选择COLOR_STATIC。
  • 始终基于系统字体的比例大小变体创建新字体。 根据系统字体指标，可以创建粗体、斜体、更大和更小的变体。
  • 在浅色背景（而不是灰色背景）) 显示大块只读文本 (如许可条款。 灰色背景表示已禁用文本，并且不鼓励阅读。
  • 考虑最大行长度为 65 个字符 ，以使文本易于阅读。 (字符包括字母、标点符号和空格)

属性

  • 大多数 UI 文本应为纯文本，没有任何属性。 可以使用属性，如下所示：
    • 粗体。 在控件标签中使用 ，使文本更易于分析。 请谨慎使用 来吸引用户必须阅读的文本的注意。 使用过多的粗体会降低其影响。
    • 斜。 使用 按字面引用文本，而不是引号。 请谨慎使用 来强调特定字词。 用于文本框和可编辑下拉列表中的提示。
    • 粗体斜体。 请不要使用。
    • 强调。 请勿使用链接除外。 改为使用斜体进行强调。
  • 并非所有字体都支持粗体和斜体，因此它们对理解文本至关重要。