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

這篇文章主要介紹了如何使用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: [ 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: '?';
}

效果如下圖所示，可以看到對應的文字上面出現了愛心字符（因為應用了Emoji字體，所以呈現的是Emoji字符）。

這里有幾個細節(jié)和大家講下：

顯示的強調裝飾符的字號是主文字內容字號的一半，例如假設文字是 16px 大小，則上方的強調字符的大小則是 8px 。因此，如果文字字號不是很大的時候，盡量不要使用造型復雜，字符區(qū)域較小的字符，例如星號“*”，井號“#”等，因為在普通的顯示設備中會縮成一團，用戶完全看不出來是什么字符。 如果行高不是很高，則強調裝飾符會自動增加當前這一行所占據的高度。 強調裝飾符和正文之間的距離是無法通過設置行高等屬性進行調節(jié)的，距離的大小主要由字體決定。

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

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

等同于：

text-emphasis-style: 'C';

最后看下 text-emphasis-style 內置的幾個裝飾符效果，他們是 dot （點）、 circle （圓）、 double-circle （雙層圓）、 triangle （三角）、 sesame （芝麻點）。

每一種裝飾符都有實心和空心兩種字符，是通過 filled 和 open 這兩個關鍵字決定的。

例如：

/* 實心的圓點 */
text-emphasis: filled dot;
/* 空心的圓點 */
text-emphasis: open dot;

由于內置字符默認都是使用實心的，因此， text-emphasis:filled dot 的效果等同于 text-emphasis:dot 。

如果 text-emphasis-style 的屬性值只有 filled 或 open ，則會采用 dot （點）作為強調裝飾符。例如：

/* 等同于text-emphasis: filled dot */
text-emphasis: filled;
/* 等同于text-emphasis: open dot */
text-emphasis: open;

至于各個裝飾符具體的效果，我 （張鑫旭） 特意制作了一個表方便大家?？?，詳見下表。

各個強調裝飾符的字形大小受字體影響較大，大家根據實際場景選擇使用合適的強調裝飾符。

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 ，此時就可以看到強調裝飾符在右側了，效果如下圖所示。

text-emphasis-position 屬性在中文場景下還是很常用的，因為，中文習慣在底部設置表示強調的字符，有別于日文、韓文等東亞語言。

因此，中文內容的強調，除了設置強調裝飾符以外，還要設置強調裝飾符的位置為底部，例如：

.chinese-emphasis {
    -webkit-text-emphasis: dot;
    text-emphasis: dot;
    -webkit-text-emphasis-position: under right;
    text-emphasis-position: under right;
}

這里有個小細節(jié)，在Chrome瀏覽器下， text-emphasis-position 屬性可以只設置垂直方向的方位值，無需設置水平方向的方位值，例如下面的語法在Chrome瀏覽器下也是可以識別的：

-webkit-text-emphasis-position: under;

但是，請注意，Chrome瀏覽器的這個做法其實是不對的，是個規(guī)范的描述不相符合的，規(guī)范中要求 text-emphasis-position 屬性值需要同時包含水平方位和垂直方位，因此，建議大家還是2個值同時設置。

-webkit-text-emphasis-position: under right;

4. text-emphasis

text-emphasis 是 text-emphasis-color 和 text-emphasis-style 這兩個CSS屬性的縮寫，使用示意：

text-emphasis: circle deepskyblue;

就語法和語義而言， text-emphasis 屬性比較單純，沒有隱藏細節(jié)。

唯一值得一提的是 text-emphasis 是一個繼承屬性，也就是祖先元素設置了強調效果，子元素也會應用。這一點就和 text-decoration 屬性完全不同， text-decoration 屬性 是沒有繼承性的。

另外一點小區(qū)別是， text-emphasis 屬性會影響文字占據的高度，而 text-decoration 屬性不會。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用CSS text-emphasis對文字進行強調裝飾”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!