HTML：带圆圈的数字①②③

背景：近期写了个可视化小工具。html文件中用到了步骤①、步骤②...。其中带圆圈的数字如何实现，学习并mark一下。最简单的方法就是输入法直接敲，作为程序员就是要格局打开。

方式一：图片/svg

使用<img>标签，或者背景图片（background-image）形式都可。

方式二：unicode字符集

<!--html：&#十进制 -->
<div>&#9312;</div>

<!--JavaScript：\u十六进制 -->
<div>{{bb}}</div>
bb: '\u2460'

<!--Css：\十六进制 -->
<div class="text">text</div>
.text:before {
   content: '\2460';
}

其中：带圆圈的数字1-3

显示效果	十六进制	十进制	字符编码
①	2460	9312	①
②	2461	9313	②
③	2462	9314	③

更多的数字图标参考Unicode Circled Numbers。鼠标悬停到对应的字符即可获得相应信息。

 使用注意点：

• 有浏览器兼容问题，大部分字符能正常显示。
• Android/iOS等智能终端的识别度比较差。

方式三：图标字体。自定义图标，可用iconfont 

方式四：特殊字体，“Wingdings”、“Webdings”等--可忽略

webdings：<span style="font-family:webdings">0123456789</span><br>
Wingdings：<span style="font-family:Wingdings">0123456789</span>

 效果图：

方式四更多字体信息可参考百科，平时Word文档中可能涉及，平时开发参考前三种方式足够。

The end.