网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

Unicode 中包含了各种符号,我们可以作为图标来使用。这里整理一下常用的一些符号。

一、拉丁字母补全(Latin-1 Supplement):U+0080 至 U+00FF

Unicode 编号 字符描述 字符形状 HTML 编码
U+00A4 CURRENCY SIGN ¤ ¤ 
U+00AB LEFT-POINTING DOUBLE ANGLE QUOTATION MARK « « 
U+00B1 PLUS-MINUS SIGN ± ±
U+00BB RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK » »
U+00D7 MULTIPLICATION SIGN × × 
U+00F7 DIVISION SIGN ÷ ÷

二、箭头字符(Arrows):U+2190 至 U+21FF

Unicode 编号 字符描述 字符形状 HTML 编码
U+2190 LEFTWARDS ARROW ←
U+2191 UPWARDS ARROW ↑
U+2192 RIGHTWARDS ARROW →
U+2193 DOWNWARDS ARROW ↓
U+2194 LEFT RIGHT ARROW ↔
U+2195 UP DOWN ARROW ↕
U+2196 NORTH WEST ARROW ↖
U+2197 NORTH EAST ARROW ↗
U+2198 SOUTH EAST ARROW ↘
U+2199 SOUTH WEST ARROW ↙
U+21B5 DOWNWARDS ARROW WITH CORNER LEFTWARDS ↵
U+21BA ANTICLOCKWISE OPEN CIRCLE ARROW ↺
U+21BB CLOCKWISE OPEN CIRCLE ARROW ↻
U+21D0 LEFTWARDS DOUBLE ARROW ⇐
U+21D1 UPWARDS DOUBLE ARROW ⇑
U+21D2 RIGHTWARDS DOUBLE ARROW ⇒
U+21D3 DOWNWARDS DOUBLE ARROW ⇓
U+21D4 LEFT RIGHT DOUBLE ARROW ⇔
U+21D5 UP DOWN DOUBLE ARROW ⇕

 三、几何形状字符(Geometric Shapes):U+25A0 至 U+25FF

Unicode 编号 字符描述 字符形状 HTML 编码
U+25A0 BLACK SQUARE ■
U+25A1 WHITE SQUARE □
U+25AA BLACK SMALL SQUARE ▪ 
U+25AB WHITE SMALL SQUARE ▫ 
U+25AE BLACK VERTICAL RECTANGLE ▮
U+25AF WHITE VERTICAL RECTANGLE ▯
U+25B2 BLACK UP-POINTING TRIANGLE ▲
U+25B3 WHITE UP-POINTING TRIANGLE △
U+25B4 BLACK UP-POINTING SMALL TRIANGLE ▴
U+25B5 WHITE UP-POINTING SMALL TRIANGLE ▵
U+25B6 BLACK RIGHT-POINTING TRIANGLE ▶
U+25B7 WHITE RIGHT-POINTING TRIANGLE ▷
U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE ▸
U+25B9 WHITE RIGHT-POINTING SMALL TRIANGLE ▹
U+25BC BLACK DOWN-POINTING TRIANGLE ▼
U+25BD WHITE DOWN-POINTING TRIANGLE ▽ 
U+25BE BLACK DOWN-POINTING SMALL TRIANGLE ▾
U+25BF WHITE DOWN-POINTING SMALL TRIANGLE ▿
U+25C0 BLACK LEFT-POINTING TRIANGLE ◀
U+25C1 WHITE LEFT-POINTING TRIANGLE ◁
U+25C2 BLACK LEFT-POINTING SMALL TRIANGLE ◂
U+25C3 WHITE LEFT-POINTING SMALL TRIANGLE ◃
U+25CB WHITE CIRCLE ○ 
U+25CF BLACK CIRCLE ●
U+25D0 CIRCLE WITH LEFT HALF BLACK ◐ 
U+25D1 CIRCLE WITH RIGHT HALF BLACK ◑
U+25D2 CIRCLE WITH LOWER HALF BLACK ◒
U+25D3 CIRCLE WITH UPPER HALF BLACK ◓
U+25D4 CIRCLE WITH UPPER RIGHT QUADRANT BLACK ◔
U+25D5 CIRCLE WITH ALL BUT UPPER LEFT QUADRANT BLACK  ◕
U+25E7 SQUARE WITH LEFT HALF BLACK ◧
U+25E8 SQUARE WITH RIGHT HALF BLACK ◨
U+25E9 SQUARE WITH UPPER LEFT DIAGONAL HALF BLACK ◩
U+25EA SQUARE WITH LOWER RIGHT DIAGONAL HALF BLACK ◪
U+25EB WHITE SQUARE WITH VERTICAL BISECTING LINE ◫
U+25F0 WHITE SQUARE WITH UPPER LEFT QUADRANT ◰
U+25F1 WHITE SQUARE WITH LOWER LEFT QUADRANT ◱
U+25F2 WHITE SQUARE WITH LOWER RIGHT QUADRANT ◲
U+25F3 WHITE SQUARE WITH UPPER RIGHT QUADRANT ◳

四、装饰字符(Dingbats):U+2700 至 U+27BF

Unicode 编号 字符描述 字符形状 HTML 编码
U+2713 CHECK MARK ✓
U+2714          HEAVY CHECK MARK ✔
U+2717 BALLOT X ✗
U+2718  HEAVY BALLOT X ✘
U+2729 STRESS OUTLINED WHITE STAR ✩
U+274F LOWER RIGHT DROP-SHADOWED WHITE SQUARE ❏
U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE ❐

Unicode 中的符号太多,所以操作系统中自带的字体未必能包含足够多的符号。例如对于前面介绍的几何形状区块(U+25A0 至 U+25FF),Windows 中完整支持的只有 Windows 7 中开始包含的 Segoe UI Symbol,大部分支持的只有 Windows XP 中开始包含的 Lucida Sans Unicode 和 Office 2007 中包含的 Arial Unicode MS

Mac OS X 中也包含了和 Lucida Sans Unicode 类似的 Lucida Grande 字体,而在 Mac OS X 10.5 中也开始包含 Arial Unicode MS 字体。

Android 4.0 之前的默认字体是 Droid Sans,从 4.0 开始的默认字体是 Roboto;这两个字体都只包含少量的字符,而另外有个 Droid Sans Fallback 字体包含了许多字符,但还是不够全,例如几何形状区块的 96 个字符中它只包含 32 个。

第三方的字体也有不少支持这个区块的全部字符,例如 DejaVu Sans,FreeSans,STIX-Regular,STIXMath-Regular,Symbola 等。在 FileFormat.Info 网站中,我们可以看到 Unicode 各区块字符在各种常见字体中的完整度。

在浏览器渲染页面时,如果发现指定的字体缺少某个字符,它会按照自己的规则选择替代字体。这时候,在 Firefox 22Chrome 31 的调试工具中我们依然能看到浏览器实际使用的字体。

注记:如果需要使用的图标较多,就会发现 Unicode 字符中还是有不少缺少的图形,这时候还是用第三方制作的图标字体(例如 Font Awesome)比较方便。

参考资料:
[1] Unicode 6.3 Character Code Charts
[2] Wikipedia - Unicode block
[3] Wikipedia - List of Unicode characters
[4] Wikipedia - Unicode symbols
[5] Wikipedia - Arrow (symbol)
[6] Wikipedia - Geometric Shapes
[7] Wikipedia - Miscellaneous Symbols
[8] Wikipedia - Dingbat
[9] FileFormat.Info - Unicode Blocks
[A] Wikipedia - Unicode font
[B] Unicode table for you
[C] Search for character(s) in Unicode 6.0.0
[D] Wikipedia - Unicode font
[E] Microsoft Typography - Fonts and Products
[F] Common fonts to all versions of Windows & Mac equivalents
[G] Typetester - Compare fonts for the screen
[H] CSS-Tricks - Icon Fonts are Awesome
[I] 一些可能会用到的特殊符号(Unicode) - Whikiey - 博客园
[J] 维基百科 - XML与HTML字符实体引用列表

posted on 2013-11-10 13:01  zoho  阅读(8282)  评论(0编辑  收藏  举报