CSS着重强调标记属性text-emphasis的用法详解

在CSS中text-emphasis是用于文本强调的属性，类似于我们在word、wps中的着重符号。text-emphasis其实是：text-emphasis-style和text-emphasis-color两个属性的缩写，前者用于控制着重符号的样式，后者用于设置着重符号的颜色。

与CSS中的Ruby属性一样，text-emphasis强调符的大小约为文字大小的一半，而且在当前行距不足以支撑标记时，行高可能会被影响到。

其次，text-emphasis属性是可以被继承的，即子元素会使用父级元素的着重标记。

一、text-emphasis-style属性：

text-emphasis-style用来设置着重符号的样式，默认为none，即如不设置，则不会显示着重标记。除了系统内置的一些样式如dot、circle、double-circle、triangle、sesame等之外，还可以使用字符串、Unicode字符的形式来定义着重标记符号。

代码示例（以下示例均使用同样的HTML）：

<p><a href="https://www.qietujiang.com/">切图匠</a>为甘肃九联网络科技有限公司旗下品牌，建立本站旨在为有网络技术需求的企业和团体提供专业的前后端技术支持及外包服务。</p>

示例一（text-emphasis: double-circle）：

p{
  font-size: 16px; text-emphasis: double-circle;
  a{ color: #ee5252; text-decoration: underline;}
}

效果如下：

可见，1、超链接A标签的着重标记继承了其父级元素P的着重标记，2、着重标记位于文字上方，3、当仅设置为：text-emphasis: red;时，是不会产生着重标记的，即默认值为none。

示例二（text-emphasis: circle）：

p{
  font-size: 16px; text-emphasis: circle;
  a{ color: #ee5252; text-decoration: underline;}
}

效果如下：

细心的朋友可能已经发现了，这里的circle显示的是一个大圆点，这是因为text-emphasis-style属性前可有一个默认填充属性，默认为filled实心，可选值为open，即空心。当设置为：text-emphasis: open circle;时，效果如下：

当设置为：text-emphasis: open double-circle;时，效果如下：

示例三（text-emphasis: dot）：

p{
  font-size: 16px; text-emphasis: dot;
  a{ color: #ee5252; text-decoration: underline;}
}

效果如下：

示例四，使用字符串（text-emphasis: 'T'）：

示例五，使用Unicode字符（text-emphasis: '\25B2'）：

除了使用字符串形式，text-emphasis-style还可接受Unicode字符参数，如下：

类似的，dot可以使用对应的Unicode字符：'\2022'来表示；circle可以使用对应的Unicode字符：'\25CF'来表示；double-circle可以使用对应的Unicode字符：'\25C9'来表示；sesame可以使用对应的Unicode字符：'\FE45'来表示等等。

二、text-emphasis-color属性：

顾名思义，text-emphasis-color用来设置着重标记的颜色，与color属性一致，可接受十六进制颜色码，如#FF9900，也可以接受英文字符如orange，还可接受rgb()及rgba()函数的颜色值。

三、text-emphasis属性：

前文我们有说过，text-emphasis其实是text-emphasis-style和text-emphasis-color两个属性的缩写形式，但是这里要讲的是，这两个属性的设置次序并无前后之分，如下两行代码的效果是一致的（可见后期出现的一些“更高级的”CSS属性，在使用上和旧的属性还有）。

text-emphasis: open circle red;
text-emphasis: red open circle;

四、text-emphasis-position属性

text-emphasis-position属性用于设置着重标记的位置（默认位于文字上方）；

p{
  font-size: 16px;
  text-emphasis: red open circle;
  -webkit-text-emphasis-position: under;
  text-emphasis-position: under;
  a{ color: #ee5252; text-decoration: underline;}
}

效果如下：

需注意的是，该属性目前浏览器支持度较低，截止目前仅webkit内核的浏览器支持；其次，该属性不是text-emphasis简写种的属性，再次，着重标记的位置目前只支持上和下。