CSS中的text-emphasis属性详解

描述
text-emphasis是CSS中用于向文本添加强调标记的属性，类似于东亚文字中的着重号（如日语的圏点或中文的着重号）。它可以在文本上方或下方添加特定的符号或形状，起到强调内容的作用。该属性是text-emphasis-style和text-emphasis-color的简写形式。

核心概念解析

1. 强调标记位置：默认在水平书写模式下位于文本上方，垂直书写模式下位于文本右侧。
2. 适用元素：仅对文本内容生效（空格和控制字符不受影响）。
3. 继承性：具有继承性，子元素会继承父元素的强调样式。

属性构成详解

1. text-emphasis-style：定义强调标记的形状

   • 关键字值：
     • filled：实心形状（默认）
     • open：空心形状
     • dot：圆点（•）
     • circle：圆圈（○）
     • double-circle：双圆圈（◉）
     • triangle：三角形（▲）
     • sesame：芝麻点（﹅）
   • 字符串值：直接使用任意单个字符作为标记（如"❤"、"!"）

2. text-emphasis-color：定义强调标记的颜色

   • 默认使用文本的color值
   • 可接受所有颜色值（十六进制、RGB、HSL等）

实际应用步骤

1. 基础用法：为段落文本添加实心圆点强调

   p {
     text-emphasis: filled circle;
     /* 等价于：
        text-emphasis-style: filled circle;
        text-emphasis-color: currentColor; */
   }
   

2. 自定义标记：使用心形符号作为强调标记

   .special {
     text-emphasis: "❤";
     /* 注意：字符串值需用引号包裹 */
   }
   

3. 调整标记颜色：创建红色三角形强调标记

   .warning {
     text-emphasis: filled triangle #ff0000;
   }
   

4. 控制标记位置：将标记置于文本下方

   .below {
     text-emphasis: sesame;
     text-emphasis-position: under; /* 需单独设置位置 */
   }
   

高级技巧与注意事项

1. 位置精确控制：

   • text-emphasis-position属性接受两个参数：
     • 第一个值：水平书写模式下的垂直位置（over|under）
     • 第二个值：垂直书写模式下的水平位置（right|left）
   • 示例：text-emphasis-position: under left;

2. 字体匹配规则：

   • 符号标记会尝试匹配当前字体的字符
   • 若字体不支持指定符号，会fallback到系统字体

3. 与ruby注解的配合：

   /* 同时使用强调标记和拼音注解 */
   ruby {
     text-emphasis: sesame;
     ruby-position: over;
   }
   

浏览器兼容性提示

• 现代浏览器基本支持（需注意Safari的早期版本需要-webkit-前缀）
• 字符串值在某些旧版本中支持度较低，建议同时提供关键字值作为回退方案

实际应用场景

1. 教科书的重点内容标注
2. 法律条文的关键词强调
3. 界面中的必填项提示
4. 外语学习材料的发音标注

通过text-emphasis属性，可以以标准化的方式实现文字强调效果，比手动添加符号更加语义化和易于维护。