Segoe UI Symbol 图标指南

有关 Segoe UI Symbol 字体

添加到 Segoe UI Symbol 的大部分 UI 控件都会映射到 Unicode 专用区 (PUA)。PUA 允许字体开发人员将专用 Unicode 值分配给未映射到现有代码点的字形。当创建符号字体时这非常有用,但也会带来互操作性问题。如果字体不可用,则字形将不显示。在你可以指定 Segoe UI Symbol 字体时仅使用这些字形。

如果你使用磁贴,则无法使用这些字形,因为你无法指定磁贴字体而 PUA 字形不会通过字体回滚提供。

大部分此类字形在提供时其间距为零。你可以在每个零宽度字形上放置其他零宽度字形。例如,如果你插入零宽度的红色的实心 (U+E00B),光标不会跑到心形的末尾,因为其宽度为零。然后,如果你插入黑色的心形轮廓 (U+E006),则心形轮廓会放置在实心之上。

使用零宽度字形

大部分图标还具有镜像样式,以供使用双向文本的语言使用。

如果你使用 C#/VB/C++ 和 XAML 开发应用,则可以选择使用 Symbol enumeration 而不是 Unicode ID 从 Segoe UI Symbol 字体指定字形。如果你使用 JavaScript 和 HTML 开发应用,则可以选择使用 *AppBarIcon enumeration *而不是 Unicode ID 从 Segoe UI Symbol 字体指定字形。

红心大战

红心大战图标

星形评级

评级图标

复选框组件

复选框组件

单选按钮控件

单选按钮控件

杂项

杂项图标

滚动条箭头

滚动条箭头

渐进式公开箭头

渐进式公开箭头

后退按钮

后退按钮的字形提供了 3 种不同大小,以便外环的权重等于 16pt、20pt 和 42pt。这些字形设计用于支持分层。

16pt 代码20pt 代码42pt 代码符号描述
U+E2A4U+E0BAU+E071后退按钮后退按钮
U+E2A5U+E0BBU+E0A6后退按钮轮廓后退按钮轮廓
U+E2A6U+E0C4U+E0A7后退按钮箭头后退按钮箭头
U+E2A7U+E0D4U+E0A8后退按钮填充后退按钮填充
U+E2A8U+E0B3U+E08E后退按钮反转后退按钮反转
U+E2A9U+E0ACU+E0AA后退按钮镜像后退按钮镜像
U+E2AAU+E0ADU+E0AB后退按钮镜像箭头后退按钮镜像箭头
U+E2ABU+E0AFU+E257后退按钮镜像反转后退按钮镜像反转
 

HTML 的后退箭头

添加其他代码以创建环绕这些字形的圆环。

HTML 的后退箭头

应用栏字形

在 AppBar 中使用这些字形。这些字形设计为以 14pt 大小显示。使用其他代码以创建环绕这些字形的圆环。

应用栏图标

应用栏图标

应用栏图标

应用栏图标

应用栏图标

应用栏图标

未经允许不得转载:空洽网 » Segoe UI Symbol 图标指南

流明天

继续阅读此作者的更多文章