°字符存在字体渲染不一致、语义缺失、缩放糊边等问题；推荐用°配合css控制样式，或结合与aria-label实现语义化。
直接用 ° 实体就能显示 °，但多数情况下它不是最佳选择——字体渲染不一致、语义缺失、缩放时可能糊边。
为什么 ° 有时看起来奇怪
浏览器把 ° 当作普通字符处理，依赖当前字体是否包含该 glyph。有些系统字体（比如某些中文字体）把 ° 渲染得偏大、偏高，或跟数字间距不协调；在高 DPI 屏幕或缩放 125% 时尤其明显。
常见现象：25°C 显示为 “25°C”，但 ° 比 C 还高半截，或者跟前面数字粘连。
- 不是所有字体都对
°做了等宽/基线对齐优化 - 无法通过 CSS 单独控制 ° 的大小、垂直位置或颜色
- 屏幕阅读器读作 “degree”，而非 “degrees Celsius” 的完整语义
更稳妥的替代方案：CSS + Unicode 字符
用 Unicode 字符 \u00B0（即 °）配合 sup 或自定义 font-size/vertical-align，能精确控制外观和语义。
推荐写法：
<span class="temp">25<span class="deg">°</span>C</span>
CSS：
.temp { font-family: system-ui, -apple-system, sans-serif; }
.deg { font-size: 0.7em; vertical-align: super; line-height: 0; }
-
vertical-align: super比sup标签更可控，避免 HTML 语义污染 -
line-height: 0防止上标影响行高 - 显式设置
font-family可规避中文字体强行替换 ° 的问题
需要语义化时，优先用 <sup></sup> + ARIA
如果温度数据要被爬虫、无障碍工具或结构化数据消费（比如 Schema.org 的 temperature），纯字符或 CSS 上标都不够。
推荐组合：
<span aria-label="25 degrees Celsius">25<sup>°</sup>C</span>
-
<sup></sup>提供基础语义（上标），aria-label补全可访问语义 - 避免用
°+<span></span>套嵌，因为°本身无语义，屏幕阅读器可能跳过或误读 - 不要依赖
title属性——它只在悬停时触发，对键盘/语音用户无效
真正麻烦的不是怎么打出 °，而是它在不同上下文里该承担什么角色：是排版装饰？单位符号？还是结构化数据的一部分。选错方式，后期改起来比加个 class 还费劲。
