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屬性不會。