zoukankan      html  css  js  c++  java
  • windows10UWP:Segoe MDL2 图标指南

    windows10 UWP 开发中,图标的使用非常广泛。为此,微软建议大家使用 Segoe MDL2 Assets 字体来获取图标。Segoe MDL2 Assets 包括了哪里图标,微软在

    https://msdn.microsoft.com/zh-cn/library/windows/apps/jj841126.aspx

    作出了详情的说明。本文复制记录了这个说明。

    Segoe MDL2 图标指南

     

    本文列出并提供了随附 Segoe MDL2 资源字体的字形使用指南。若要获取该字体,必须安装 Windows 10。

    建议

    • 仅当你能够显式指定 Segoe MDL2 Assets 字体时,才使用这些字形。

    其他使用指南

    Windows 8/8.1 Segoe UI Symbol 图标字体已替换为适用于 Windows 10 版本的 Segoe MDL2 Assets 字体。可采用与较旧的字体大致相同的方式来使用该字体,但许多字形已根据字体指标集在 Windows 10 图标样式中进行了重绘,以便图标能与字体的 Em 方形内的方格(而非版式基线)对齐。

    注意  Em 是字体的度量单位。字体中的 1 Em 等于分辨率为 72ppi 时 100% 的特定点值。例如,16pt 等于分辨率为 72ppi 时的 16px (aka 100% Plateau)。设计了新的 MDL2 字体,以便占用的图标区域为方形 Em。因此,如果将 16px 的宽度和高度加入代码中,你将获得一个 16x16px 的图标占用。这并不总是意味着该图标即为是全尺寸占用。
     

    Segoe UI Symbol 仍作为“传统”资源进行提供。但建议所有应用程序均更新为使用新 Segoe MDL2 Assets

    Segoe MDL2 Assets 字体中随附的大部分图标和 UI 控件均将映射至 Unicode 专用区 (PUA)。PUA 允许字体开发人员将专用 Unicode 值分配给未映射到现有代码点的字形。在创建符号字体时这非常有用,但也会带来互操作性问题。如果字体不可用,则字形将不显示。仅在你能够指定 Segoe MDL2 Assets 字体时才使用这些字形。

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

    Segoe UI Symbol 不同,Segoe MDL2 Assets 字体中的图标的设计初衷并非是与文本一同内联使用。这意味着某些较旧的“技巧”(如渐进式展开箭头)将不再适用。同样,由于所有新图标的大小和位置均相同,因此无需将其设置为零宽度;只需确保它们成组工作即可。理想情况下,你可以覆盖已设计为成组工作的两个图标,以使其按次序出现。我们可能会因需允许在代码中进行着色而执行此操作。例如,U+EA3A 和 U+EA3B 是为“开始”磁贴锁屏提醒状态而创建的。由于它们已居中对齐,从而使得圆圈中的填充色会随状态的变化而变化。

    Segoe UI Symbol 还依赖于“零宽度”字形以便进行分层和着色,正如本示例中所示,可将黑色边框 (U+E006) 绘制在零宽度红色心形 (U+E00B) 上面。

    使用零宽度字形

    Segoe MDL2 Assets 中的所有字形的固定宽度均相同,且高度和左原点均保持一致,从而可通过直接在其上绘制字形来实现分层和着色效果。

    大部分图标还具有镜像样式,以供在使用从右到左文本方向的语言(如阿拉伯语、波斯语和希伯来语)中使用。

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

    还须记住,Segoe MDL2 Assets 字体中包含的图标远不止此处显示的这些。其中许多图标都是专为实现某种特殊目的而设计的,通常不作它用。

    红心大战

    代码符号枚举描述

    U+E006

    HeartLegacy

    HeartLegacy

    带边框的心形

    U+E0A5

    HeartFillLegacy

    HeartFillLegacy

    实心心形

    U+E007

    HeartBrokenLegacy

    HeartBrokenLegacy

    断裂的心形

    U+E00B

    HeartFillZeroWidthLegacy

    HeartFillZeroWidthLegacy

    实心心形(零宽度)

    U+E00C

    HeartBrokenZeroWidthLegacy

    HeartBrokenZeroWidthLegacy

    断裂的心形(零宽度)

    星形评级

    代码符号枚举描述
    U+E224 RatingStarLegacy RatingStarLegacy 带边框的星形
    U+E0B4 RatingStarFillLegacy RatingStarFillLegacy 实心星形
    U+E00A RatingStarFillZeroWidthLegacy RatingStarFillZeroWidthLegacy 实心星形(零宽度)
    U+E082 RatingStarFillReducedPaddingHTMLLegacy RatingStarFillReducedPaddingHTMLLegacy 实心星形(填充色较浅,适合在 HTML 中使用)
    U+E0B5 RatingStarFillSmallLegacy RatingStarFillSmallLegacy 较小的星形
    U+E7C6 HalfStarLeft HalfStarLeft 一半 星形,左侧

    U+E7C7

    HalfStarRight HalfStarRight 半星形, 右半侧

    复选框组件

    代码 符号 枚举 描述
    U+E001 CheckMarkLegacy CheckMarkLegacy 对勾标志
    U+E002 CheckboxFillLegacy CheckboxFillLegacy 已勾选的复选框
    U+E003 CheckboxLegacy CheckboxLegacy 复选框
    U+E004 CheckboxIndeterminateLegacy CheckboxIndeterminateLegacy 不确定状态
    U+E005 CheckboxCompositeReversedLegacy CheckboxCompositeReversedLegacy 已反转
    U+E008 CheckMarkZeroWidthLegacy CheckMarkZeroWidthLegacy 对勾标志(零宽度)
    U+E009 CheckboxFillZeroWidthLegacy CheckboxFillZeroWidthLegacy 已勾选(零宽度)
    U+E0A2 CheckboxCompositeLegacy CheckboxCompositeLegacy 复合
    U+E739 复选框 复选框 复选框
    U+E73A CheckboxComposite CheckboxComposite 复合复选框
    U+E73B CheckboxFill CheckboxFill 已勾选的复选框
    U+E73C CheckboxIndeterminate CheckboxIndeterminate 不确定状态
    U+E73D CheckboxCompositeReversed CheckboxCompositeReversed 反转复合
    U+E73E CheckMark CheckMark 对勾标志

    杂项

    代码符号枚举描述

    U+E134

    CommentLegacy CommentLegacy 备注

    U+E113

    FavoriteLegacy FavoriteLegacy  

    U+E195

    UnfavoriteLegacy UnfavoriteLegacy  

    U+E734

    FavoriteStar FavoriteStar 带边框的收藏夹

    U+E735

    FavoriteStarFill FavoriteStarFill  

    U+E8D9

    Unfavorite Unfavorite  

    U+E19F

    LikeLegacy LikeLegacy  

    U+E19E

    DislikeLegacy DislikeLegacy  

    U+E19D

    LikeDislikeLegacy LikeDislikeLegacy  

    U+E116

    VideoLegacy VideoLegacy  

    U+E714

    Video Video  

    U+E20B

    MailMessageLegacy MailMessageLegacy 传统的邮件

    U+E248

    ReplyLegacy ReplyLegacy 答复

    U+E249

    Favorite2Legacy Favorite2Legacy 已填充的收藏夹

    U+E24E

    Unfavorite2Legacy Unfavorite2Legacy 取消收藏

    U+E25A

    MobileContactLegacy MobileContactLegacy 手机联系人

    U+E25B

    BlockedLegacy BlockedLegacy 阻止的联系人

    U+E25C

    TypingIndicatorLegacy TypingIndicatorLegacy 正在键入指示器

    U+E25D

    PresenceChickletVideoLegacy PresenceChickletVideoLegacy 视频在线状态

    U+E25E

    PresenceChickletLegacy PresenceChickletLegacy 在线状态

    滚动条箭头

    代码符号枚举
    U+E00E ScrollChevronLeftLegacy ScrollChevronLeftLegacy
    U+E00F ScrollChevronRightLegacy ScrollChevronRightLegacy
    U+E010 ScrollChevronUpLegacy ScrollChevronUpLegacy
    U+E011 ScrollChevronDownLegacy ScrollChevronDownLegacy
    U+E016 ScrollChevronLeftBoldLegacy ScrollChevronLeftBoldLegacy
    U+E017 ScrollChevronRightBoldLegacy ScrollChevronRightBoldLegacy
    U+E018 ScrollChevronUpBoldLegacy ScrollChevronUpBoldLegacy
    U+E019 ScrollChevronDownBoldLegacy ScrollChevronDownBoldLegacy

    后退按钮

    后退按钮的旧版字形提供了 2 种不同大小,以便外环的权重在为 20pt 和 42pt 时保持一致。还提供两个新的比例镶边后退按钮。这些字形设计用于支持分层。

    代码符号枚举描述
    U+E0C4 BackBttnArrow20Legacy BackBttnArrow20Legacy 后退按钮箭头, 20pt
    U+E0A6 BackBttnArrow42Legacy BackBttnArrow42Legacy 后退按钮箭头, 42pt
    U+E0AD BackBttnMirroredArrow20Legacy BackBttnMirroredArrow20Legacy 后退按钮镜像箭头反转, 20pt
    U+E0AB BackBttnMirroredArrow42Legacy BackBttnMirroredArrow42Legacy 后退按钮镜像箭头反转, 42pt
    U+E830 ChromeBack ChromeBack Chrome 后退按钮
    U+EA47 ChromeBackMirrored ChromeBackMirrored Chrome 后退镜像按钮

    HTML 的后退箭头

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

    代码符号枚举描述
    U+E0D5 ArrowHTMLLegacy ArrowHTMLLegacy 适用于 HTML 的箭头
    U+E0AE ArrowHTMLMirroredLegacy ArrowHTMLMirroredLegacy U+E0D5 镜像版

    应用栏字形

    针对 AppBar 使用以下列表中的字形。依照约定,这些字形通过其枚举名称进行引用。并且它们均设计为 20x20px 的图标,且其周围未环绕圆环。

    代码符号枚举描述
    U+E8FB Accept Accept  
    U+E910 Accounts Accounts  
    U+E710 Add Add  
    U+E8FA Addfriend AddFriend  
    U+E7EF Admin Admin  
    U+E8E3 Aligncenter AlignCenter  
    U+E8E4 Alignleft AlignLeft  
    U+E8E2 Alignright Alignright  
    U+E71D Allapps AllApps  
    U+E723 Attach Attach  
    U+E8A2 Attachcamera AttachCamera  
    U+E8D6 Audio Audio  
    U+E72B Back Back  
    U+E73F Backtowindow BackToWindow  
    U+E8F8 Blockcontact BlockContact  
    U+E8DD Bold Bold  
    U+E8A4 Bookmarks Bookmarks  
    U+E7C5 Browsephotos BrowsePhotos  
    U+E8FD Bulletedlist BulletedList  
    U+E8EF Calculator Calculator  
    U+E787 Calendar Calendar  
    U+E8BF Calendarday CalendarDay  
    U+E8F5 Calendarreply CalendarReply  
    U+E8C0 Calendarweek CalendarWeek  
    U+E722 Camera Camera  
    U+E711 Cancel Cancel  
    U+E8BA Caption Caption  
    U+E7F0 CC CC  
    U+E8EA Cellphone Cellphone  
    U+E8C1 Characters Characters  
    U+E894 Clear Clear  
    U+E8E6 Clearselection ClearSelection  
    U+E89F Closepane ClosePane  
    U+E753 Cloud Cloud  
    U+E90A Comment Comment  
    U+E77B Contact Contact  
    U+E8D4 Contact2 Contact2  
    U+E779 Contactinfo ContactInfo  
    U+E8CF Contactpresence ContactPresence  
    U+E8C8 Copy Copy  
    U+E7A8 Crop Crop  
    U+E8C6 Cut Cut  
    U+E74D Delete Delete  
    U+E8F0 Directions Directions  
    U+E8D8 Disableupdates DisableUpdates  
    U+E8CD Disconnectdrive DisconnectDrive  
    U+E8E0 Dislike Dislike  
    U+E90E Dockbottom DockBottom  
    U+E90C Dockleft DockLeft  
    U+E90D Dockright DockRight  
    U+E8A5 Document Document  
    U+E896 Download Download  
    U+E70F Edit Edit  
    U+E899 Emoji Emoji  
    U+E76E Emoji2 Emoji2  
    U+E728 Favoritelist FavoriteList  
    U+E734 Favoritestar FavoriteStar  
    U+E735 Favoritestarfill FavoriteStarFill  
    U+E71C Filter Filter  
    U+E11A Findlegacy FindLegacy  
    U+E7C1 Flag Flag  
    U+E8B7 Folder Folder  
    U+E8D2 Font Font  
    U+E8D3 Fontcolor Fontcolor  
    U+E8E7 Fontdecrease FontDecrease  
    U+E8E8 Fontincrease FontIncrease  
    U+E8E9 Fontsize FontSize  
    U+E72A Forward Forward  
    U+E908 Fourbars FourBars  
    U+E740 Fullscreen FullScreen  
    U+E774 Globe Globe  
    U+E8AD Go Go  
    U+E8FC Gotostart GoToStart  
    U+E8D1 Gototoday GoToToday  
    U+E778 Hangup Hangup  
    U+E897 Help Help  
    U+E8C5 Hidebcc HideBCC  
    U+E7E6 Highlight Highlight  
    U+E80F Home Home  
    U+E8B5 Import Import  
    U+E8B6 Importall ImportAll  
    U+E8C9 Important Important  
    U+E8DB Italic Italic  
    U+E765 Keyboardclassic KeyboardClassic  
    U+E89B Leavechat LeaveChat  
    U+E8F1 Library Library  
    U+E8E1 Like Like  
    U+E8DF Likedislike LikeDislike  
    U+E71B Link Link  
    U+EA37 List List  
    U+E81D Location Location  
    U+E715 Mail Mail  
    U+E8A8 Mailfill MailFill  
    U+E89C Mailforward MailForward  
    U+E8CA Mailreply MailReply  
    U+E8C2 Mailreplyall MailReplyAll  
    U+E912 Manage Manage  
    U+E8CE Mapdrive MapDrive  
    U+E707 Mappin Mappin  
    U+E77C Memo Memo  
    U+E8BD Message Message  
    U+E720 Microphone Microphone  
    U+E712 More More  
    U+E8DE Movetofolder MoveToFolder  
    U+E90B Musicinfo MusicInfo  
    U+E74F Mute Mute  
    U+E8F4 Newfolder NewFolder  
    U+E78B Newwindow NewWindow  
    U+E893 Next Next  
    U+E905 Onebar OneBar  
    U+E8E5 Openfile OpenFile  
    U+E8DA Openlocal OpenLocal  
    U+E8A0 Openpane OpenPane  
    U+E7AC Openwith OpenWith  
    U+E8B4 Orientation Orientation  
    U+E7EE Otheruser OtherUser  
    U+E1CE Outlinestarlegacy OutlineStarLegacy  
    U+E7C3 Page Page  
    U+E77F Paste Paste  
    U+E769 Pause Pause  
    U+E716 People People  
    U+E8D7 Permissions Permissions  
    U+E717 Phone Phone  
    U+E780 Phonebook PhoneBook  
    U+E718 Pin Pin  
    U+E768 Play Play  
    U+E8F3 Postupdate PostUpdate  
    U+E8FF Preview Preview  
    U+E8A1 Previewlink PreviewLink  
    U+E892 Previous Previous  
    U+E8D0 Priority Priority  
    U+E8A6 Protecteddocument ProtectedDocument  
    U+E8C3 Read Read  
    U+E7A6 Redo Redo  
    U+E72C Refresh Refresh  
    U+E8AF Remote Remote  
    U+E738 Remove Remove  
    U+E8AC Rename Rename  
    U+E90F Repair Repair  
    U+E8EE Repeatall RepeatAll  
    U+E8ED Repeatone RepeatOne  
    U+E730 Reporthacked ReportHacked  
    U+E8EB Reshare Reshare  
    U+E7AD Rotate Rotate  
    U+E89E Rotatecamera RotateCamera  
    U+E74E Save Save  
    U+E78C Savelocal SaveLocal  
    U+E8FE Scan Scan  
    U+E8B3 Selectall SelectAll  
    U+E724 Send Send  
    U+E7B5 Setlockscreen SetLockScreen  
    U+E97B Settile SetTile  
    U+E713 Settings Settings  
    U+E72D Share Share  
    U+E719 Shop Shop  
    U+E8C4 Showbcc ShowBCC  
    U+E8BC Showresults ShowResults  
    U+E8B1 Shuffle Shuffle  
    U+E786 Slideshow Slideshow  
    U+E1CF Solidstarlegacy SolidStarLegacy  
    U+E8CB Sort Sort  
    U+E71A Stop Stop  
    U+E913 Street Street  
    U+E8AB Switch Switch  
    U+E8F9 Switchapps SwitchApps  
    U+E895 Sync Sync  
    U+E8F7 Syncfolder SyncFolder  
    U+E8EC Tag Tag  
    U+E907 Threebars ThreeBars  
    U+E7C9 Touchpointer TouchPointer  
    U+E78A Trim Trim  
    U+E906 Twobars TwoBars  
    U+E89A Twopage TwoPage  
    U+E8DC Underline Underline  
    U+E7A7 Undo Undo  
    U+E8D9 Unfavorite UnFavorite  
    U+E77A Unpin UnPin  
    U+E8F6 Unsyncfolder UnSyncFolder  
    U+E74A Up Up  
    U+E898 Upload Upload  
    U+E8AA Videochat VideoChat  
    U+E890 View View  
    U+E8A9 Viewall ViewAll  
    U+E767 Volume Volume  
    U+E8B8 Webcam Webcam  
    U+E909 World World  
    U+E904 Zerobars ZeroBars  
    U+E71E Zoom Zoom  
    U+E8A3 Zoomin ZoomIn  
    U+E71F Zoomout ZoomOut  

    电池图标

    代码符号枚举代码符号枚举
    E996 BatteryUnknown BatteryUnknown EC02 MobBatteryUnknown MobBatteryUnknown
    E850 Battery0 Battery0 EBA0 MobBattery0 MobBattery0
    E851 Battery1 Battery1 EBA1 MobBattery1 MobBattery1
    E852 Battery2 Battery2 EBA2 MobBattery2 MobBattery2
    E853 Battery3 Battery3 EBA3 MobBattery3 MobBattery3
    E854 Battery4 Battery4 EBA4 MobBattery4 MobBattery4
    E855 Battery5 Battery5 EBA5 MobBattery5 MobBattery5
    E856 Battery6 Battery6 EBA6 MobBattery6 MobBattery6
    E857 Battery7 Battery7 EBA7 MobBattery7 MobBattery7
    E858 Battery8 Battery8 EBA8 MobBattery8 MobBattery8
    E859 Battery9 Battery9 EBA9 MobBattery9 MobBattery9
    E83F Battery10 Battery10 EBA0 MobBatter10 MobBatter10
    E85A BatteryCharging0 BatteryCharging0 EBAB MobBatteryCharging0 MobBatteryCharging0
    E85B BatteryCharging1 BatteryCharging1 EBAC MobBatteryCharging1 MobBatteryCharging1
    E85C BatteryCharging2 BatteryCharging2 EBAD MobBatteryCharging2 MobBatteryCharging2
    E85D BatteryCharging3 BatteryCharging3 EBAE MobBatteryCharging3 MobBatteryCharging3
    E85E BatteryCharging4 BatteryCharging4 EBAF MobBatteryCharging4 MobBatteryCharging4
    E85F BatteryCharging5 BatteryCharging5 EBB0 MobBatteryCharging5 MobBatteryCharging5
    E860 BatteryCharging6 BatteryCharging6 EBB1 MobBatteryCharging6 MobBatteryCharging6
    E861 BatteryCharging7 BatteryCharging7 EBB2 MobBatteryCharging7 MobBatteryCharging7
    E862 BatteryCharging8 BatteryCharging8 EBB3 MobBatteryCharging8 MobBatteryCharging8
    E83E BatteryCharging9 BatteryCharging9 EBB4 MobBatteryCharging9 MobBatteryCharging9
    ea93 BatteryCharging10 BatteryCharging10 EBB5 MobBatteryChargin10 MobBatteryChargin10
    E863 BatterySaver0 BatterySaver0 EBB6 MobBatterySaver0 MobBatterySaver0
    E864 BatterySaver1 BatterySaver1 EBB7 MobBatterySaver1 MobBatterySaver1
    E865 BatterySaver2 BatterySaver2 EBB8 MobBatterySaver2 MobBatterySaver2
    E866 BatterySaver3 BatterySaver3 EBB9 MobBatterySaver3 MobBatterySaver3
    E867 BatterySaver4 BatterySaver4 EBBA MobBatterySaver4 MobBatterySaver4
    E868 BatterySaver5 BatterySaver5 EBBB MobBatterySaver5 MobBatterySaver5
    E869 BatterySaver6 BatterySaver6 EBBC MobBatterySaver6 MobBatterySaver6
    E86A BatterySaver7 BatterySaver7 EBBD MobBatterySaver7 MobBatterySaver7
    E86B BatterySaver8 BatterySaver8 EBBE MobBatterySaver8 MobBatterySaver8
    EA94 BatterySaver9 BatterySaver9 EBBF MobBatterySaver9 MobBatterySaver9
    EA95 BatterySaver10 BatterySaver10 EBC0 MobBatterySaver10 MobBatterySaver10
  • 相关阅读:
    Swift基础学习
    APP的线程安全
    LintCode-O(1) Check Power of 2
    LintCode-Maximum Subarray Difference
    LintCode-Subarray Sum Closest
    LintCode-Rehashing
    Lintcode-Max Tree
    LintCode-Interleaving Positive and Negative Numbers.
    LintCode-Topological Sorting
    LintCode-Rotate String
  • 原文地址:https://www.cnblogs.com/ashui/p/5112075.html
Copyright © 2011-2022 走看看