使用CSS text-emphasis對文字進行強調裝飾

一、引言

在過去，想要對某部分文字進行強調，通常的做法是加粗，或者使用一個高亮的顔色，現在有了新的選擇，就是使用text-emphasis屬性進行強調裝飾。

text-emphasis家族總共有4個CSS屬性，分别是：

text-emphasis

text-emphasis-color

text-emphasis-style

text-emphasis-position

其中，text-emphasis是text-emphasis-color和text-emphasis-style這兩個CSS屬性的縮寫，注意，并不包含text-emphasis-position屬性，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:<string>表示使用任意的單個字元作為強調裝飾符。例如使用愛心字元：

這裡有幾個細節和大家講下：

顯示的強調裝飾符的字号是主文字内容字号的一半，例如假設文字是16px大小，則上方的強調字元的大小則是8px。是以，如果文字字号不是很大的時候，盡量不要使用造型複雜，字元區域較小的字元，例如星号“*”，井号“#”等，因為在普通的顯示裝置中會縮成一團，使用者完全看不出來是什麼字元。

如果行高不是很高，則強調裝飾符會自動增加目前這一行所占據的高度。

強調裝飾符和正文之間的距離是無法通過設定行高等屬性進行調節的，距離的大小主要由字型決定。

如果指定的是多個字元，則隻會使用第1個字元作為強調裝飾符。例如：

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

等同于：

text-emphasis-style: 'C';