text-emphasis

CSS 中的 text-emphasis 属性顾名思义用于在 CSS 中强调文本。它通过在元素的文本中应用特殊标记来实现。

.element {
  text-emphasis: circle red;
}

您可能会将文本强调视为斜体或粗体，但这不是！通过 text-emphasis 的特殊标记，您可以将注意力吸引到文本元素，例如字母和数字（但不包括空格或控制字符）。这在东亚语言中很常见。

语法

text-emphasis 属性是用于在一个声明中设置 text-emphasis-style 和 text-emphasis-color 的简写形式。

text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>

因此，语法类似于许多其他简写属性，其中它包含多个值。

h2 {
  -webkit-text-emphasis: circle red;
  text-emphasis: circle red;
}

构成属性

让我们具体看一下 text-emphasis-style 和 text-emphasis-color，这两个属性构成了 text-emphasis 简写形式。

text-emphasis-style

text-emphasis-style CSS 属性用于设置强调标记的外观。CSS 文本强调样式可以定义为关键字值或字符串值。

• 关键字值:
  • filled: 强调标记为实心。
  • open: 强调标记为轮廓，但未填充实心颜色。
  • dot: 强调标记为简单的点或斑点。
  • circle: 强调标记为更大的实心圆圈。
  • double-circle: 强调标记为更大的实心圆圈，每个圆圈周围都有一个额外的轮廓。
  • triangle: 强调标记显示为三角形点，就像指向上面的箭头。
  • sesame: 强调标记显示为倾斜线，就像反斜杠 (\)。
  • none: 强调标记不显示。
• 字符串值：我们可以提供我们自己的字符串作为强调标记。它可以包含一个用作 CSS 强调符号的字符，例如 'x'、'点'、'*' 等。

text-emphasis-color

CSS text-emphasis-color 属性用于为强调标记着色。它在可以使用什么颜色方面非常灵活，因此我们可以使用命名颜色、RGB、RGBA、HEX、HSL 和 HSLA 作为值。

注意：如果您没有指定颜色，CSS 文本强调将使用文本的颜色。

text-emphasis-position

这实际上不是简写的一部分，但值得一提，因为您会经常发现自己在定义强调标记时调整其位置。

text-emphasis CSS 属性默认将此强调标记放置在文本的顶部。text-emphasis-position CSS 属性可用于调整该位置。

同样，这在东亚语言中很常见。强调标记的首选位置取决于语言。例如，在日语中，首选位置是在右边上方。另一方面，在中文中，首选位置是在右边下方。

注意：text-emphasis-position 不能使用 text-emphasis 简写属性设置，也不能重置。

text-emphasis-position CSS 属性使用关键字值，例如

• over: 用于在水平书写模式下在文本上方绘制标记。
• under: 用于在水平书写模式下在文本下方绘制标记。
• right: 用于在垂直书写模式下在文本右侧绘制标记。
• left: 用于在垂直书写模式下在文本左侧绘制标记。

但请注意，该属性需要两个值才能正常工作。例如

text-emphasis-position: over right;
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left

MDN 有一个信息表，总结了中文、蒙古语和日语的首选强调标记位置。为了方便起见，我们将在此处重新打印它。

语言	首选水平	首选垂直
日语	over	right
韩语	over	right
蒙古语	under	right
中文	under	right

更多信息

• CSS 文本装饰模块级别 3 规范
• MDN 文档
• 可汗学院演示

浏览器支持

相关