使用CSS text-emphasis对文字进行强调装饰

text-emphasis家族总共有4个CSS属性，分别是：

• text-emphasis
• text-emphasis-color
• text-emphasis-style
• text-emphasis-position

1. text-emphasis-color

text-emphasis-color属性没什么好说的，表示用来强调的字符的颜色，初始值就是当前文字的颜色。

2. text-emphasis-style

text-emphasis-style语法主要有下面3类：

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

其中：

text-emphasis-style:none是默认声明，表示没有任何强调装饰。

text-emphasis-style:<string>表示使用任意的单个字符作为强调装饰符。例如使用爱心字符：

宝贝，<span class="emphasis">爱你</span>，<span class="emphasis">比心</span>！
.emphasis {
    -webkit-text-emphasis-style: '❤';
    text-emphasis-style: '❤';
}

这里有几个细节和大家讲下：

1. 显示的强调装饰符的字号是主文字内容字号的一半，例如假设文字是16px大小，则上方的强调字符的大小则是8px。因此，如果文字字号不是很大的时候，尽量不要使用造型复杂，字符区域较小的字符，例如星号“*”，井号“#”等，因为在普通的显示设备中会缩成一团，用户完全看不出来是什么字符。

2. 如果行高不是很高，则强调装饰符会自动增加当前这一行所占据的高度。

3. 强调装饰符和正文之间的距离是无法通过设置行高等属性进行调节的，距离的大小主要由字体决定。

4. 如果指定的是多个字符，则只会使用第1个字符作为强调装饰符。例如：

   text-emphasis-style: 'CSS新世界';
   

   等同于：

   text-emphasis-style: 'C';
   

3. text-emphasis-position

text-emphasis-position属性用来指定强调装饰符的位置，默认位置是在正文的上方，我们可以指定强调装饰符在正文的下方，也可以指定垂直排版的时候强调装饰符是左侧还是右侧。

语法如下：

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

使用示意：

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

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

text-emphasis-position的初始值是over right。right定位出现在文字垂直排版的时候，例如设置writing-mode:vertical-rl，此时就可以看到强调装饰符在右侧了，效果如下图所示。

4. text-emphasis

text-emphasis是text-emphasis-color和text-emphasis-style这两个CSS属性的缩写，使用示意：

text-emphasis: circle deepskyblue;

就语法和语义而言，text-emphasis属性比较单纯，没有隐藏细节。

唯一值得一提的是text-emphasis是一个继承属性，也就是祖先元素设置了强调效果，子元素也会应用。这一点就和text-decoration属性完全不同，text-decoration属性是没有继承性的。

另外一点小区别是，text-emphasis属性会影响文字占据的高度，而text-decoration属性不会。