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 ] ] |

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查看兼容情况。