數(shù)字外面有個(gè)圈圈， 或者圈圈里有反底色顯示，效果類似：

帶圈圈的數(shù)字示例：
①

反色圈圈數(shù)字示例：

?

要實(shí)現(xiàn)上面的效果，使用以下技術(shù)都可以達(dá)成：

• 方式1，. 使用圖片 <image>
• 方式2 ，使用特殊的字體， 比如WingDing系列
• 方式3， 使用SVG繪圖
• 方式4 ，直接使用Unicode 字符編碼

毫無(wú)疑問(wèn)， 方式4 是最簡(jiǎn)單，靈活性和通用性最強(qiáng)的方式。也是本篇介紹的方式： 使用Unicode 編碼顯示帶圈圈的數(shù)字（本篇主要介紹從0到20）。

0-20 圈圈數(shù)字和底色圈圈數(shù)字的Unicode 編碼

Unicode 是統(tǒng)一編碼，直接定義了圈圈數(shù)字這樣的字符， 這里參考了：
官方對(duì)數(shù)字定義的文檔， 得出的結(jié)論如下：

帶圈字符0的Unicode編碼是 24EA（16進(jìn)制）

帶圈字符1-20 的Unicode編碼是2460~2473

反色帶圈字符0的Unicode編碼是24FF

反色帶圈字符1-10的Unicode編碼是2776~277F

反色帶圈字符11-20的Unicode編碼是24EB~24F4
注意：有底色帶圈數(shù)字的1-10 和 11-20 的編碼并不連續(xù)， 也就是這兩種其實(shí)并不是相同系列，而且顯示上的尺寸效果也有一些區(qū)別。

0-20 圈圈數(shù)字在HTML中如何顯示

上面查看的都是16 進(jìn)制， 而HTML的&# 之后連接的是字符的十進(jìn)制編碼， 所以需要做一個(gè)進(jìn)制轉(zhuǎn)換， 可以使用在線的進(jìn)制轉(zhuǎn)換工具進(jìn)行轉(zhuǎn)換，比如 https://tool.oschina.net/hexconvert/。

最終的效果如下：

數(shù)字十六進(jìn)制十進(jìn)制字符編碼顯示效果

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 反色圈圈數(shù)字在HTML中如何顯示

數(shù)字十六進(jìn)制十進(jìn)制字符編碼顯示效果

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，俗稱雜錦字體，本來(lái)是印刷品之中使用的裝飾及圖形符號(hào)。在計(jì)算機(jī)被用來(lái)制作印刷刊物后，印刷業(yè)界便制造了各種雜錦字體。

樣式

上面顯示的相關(guān)是黑白色， 要么背景黑色，數(shù)字白色；要么背景白色，數(shù)字黑色。要顯示本篇開頭的帶顏色的效果，就需要結(jié)合CSS進(jìn)行設(shè)置了，比如：

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

本篇的參考文獻(xiàn)

* https://unicode-table.com/cn/2792/ ， Unicode 數(shù)字編碼查詢， 這個(gè)網(wǎng)站的樣式在電腦端顯示有點(diǎn)異常， 但是還是勉強(qiáng)可以看到信息。

• http://xahlee.info/comp/unicode_circled_numbers.html，Unicode 圈圈數(shù)字的編碼對(duì)應(yīng)。
  顯示如下：
  

總結(jié)

以上是生活随笔為你收集整理的在HTML 页面中如何显示带圈圈的数字的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。