圈号数字应优先使用Unicode字符①～⑳及⑴～⑽，超出范围或需动态控制时改用CSS伪元素方案，并确保字体兼容与避免双重转义。
圈号数字在 HTML 中的正确实体写法
直接用 ① 到 ⑳ 这类 Unicode 字符编号能显示 ①～⑳，但超出范围（如 ⑳ 之后）会失效或显示为方块。这些是“带圈汉字数字”区段（U+3220–U+3229）和“带圈数字”区段（U+2460–U+246F、U+2474–U+249B）里的字符，不是所有数字都有预定义实体名，必须用十进制或十六进制数值引用。
为什么 &circled{5} 或 ⑤ 有时不渲染
常见原因有三：
— 浏览器未加载支持该 Unicode 区段的字体（比如系统缺 Noto Sans CJK 或 Segoe UI Symbol）；
— 服务端或编辑器自动转义了 ⑤ 中的 &，变成纯文本；
— 混用了 HTML 实体与 CSS 伪元素方案（例如同时写了 ⑤ 又加了 ::before { content: "⑤" }），造成冗余或冲突。
安全可靠的生成方式：用 ... 十六进制引用 + 字体兜底
推荐按需查表生成，不要手算。关键点：
- 1～10：用
①～⑩（①～⑩） - 11～20：用
⑪～⑳（⑪～⑳） - 21～30：用
⑴～⑽（⑴～⑽，注意这是括号圈，非实心圆） - 若要兼容旧环境，可加
font-family: "Segoe UI Symbol", "Noto Sans CJK SC", sans-serif;到父容器
替代方案：CSS + border-radius 自绘圈号（适合动态数字）
当需要显示任意整数（比如 127）、或要求样式完全可控时，数值实体就不管用了。此时应放弃 Unicode，改用 CSS：
<span class="circled-number" style="--n:127"></span>
<style>
.circled-number {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
border-radius: 50%;
background: #007acc;
color: white;
font-size: 0.8em;
font-weight: bold;
}
.circled-number::before {
content: attr(style);
content: var(--n);
}
</style>
注意：这里用 content: var(--n) 是现代写法，IE 不支持；若需兼容 IE，得用 JS 注入文本或服务端渲染。
真正麻烦的是混合场景——比如富文本编辑器里用户粘贴了 ①，但后端又做了 HTML 转义，结果变成 ①。这种链路中的双重转义，比选哪个 Unicode 码位更常导致显示失败。
