text-emphasis必须用CSS缩写声明并加-webkit前缀,优先用under位置;sesame和字符串支持差,稳定方案推荐::before伪元素。

text-emphasis-style 不能直接写在 HTML 标签里,比如 <p text-emphasis-style="dot"> 完全无效 —— 浏览器会静默忽略它,不报错也不渲染。
必须用 CSS 声明,且要带 -webkit- 前缀
现代 Chrome/Firefox/Edge 支持无前缀的 text-emphasis,但 Safari(尤其是 iOS)至今只认 -webkit-text-emphasis。漏掉这个前缀,中文着重号大概率不显示。
- 写法必须成对:
-webkit-text-emphasis: dot red;+text-emphasis: dot red; - 顺序不能反:先写
-webkit-版本,再写标准版,否则可能被覆盖 - 别拆开写
text-emphasis-style和text-emphasis-color—— 部分旧 Safari 对这种写法支持不稳定 - 推荐用缩写形式,更可靠:
text-emphasis: dot #e74c3c;
中文加 dot 或 sesame 要调 text-emphasis-position
默认 text-emphasis-position: over(上方),但汉字字身偏高、基线位置与拉丁字母不同,dot 往往悬空太高,甚至被截断;sesame 在多数中文字体下也容易偏移或糊成一团。
- 首选
text-emphasis-position: under,位置更稳,视觉上也更贴近传统中文着重号习惯 - 如果非要用
over,得配合调整line-height(如设为1.2)并微调text-emphasis-position的垂直基准(但实际效果难控) -
sesame渲染依赖字体支持,“微软雅黑”“宋体”等常见中文字体基本不渲染sesame,显示为空白或方块 —— 别指望它跨字体稳定工作
string 类型(如 "·")在中文里慎用
写 text-emphasis: "·" red 看似直观,但问题不少:
立即学习“前端免费学习笔记(深入)”;
- 某些浏览器(特别是 Safari)对多字节 Unicode 字符支持弱,
"·"可能被降级为 ASCII 点.或直接不显示 - 字号缩放不一致:强调符不会随
font-size自动等比缩放,容易显得过大或过小 - 抗锯齿模糊:用字符串时,浏览器常以文本方式渲染,不如内置
dot关键字走 glyph path 清晰 - 若真要自定义形状,优先选 Unicode 单字符(如
\2022对应 •),避免用多字符字符串
真正稳定的中文着重号方案,往往不是靠 text-emphasis 单打独斗 —— 它的兼容性和排版控制力在中文字体下始终有限。需要精确对齐、颜色渐变或适配老旧 Safari 时,::before 伪元素仍是更可控的选择。



















