数字外面有个圈圈， 或者圈圈里有反底色显示，效果类似：

1. 带圈圈的数字示例：
   ①
   

2. 反色圈圈数字示例：
   

❶

要实现上面的效果，使用以下技术都可以达成：

• 方式1，. 使用图片 <image>
• 方式2 ，使用特殊的字体， 比如WingDing系列
• 方式3， 使用SVG绘图
• 方式4 ，直接使用Unicode 字符编码

毫无疑问， 方式4 是最简单，灵活性和通用性最强的方式。也是本篇介绍的方式： 使用Unicode 编码显示带圈圈的数字（本篇主要介绍从0到20）。

0-20 圈圈数字和底色圈圈数字的Unicode 编码

Unicode 是统一编码，直接定义了圈圈数字这样的字符， 这里参考了：
官方对数字定义的文档， 得出的结论如下：

1. 带圈字符0的Unicode编码是 24EA（16进制）
2. 带圈字符1-20 的Unicode编码是2460~2473
3. 反色带圈字符0的Unicode编码是24FF
4. 反色带圈字符1-10的Unicode编码是2776~277F
5. 反色带圈字符11-20的Unicode编码是24EB~24F4
   注意：有底色带圈数字的1-10 和 11-20 的编码并不连续， 也就是这两种其实并不是相同系列，而且显示上的尺寸效果也有一些区别。

0-20 圈圈数字在HTML中如何显示

上面查看的都是16 进制， 而HTML的&# 之后连接的是字符的十进制编码， 所以需要做一个进制转换， 可以使用在线的进制转换工具进行转换，比如 https://tool.oschina.net/hexconvert/。

最终的效果如下：

数字	十六进制	十进制	字符编码	显示效果
0	24EA	9450	⓪	⓪
1	2460	9312	①	①
2	2461	9313	②	②
3	2462	9314	③	③
4	2463	9315	④	④
5	2464	9316	⑤	⑤
6	2465	9317	⑥	⑥
7	2466	9318	⑦	⑦
8	2467	9319	⑧	⑧
9	2468	9320	⑨	⑨
10	2469	9321	⑩	⑩
11	246A	9322	⑪	⑪
12	246B	9323	⑫	⑫
13	246C	9324	⑬	⑬
14	246D	9325	⑭	⑭
15	246E	9326	⑮	⑮
16	246F	9327	⑯	⑯
17	2470	9328	⑰	⑰
18	2471	9329	⑱	⑱
19	2472	9330	⑲	⑲
20	2473	9331	⑳	⑳

0-20 反色圈圈数字在HTML中如何显示

数字	十六进制	十进制	字符编码	显示效果
0	24FF	9471	⓿	⓿
1	2776	10102	①	❶
2	2777	10103	②	❷
3	2778	10104	❸	❸
4	2779	10105	❹	❹
5	277A	10106	❺	❺
6	277B	10107	❻	❻
7	277C	10108	❼	❼
8	277D	10109	❽	❽
9	277E	10110	❾	❾
10	277F	10111	❿	❿
11	24EB	9451	⓫	⓫
12	24EC	9452	⓬	⓬
13	24ED	9453	⓭	⓭
14	24EE	9454	⓮	⓮
15	24EF	9455	⓯	⓯
16	24F1	9456	⓰	⓰
17	24F2	9457	⓱	⓱
18	24F3	9458	⓲	⓲
19	24F4	9459	⓳	⓳
20	24F5	9460	⓴	⓴

• 上面的1-10 使用的是丁贝符。

丁贝符 ，Dingbats，俗称杂锦字体，本来是印刷品之中使用的装饰及图形符号。在计算机被用来制作印刷刊物后，印刷业界便制造了各种杂锦字体。

样式

上面显示的相关是黑白色， 要么背景黑色，数字白色；要么背景白色，数字黑色。要显示本篇开头的带颜色的效果，就需要结合CSS进行设置了，比如：

<span style="color:#66CC33;padding:0;font-size:34px">&#10102;</span>

本篇的参考文献

* https://unicode-table.com/cn/2792/ ， Unicode 数字编码查询， 这个网站的样式在电脑端显示有点异常， 但是还是勉强可以看到信息。

• http://xahlee.info/comp/unicode_circled_numbers.html，Unicode 圈圈数字的编码对应。
  显示如下：