CSS-Emphasis-Marks-文本强调标记

我们常常会在网页中对文本某一关键词进行凸显强调，加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意，今天我们看看另一种实现方法 text-emphasis。

页面文本段落中，有时我们会根据上下文语境对某一关键词进行凸显（如，加粗、高亮、斜体、文本渐变、下划线等等）标记对文本中某一关键词进行装饰，以便引起用户的关注，进而让用户理解段落文本中心意思。

现在我们可以了解一个新的文本强调装饰属性，即：text-emphasis。

看上去没多大用途，实际项目中可能很少用到，但是，多一份关注，多一份选择嘛，了解一下也无妨。

CSS Emphasis Marks

首先，我们了解下关于这个 Emphasis 标记的属性。

字面上我们可以看出是强调的意思，其读音 [ˈemfəsɪs]。

text-emphasis是 text-emphasis-style 与text-emphasis-color的缩写。还有一个属性是 text-emphasis-position，不在text-emphasis 的缩写范围内。即：

p{text-emphasis: '•'orange}
p{text-emphasis-style: '•'; text-emphasis-color: orange;}

两者渲染结果是一样的。

其次，了解下具体属性。

1、text-emphasis-style 属性 – 强调标记的样式。

text-emphasis-style: none | [[ filled | open] || [dot | circle | double-circle | triangle | sesame] ] | <string>

none 初始值，无标记。

[[ filled | open] || [dot | circle | double-circle | triangle | sesame] ] 关键字装饰

dot • | circle ● | double-circle ◉ | triangle ▲ | sesame ﹅

string 自定义字符装饰。如一些特殊字符或文本等等。

2、text-emphasis-color 属性 – 强调标记颜色

text-emphasis-color: color;

若不设置此属性值，则会根据其元素颜色而定。如：

p{text-emphasis-style: '•'; text-emphasis-position: under right;color:blue;}
// 这里我们移除 text-emphasis-color: orange; 属性，则会与文本颜色一致。

3、text-emphasis-position 属性 – 强调标记的位置。

text-emphasis-position: [over | under] && [right | left]

如，强调装饰于文本下方，即：

p{text-emphasis-style: '•'; text-emphasis-color: orange; text-emphasis-position: under right;}

CSS Emphasis Marks 文本强调装饰示例图

最后，兼容性。

本问示例运行于 Firefox 浏览器，若 chrome 需要加 -webkit- 前缀暂时，更多参考 CANIUSE 查看兼容情况。