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+E224RatingStarLegacyRatingStarLegacy带边框的星形
U+E0B4RatingStarFillLegacyRatingStarFillLegacy实心星形
U+E00ARatingStarFillZeroWidthLegacyRatingStarFillZeroWidthLegacy实心星形(零宽度)
U+E082RatingStarFillReducedPaddingHTMLLegacyRatingStarFillReducedPaddingHTMLLegacy实心星形(填充色较浅,适合在 HTML 中使用)
U+E0B5RatingStarFillSmallLegacyRatingStarFillSmallLegacy较小的星形
U+E7C6HalfStarLeftHalfStarLeft一半 星形,左侧

U+E7C7

HalfStarRightHalfStarRight半星形, 右半侧

 

复选框组件

代码符号枚举描述
U+E001CheckMarkLegacyCheckMarkLegacy对勾标志
U+E002CheckboxFillLegacyCheckboxFillLegacy已勾选的复选框
U+E003CheckboxLegacyCheckboxLegacy复选框
U+E004CheckboxIndeterminateLegacyCheckboxIndeterminateLegacy不确定状态
U+E005CheckboxCompositeReversedLegacyCheckboxCompositeReversedLegacy已反转
U+E008CheckMarkZeroWidthLegacyCheckMarkZeroWidthLegacy对勾标志(零宽度)
U+E009CheckboxFillZeroWidthLegacyCheckboxFillZeroWidthLegacy已勾选(零宽度)
U+E0A2CheckboxCompositeLegacyCheckboxCompositeLegacy复合
U+E739复选框复选框复选框
U+E73ACheckboxCompositeCheckboxComposite复合复选框
U+E73BCheckboxFillCheckboxFill已勾选的复选框
U+E73CCheckboxIndeterminateCheckboxIndeterminate不确定状态
U+E73DCheckboxCompositeReversedCheckboxCompositeReversed反转复合
U+E73ECheckMarkCheckMark对勾标志

 

杂项

代码符号枚举描述

U+E134

CommentLegacyCommentLegacy备注

U+E113

FavoriteLegacyFavoriteLegacy 

U+E195

UnfavoriteLegacyUnfavoriteLegacy 

U+E734

FavoriteStarFavoriteStar带边框的收藏夹

U+E735

FavoriteStarFillFavoriteStarFill 

U+E8D9

UnfavoriteUnfavorite 

U+E19F

LikeLegacyLikeLegacy 

U+E19E

DislikeLegacyDislikeLegacy 

U+E19D

LikeDislikeLegacyLikeDislikeLegacy 

U+E116

VideoLegacyVideoLegacy 

U+E714

VideoVideo 

U+E20B

MailMessageLegacyMailMessageLegacy传统的邮件

U+E248

ReplyLegacyReplyLegacy答复

U+E249

Favorite2LegacyFavorite2Legacy已填充的收藏夹

U+E24E

Unfavorite2LegacyUnfavorite2Legacy取消收藏

U+E25A

MobileContactLegacyMobileContactLegacy手机联系人

U+E25B

BlockedLegacyBlockedLegacy阻止的联系人

U+E25C

TypingIndicatorLegacyTypingIndicatorLegacy正在键入指示器

U+E25D

PresenceChickletVideoLegacyPresenceChickletVideoLegacy视频在线状态

U+E25E

PresenceChickletLegacyPresenceChickletLegacy在线状态

 

滚动条箭头

代码符号枚举
U+E00EScrollChevronLeftLegacyScrollChevronLeftLegacy
U+E00FScrollChevronRightLegacyScrollChevronRightLegacy
U+E010ScrollChevronUpLegacyScrollChevronUpLegacy
U+E011ScrollChevronDownLegacyScrollChevronDownLegacy
U+E016ScrollChevronLeftBoldLegacyScrollChevronLeftBoldLegacy
U+E017ScrollChevronRightBoldLegacyScrollChevronRightBoldLegacy
U+E018ScrollChevronUpBoldLegacyScrollChevronUpBoldLegacy
U+E019ScrollChevronDownBoldLegacyScrollChevronDownBoldLegacy

 

后退按钮

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

代码符号枚举描述
U+E0C4BackBttnArrow20LegacyBackBttnArrow20Legacy后退按钮箭头, 20pt
U+E0A6BackBttnArrow42LegacyBackBttnArrow42Legacy后退按钮箭头, 42pt
U+E0ADBackBttnMirroredArrow20LegacyBackBttnMirroredArrow20Legacy后退按钮镜像箭头反转, 20pt
U+E0ABBackBttnMirroredArrow42LegacyBackBttnMirroredArrow42Legacy后退按钮镜像箭头反转, 42pt
U+E830ChromeBackChromeBackChrome 后退按钮
U+EA47ChromeBackMirroredChromeBackMirroredChrome 后退镜像按钮

 

HTML 的后退箭头

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

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

 

应用栏字形

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

代码符号枚举描述
U+E8FBAcceptAccept 
U+E910AccountsAccounts 
U+E710AddAdd 
U+E8FAAddfriendAddFriend 
U+E7EFAdminAdmin 
U+E8E3AligncenterAlignCenter 
U+E8E4AlignleftAlignLeft 
U+E8E2AlignrightAlignright 
U+E71DAllappsAllApps 
U+E723AttachAttach 
U+E8A2AttachcameraAttachCamera 
U+E8D6AudioAudio 
U+E72BBackBack 
U+E73FBacktowindowBackToWindow 
U+E8F8BlockcontactBlockContact 
U+E8DDBoldBold 
U+E8A4BookmarksBookmarks 
U+E7C5BrowsephotosBrowsePhotos 
U+E8FDBulletedlistBulletedList 
U+E8EFCalculatorCalculator 
U+E787CalendarCalendar 
U+E8BFCalendardayCalendarDay 
U+E8F5CalendarreplyCalendarReply 
U+E8C0CalendarweekCalendarWeek 
U+E722CameraCamera 
U+E711CancelCancel 
U+E8BACaptionCaption 
U+E7F0CCCC 
U+E8EACellphoneCellphone 
U+E8C1CharactersCharacters 
U+E894ClearClear 
U+E8E6ClearselectionClearSelection 
U+E89FClosepaneClosePane 
U+E753CloudCloud 
U+E90ACommentComment 
U+E77BContactContact 
U+E8D4Contact2Contact2 
U+E779ContactinfoContactInfo 
U+E8CFContactpresenceContactPresence 
U+E8C8CopyCopy 
U+E7A8CropCrop 
U+E8C6CutCut 
U+E74DDeleteDelete 
U+E8F0DirectionsDirections 
U+E8D8DisableupdatesDisableUpdates 
U+E8CDDisconnectdriveDisconnectDrive 
U+E8E0DislikeDislike 
U+E90EDockbottomDockBottom 
U+E90CDockleftDockLeft 
U+E90DDockrightDockRight 
U+E8A5DocumentDocument 
U+E896DownloadDownload 
U+E70FEditEdit 
U+E899EmojiEmoji 
U+E76EEmoji2Emoji2 
U+E728FavoritelistFavoriteList 
U+E734FavoritestarFavoriteStar 
U+E735FavoritestarfillFavoriteStarFill 
U+E71CFilterFilter 
U+E11AFindlegacyFindLegacy 
U+E7C1FlagFlag 
U+E8B7FolderFolder 
U+E8D2FontFont 
U+E8D3FontcolorFontcolor 
U+E8E7FontdecreaseFontDecrease 
U+E8E8FontincreaseFontIncrease 
U+E8E9FontsizeFontSize 
U+E72AForwardForward 
U+E908FourbarsFourBars 
U+E740FullscreenFullScreen 
U+E774GlobeGlobe 
U+E8ADGoGo 
U+E8FCGotostartGoToStart 
U+E8D1GototodayGoToToday 
U+E778HangupHangup 
U+E897HelpHelp 
U+E8C5HidebccHideBCC 
U+E7E6HighlightHighlight 
U+E80FHomeHome 
U+E8B5ImportImport 
U+E8B6ImportallImportAll 
U+E8C9ImportantImportant 
U+E8DBItalicItalic 
U+E765KeyboardclassicKeyboardClassic 
U+E89BLeavechatLeaveChat 
U+E8F1LibraryLibrary 
U+E8E1LikeLike 
U+E8DFLikedislikeLikeDislike 
U+E71BLinkLink 
U+EA37ListList 
U+E81DLocationLocation 
U+E715MailMail 
U+E8A8MailfillMailFill 
U+E89CMailforwardMailForward 
U+E8CAMailreplyMailReply 
U+E8C2MailreplyallMailReplyAll 
U+E912ManageManage 
U+E8CEMapdriveMapDrive 
U+E707MappinMappin 
U+E77CMemoMemo 
U+E8BDMessageMessage 
U+E720MicrophoneMicrophone 
U+E712MoreMore 
U+E8DEMovetofolderMoveToFolder 
U+E90BMusicinfoMusicInfo 
U+E74FMuteMute 
U+E8F4NewfolderNewFolder 
U+E78BNewwindowNewWindow 
U+E893NextNext 
U+E905OnebarOneBar 
U+E8E5OpenfileOpenFile 
U+E8DAOpenlocalOpenLocal 
U+E8A0OpenpaneOpenPane 
U+E7ACOpenwithOpenWith 
U+E8B4OrientationOrientation 
U+E7EEOtheruserOtherUser 
U+E1CEOutlinestarlegacyOutlineStarLegacy 
U+E7C3PagePage 
U+E77FPastePaste 
U+E769PausePause 
U+E716PeoplePeople 
U+E8D7PermissionsPermissions 
U+E717PhonePhone 
U+E780PhonebookPhoneBook 
U+E718PinPin 
U+E768PlayPlay 
U+E8F3PostupdatePostUpdate 
U+E8FFPreviewPreview 
U+E8A1PreviewlinkPreviewLink 
U+E892PreviousPrevious 
U+E8D0PriorityPriority 
U+E8A6ProtecteddocumentProtectedDocument 
U+E8C3ReadRead 
U+E7A6RedoRedo 
U+E72CRefreshRefresh 
U+E8AFRemoteRemote 
U+E738RemoveRemove 
U+E8ACRenameRename 
U+E90FRepairRepair 
U+E8EERepeatallRepeatAll 
U+E8EDRepeatoneRepeatOne 
U+E730ReporthackedReportHacked 
U+E8EBReshareReshare 
U+E7ADRotateRotate 
U+E89ERotatecameraRotateCamera 
U+E74ESaveSave 
U+E78CSavelocalSaveLocal 
U+E8FEScanScan 
U+E8B3SelectallSelectAll 
U+E724SendSend 
U+E7B5SetlockscreenSetLockScreen 
U+E97BSettileSetTile 
U+E713SettingsSettings 
U+E72DShareShare 
U+E719ShopShop 
U+E8C4ShowbccShowBCC 
U+E8BCShowresultsShowResults 
U+E8B1ShuffleShuffle 
U+E786SlideshowSlideshow 
U+E1CFSolidstarlegacySolidStarLegacy 
U+E8CBSortSort 
U+E71AStopStop 
U+E913StreetStreet 
U+E8ABSwitchSwitch 
U+E8F9SwitchappsSwitchApps 
U+E895SyncSync 
U+E8F7SyncfolderSyncFolder 
U+E8ECTagTag 
U+E907ThreebarsThreeBars 
U+E7C9TouchpointerTouchPointer 
U+E78ATrimTrim 
U+E906TwobarsTwoBars 
U+E89ATwopageTwoPage 
U+E8DCUnderlineUnderline 
U+E7A7UndoUndo 
U+E8D9UnfavoriteUnFavorite 
U+E77AUnpinUnPin 
U+E8F6UnsyncfolderUnSyncFolder 
U+E74AUpUp 
U+E898UploadUpload 
U+E8AAVideochatVideoChat 
U+E890ViewView 
U+E8A9ViewallViewAll 
U+E767VolumeVolume 
U+E8B8WebcamWebcam 
U+E909WorldWorld 
U+E904ZerobarsZeroBars 
U+E71EZoomZoom 
U+E8A3ZoominZoomIn 
U+E71FZoomoutZoomOut 

 

电池图标

代码符号枚举代码符号枚举
E996BatteryUnknownBatteryUnknownEC02MobBatteryUnknownMobBatteryUnknown
E850Battery0Battery0EBA0MobBattery0MobBattery0
E851Battery1Battery1EBA1MobBattery1MobBattery1
E852Battery2Battery2EBA2MobBattery2MobBattery2
E853Battery3Battery3EBA3MobBattery3MobBattery3
E854Battery4Battery4EBA4MobBattery4MobBattery4
E855Battery5Battery5EBA5MobBattery5MobBattery5
E856Battery6Battery6EBA6MobBattery6MobBattery6
E857Battery7Battery7EBA7MobBattery7MobBattery7
E858Battery8Battery8EBA8MobBattery8MobBattery8
E859Battery9Battery9EBA9MobBattery9MobBattery9
E83FBattery10Battery10EBA0MobBatter10MobBatter10
E85ABatteryCharging0BatteryCharging0EBABMobBatteryCharging0MobBatteryCharging0
E85BBatteryCharging1BatteryCharging1EBACMobBatteryCharging1MobBatteryCharging1
E85CBatteryCharging2BatteryCharging2EBADMobBatteryCharging2MobBatteryCharging2
E85DBatteryCharging3BatteryCharging3EBAEMobBatteryCharging3MobBatteryCharging3
E85EBatteryCharging4BatteryCharging4EBAFMobBatteryCharging4MobBatteryCharging4
E85FBatteryCharging5BatteryCharging5EBB0MobBatteryCharging5MobBatteryCharging5
E860BatteryCharging6BatteryCharging6EBB1MobBatteryCharging6MobBatteryCharging6
E861BatteryCharging7BatteryCharging7EBB2MobBatteryCharging7MobBatteryCharging7
E862BatteryCharging8BatteryCharging8EBB3MobBatteryCharging8MobBatteryCharging8
E83EBatteryCharging9BatteryCharging9EBB4MobBatteryCharging9MobBatteryCharging9
ea93BatteryCharging10BatteryCharging10EBB5MobBatteryChargin10MobBatteryChargin10
E863BatterySaver0BatterySaver0EBB6MobBatterySaver0MobBatterySaver0
E864BatterySaver1BatterySaver1EBB7MobBatterySaver1MobBatterySaver1
E865BatterySaver2BatterySaver2EBB8MobBatterySaver2MobBatterySaver2
E866BatterySaver3BatterySaver3EBB9MobBatterySaver3MobBatterySaver3
E867BatterySaver4BatterySaver4EBBAMobBatterySaver4MobBatterySaver4
E868BatterySaver5BatterySaver5EBBBMobBatterySaver5MobBatterySaver5
E869BatterySaver6BatterySaver6EBBCMobBatterySaver6MobBatterySaver6
E86ABatterySaver7BatterySaver7EBBDMobBatterySaver7MobBatterySaver7
E86BBatterySaver8BatterySaver8EBBEMobBatterySaver8MobBatterySaver8
EA94BatterySaver9BatterySaver9EBBFMobBatterySaver9MobBatterySaver9
EA95BatterySaver10BatterySaver10EBC0MobBatterySaver10MobBatterySaver10

转载于:https://www.cnblogs.com/ashui/p/5112075.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值