正确显示摄氏度符号(℃)需用UTF-8编码配合Unicode字符(U+2103)、html实体(℃或℃)、css伪元素或svg内联绘制,确保跨浏览器兼容与字体无关性。

如果您需要在HTML页面中正确显示摄氏度符号(℃),需确保使用标准的Unicode字符或HTML实体,避免乱码或渲染异常。以下是实现该目标的多种方法:
一、使用Unicode字符直接输入
摄氏度符号在Unicode中为U+2103(℃),可直接在HTML文本中键入该字符,前提是编辑器和网页编码均支持UTF-8。
1、确保HTML文档声明为UTF-8编码,在
中包含。
2、在需要显示的位置直接键入℃,例如:<p>当前温度:25℃</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>。
3、保存文件时选择UTF-8无bom格式,防止浏览器解析错误。
二、使用HTML十进制实体
HTML支持通过十进制数值引用Unicode字符,摄氏度符号对应十进制数值8451,浏览器会将其渲染为标准℃符号。
1、在HTML内容中插入℃,例如:<p>当前温度:25℃</p>。
2、无需额外设置编码,兼容性良好,适用于老旧浏览器。
三、使用HTML十六进制实体
十六进制实体是另一种标准HTML字符引用方式,摄氏度符号的十六进制值为2103,需在前面添加x并用分号结尾。
1、在HTML中写入℃,例如:<p>当前温度:25℃</p>
。
2、该形式与十进制实体效果一致,但更贴近Unicode标准表示法。
四、使用CSS伪元素模拟(仅限视觉呈现)
当无法直接插入符号或需动态控制样式时,可通过CSS :after 伪元素附加℃字符,适用于标签化温度显示场景。
1、为需要添加符号的元素添加类名,例如:<span class="temp-value">25</span>。
2、在CSS中定义:.temp-value::after { content: "2103"; }。
3、确保CSS文件也以UTF-8编码保存,并且HTML中已声明。
五、使用SVG内联绘制℃符号(精确控制形状)
对于需要高保真度显示或响应式缩放的场景,可将摄氏度符号拆解为“°C”并用SVG精确排版,避免字体依赖问题。
1、插入内联SVG代码:<svg width="1em" height="1em" viewbox="0 0 16 16"><text x="0" y="13" font-size="14">°C</text></svg>。
2、将其中的°(U+00B0)与C组合,调整x/y坐标使二者紧密贴合,模拟标准℃字形。
3、该方法不依赖系统字体,符号始终按设定样式渲染。