CSS Emphasis Marks 文本強調標記

咱們經常會在網頁中對文本某一關鍵詞進行凸顯強調，加粗、高亮、下劃線等等一系列相對匹配的樣式去裝飾進而引發用戶注意，今天咱們看看另外一種實現方法text-emphasis。

頁面文本段落中，有時咱們會根據上下文語境對某一關鍵詞進行凸顯（如，加粗、高亮、斜體、文本漸變、下劃線等等）標記對文本中某一關鍵詞進行裝飾，以便引發用戶的關注，進而讓用戶理解段落文本中心意思。

如今咱們能夠了解一個新的文本強調裝飾屬性，即：text-emphasis。

看上去沒多大用途，實際項目中可能不多用到，可是，多一份關注，多一份選擇嘛，瞭解一下也無妨。

CSS Emphasis Marks

首先，咱們瞭解下關於這個Emphasis標記的屬性。

字面上咱們能夠看出是強調的意思，其讀音 [ˈemfəsɪs]。

text-emphasis是text-emphasis-style與text-emphasis-color的縮寫。還有一個屬性是text-emphasis-position，不在text-emphasis的縮寫範圍內。即：

p{text-emphasis: '•'orange}
p{text-emphasis-style: '•'; text-emphasis-color: orange;}

二者渲染結果是同樣的。

其次，瞭解下具體屬性。

一、text-emphasis-style屬性 - 強調標記的樣式。

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

none 初始值，無標記。

[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] 關鍵字裝飾

dot • | circle ● | double-circle ◉ | triangle ▲ | sesame ﹅

string 自定義字符裝飾。 如一些特殊字符或文本等等。

二、text-emphasis-color屬性 - 強調標記顏色

text-emphasis-color: color;

若不設置此屬性值，則會根據其元素顏色而定。如：

p{text-emphasis-style: '•'; text-emphasis-position: under right;color:blue;}
// 這裏咱們移除 text-emphasis-color: orange;屬性，則會與文本顏色一致。

三、text-emphasis-position屬性 - 強調標記的位置。

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

如，強調裝飾於文本下方，即：

p{text-emphasis-style: '•'; text-emphasis-color: orange; text-emphasis-position: under right;}

CSS  Emphasis Marks 文本強調裝飾 示例圖

最後，兼容性。

本問示例運行於Firefox瀏覽器，若chrome須要加-webkit-前綴暫時，更多參考CANIUSE查看兼容狀況。

測試後，整體來講暫時使用場景或兼容仍是有必定侷限性，具體根據實際場景而定吧，就當多了個選擇，將其儲備起來。