在HTML 页面中如何显示带圈圈的数字

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

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

2. 反色圈圈数字示例：
   

❶

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

• 方式1，. 使用图片
• 方式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-20 反色圈圈数字在HTML中如何显示

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

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

样式

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

❶
1

本篇的参考文献

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

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