text-emphasis 是纯 CSS 属性，不能作为 HTML 属性使用；必须通过 style 或样式表设置，并需同时声明 -webkit-text-emphasis 和 text-emphasis 以兼容 Safari，中文使用时推荐 text-emphasis-position: under 并注意字体支持。
text-emphasis 在 HTML 中不是 HTML 属性，而是纯 CSS 属性，必须通过 style 或外部/内部样式表设置，直接写在 HTML 标签里（如 <p text-emphasis="dot red"></p>）完全无效。
为什么 text-emphasis 不能写在 HTML 标签里
它属于 CSS 规范定义的文本装饰类属性，和 color、font-size 一样，只接受 CSS 作用域内的声明。HTML 元素不识别 text-emphasis 这个 attribute，浏览器会忽略它，连报错都不会有。
- 错误写法：
<span text-emphasis="dot red">重点</span>→ 无任何效果 - 正确路径：必须走 CSS，且需同时处理 WebKit 兼容性前缀
- 注意：它不依赖 HTML 标签语义（比如不用非得套
<em></em>），任意块级或行内元素都可加
text-emphasis 必须配 -webkit-text-emphasis
虽然现代 Chrome/Firefox/Edge 已支持无前缀 text-emphasis，但 Safari（尤其 iOS）仍严格依赖 -webkit-text-emphasis。漏掉它，iOS 上大概率不显示着重号。
- 必须成对出现：
-webkit-text-emphasis: dot red;+text-emphasis: dot red; - 值顺序敏感：先写
-webkit-版本，再写标准版，避免被覆盖 - 不要只写
text-emphasis-style和text-emphasis-color分开声明——部分旧版 Safari 对拆分写法支持不稳定
中文着重号常见失效原因
给汉字加 text-emphasis 时，容易出现位置偏移、重叠、甚至完全不可见，核心是默认排版基线与中文字形不匹配。
- 默认
text-emphasis-position: over（上方），但汉字字身高、升部短，点常悬空过高；改用under更稳妥 - 若坚持用
over，需配合line-height调整（如设为1.2）并微调text-emphasis-position的计算基准 -
string类型强调符（如"·"）在中文字体下可能渲染模糊，优先用内置关键字dot/circle - 某些中文字体（如“微软雅黑”）对
text-emphasis渲染支持差，可 fallback 到伪元素方案
兼容性差时的降级方案：伪元素模拟
当目标环境明确包含老旧 Safari 或需要精确控制位置/大小时，用 ::before 或 ::after 是更可靠的选择。
- 示例：
.zh-em { position: relative; display: inline-block; } .zh-em::before { content: "·"; position: absolute; left: -0.1em; top: 0.25em; font-size: 0.9em; color: #e74c3c; } - 优势：完全可控定位、缩放、颜色，且不依赖浏览器对
text-emphasis的实现深度 - 代价：需手动加 class，无法像原生属性那样继承或批量应用；无障碍支持弱（屏幕阅读器通常忽略伪元素内容）
真正难的不是写对那两行 CSS，而是判断什么时候该信浏览器、什么时候该自己动手——尤其面对中文排版和 iOS Safari 时，text-emphasis 的「看起来能用」和「线上稳定可用」之间，往往就差一个真机测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
