Unicode星号（★☆）比font-icon更稳妥，因其为系统级字符，不依赖外部字体加载，弱网、低配设备或禁JS时仍稳定显示；但需声明UTF-8编码、处理Firefox基线偏移、补充ARIA语义。
直接用 ★ 和 ☆ 就能展示实心星与空心星，无需字体库或 JS，但必须注意字符编码、渲染一致性与语义缺失问题。
为什么用 Unicode 星号比 font-icon 更稳妥
Unicode 星号（★ 实心，☆ 空心）是系统级字符，不依赖外部字体加载，避免 Font Awesome 或自定义图标字体未就绪时的“方块乱码”；也不像 CSS 绘制五角星那样需大量 transform 和伪元素嵌套。在低配设备、弱网环境或禁用 JS 的场景下，它依然能稳定输出视觉结果。
但要注意：★ 和 ☆ 是较新的 Unicode 字符（U+2605 / U+2606），部分旧版 Android 系统或 IE11 可能渲染为方框或错位——若目标用户含大量旧设备，建议 fallback 到 ★ / ☆（U+2605 / U+2606 的兼容写法，更广泛支持）。
HTML 中正确插入字符实体的写法
错误写法：☆（不是标准 HTML 实体）、★ 未声明 UTF-8 编码、或直接粘贴 ★ 符号但文件保存为 ANSI 编码导致乱码。
正确做法：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- HTML 文件头部必须声明
<meta charset="UTF-8"> - 用十进制实体：
★（★）和☆（☆），兼容性优于十六进制 - 避免在 JS 字符串中拼接后 innerHTML 插入，易被转义；应直接写在 HTML 模板里，或用
document.createTextNode(String.fromCodePoint(0x2605)) - 若服务端模板（如 Jinja、EJS）渲染，确认其默认编码为 UTF-8，且未对特殊字符做双重 HTML encode
控制显示颗数与半星的纯 CSS 方案
纯字符实体本身不支持“半星”，但可通过 CSS 截断实现视觉近似效果：用两个重叠的 ★ 层，底层为黄色，上层为灰色，再用 overflow: hidden 配合宽度控制露出比例。
关键限制：
-
clip-path在 Safari 15.4 之前不支持inset()，慎用 - 用
width控制截断时，必须设父容器display: inline-block且子元素display: inline-block，否则 width 无效 - 响应式缩放推荐用
em或ch单位，例如font-size: 1.2em，避免固定像素导致移动端过小 - Firefox 存在基线偏移问题，可加
vertical-align: middle或line-height: 1对齐
无障碍与语义缺失必须补救
仅靠 ★☆ 字符对屏幕阅读器不可读——它们被当作普通文本朗读成“黑星”“白星”，而非“评分 4.2 星”。必须补充 ARIA 属性：
- 包裹容器加
role="img" aria-label="评分 4.2 星，满分 5 星" - 若动态更新，用
aria-live="polite"触发语音播报 - 避免用
title属性替代aria-label，前者仅鼠标悬停生效，对键盘/语音用户无效 - 不要给每个星号单独加
aria-hidden="true"后再塞一个隐藏文本——冗余且易不同步
最易忽略的是：当评分来自接口（如 data-rating="4.2"），aria-label 必须由 JS 注入，纯 CSS 无法把数字变量注入到属性值中——这点常被当成“纯静态组件”而漏掉。
