HTML：带圆圈的数字①②③

2023-05-19 13:07| 来源: 网络整理| 查看: 265

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

方式一：图片/svg

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

方式二：unicode字符集 ① {{bb}} bb: '\u2460' text .text:before { content: '\2460'; }

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

显示效果十六进制十进制字符编码①24609312① ②24619313② ③24629314③

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

使用注意点：

有浏览器兼容问题，大部分字符能正常显示。Android/iOS等智能终端的识别度比较差。方式三：图标字体。自定义图标，可用iconfont 方式四：特殊字体，“Wingdings”、“Webdings”等--可忽略 webdings：0123456789 Wingdings：0123456789

效果图：

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

The end.

【本文地址】

今日新闻