CSS text-emphasis 怎样给东亚文字添加着重标记

如果想在中文、日文或韩文中给关键词加上着重标记，CSS 的 text-emphasis 是更直接的做法。最小写法是把它设置在目标文本或其父级元素上，例如 text-emphasis: filled dot #d14;；它同时指定标记的填充方式、形状和颜色。这个属性会应用到文字字符上，但不会给空格和控制字符添加标记。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-emphasis

需要“每个东亚字符上方或旁边出现一个小标记”时，先用 text-emphasis 定义样式与颜色；只有需要改变标记位置时，再单独设置 text-emphasis-position。

先分清 text-emphasis 的职责

text-emphasis 是一个简写属性，组合了 text-emphasis-style 和 text-emphasis-color。前者决定是否显示、使用什么形状或字符，后者决定标记颜色。它与 text-decoration 的效果不同：着重标记是按字符附加的视觉提示，而且该属性会继承，子元素可以继续获得父级的标记规则。

因此，正文里需要强调一小段内容时，适合给包住这段文字的元素加类名，而不是把整个页面的所有文本都设为着重。这样既容易撤销，也不会让读者失去正常的文字层次。

用最小 CSS 添加着重标记

下面的示例只突出一句中文提示。filled 表示实心标记，dot 表示小圆点，最后的颜色值让符号使用深红色；HTML 负责承载文本，CSS 负责表达强调关系。

请先保存草稿，再关闭编辑页。

.notice {
  /* 实心小圆点会按字符附着在中文文本上。 */
  text-emphasis: filled dot #b42318;
  /* 让文字与标记之间保持可读的行高。 */
  line-height: 1.9;
}

如果省略形状，横排文字默认使用圆形标记；如果只写 text-emphasis: none，则明确关闭该元素的标记。这里的关键是属性写在真正包含目标文字的元素上，而不是写在无关的外层布局容器上。

选择符号、填充方式和颜色

常见形状包括 dot、circle、double-circle、triangle 和 sesame。filled 生成实心形状，open 生成空心形状；若没有写出二者，默认按实心处理。对于品牌排版或少量特殊提示，也可以使用一个单字符字符串，但不建议把多字符短语当作标记，因为浏览器可能截断或忽略它。

.chapter-title {
  /* 空心三角适合少量标题提示，避免正文密度过高。 */
  text-emphasis: open triangle #2563eb;
}

.annotation {
  /* 自定义标记尽量只使用一个字符。 */
  text-emphasis: "※" #7c3aed;
}

颜色默认使用当前文字颜色，也可以单独指定颜色。正文较长时，优先选择与正文有明确对比但不过分跳脱的颜色，并保留足够行高；着重标记的尺寸大约是字体尺寸的一半，行距不足时可能影响行盒高度。

用位置和继承控制段落

如果只修改符号或颜色，不会自动重置标记位置。需要调整位置时，单独设置 text-emphasis-position；横排与竖排文字的阅读方向不同，位置规则也应随排版方向选择。常见的中文横排场景可以从默认位置开始，只有实际版式需要时再调整。

.article-body {
  /* 父级规则可以让段落中的东亚字符共享同一套标记。 */
  text-emphasis: filled sesame #475569;
  /* 位置属性独立设置，不会被 text-emphasis 简写清除。 */
  text-emphasis-position: under right;
}

.article-body strong {
  /* 子元素默认继承父级着重标记，也可在例外处关闭。 */
  text-emphasis: none;
}

这段代码体现两个容易混淆的边界：着重样式会继承，所以父级设置可能影响后代；位置属性不会被 text-emphasis 重置，若正文在不同书写方向之间切换，需要把位置规则明确写出来。个别子元素不需要标记时，使用 none 比覆盖一套新符号更清楚。

什么时候适合采用，哪些边界要保留

着重标记适合短句、标题中的关键字、注释式提醒和需要保持原文字符顺序的东亚排版。它不适合替代颜色唯一的错误提示，也不适合给大段正文逐字添加符号，否则会增加视觉噪声。对需要无障碍阅读的内容，应让文字本身仍然完整表达信息，标记只承担辅助强调。

在项目采用上，可以先为一类短文本建立组件级类名，再逐步补充位置和颜色变量。即使目标环境不支持完整的着重样式，也要保留原始文本和正常行高，让读者仍能阅读内容；CSS 装饰不应成为信息的唯一载体。

一张表记住属性分工

回到标题的问题，最小答案就是给目标中文元素添加 text-emphasis: filled dot 颜色值。符号改用 circle、sesame 或单字符，位置另用 text-emphasis-position，而继承范围则通过元素层级和 none 控制。

相关问题

为什么空格上没有着重标记？

这是属性的应用边界：着重标记针对文字字符，不会给空格和控制字符附加符号。排查时先确认目标节点确实包含需要强调的文字。

可以用一整句话作为自定义标记吗？

不建议。自定义字符串应尽量保持一个字符，多字符字符串可能被用户代理截断或忽略；需要表达完整信息时仍应直接写在正文里。

为什么改了 text-emphasis 后位置没有变化？

text-emphasis 不会重置 text-emphasis-position。如果位置也要改变，请把位置属性单独写出来，并结合横排或竖排书写方向检查版式。