HTML怎么设置text-emphasis_HTML 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 的「看起来能用」和「线上稳定可用」之间，往往就差一个真机测试。

今天关于《HTML怎么设置text-emphasis_HTML text-emphasis着重号标记【攻略】》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！