我們常常會在網頁中對文本某一關鍵詞進行凸顯強調，加粗、高亮、下劃線等等一系列相對匹配的樣式去裝飾進而引起用戶注意，今天我們看看另一種實現方法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;}

兩者渲染結果是一樣的。

其次，了解下具體屬性。

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

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

none 初始值，無標記。

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

dot ? | circle ● | double-circle ? | triangle ▲ | sesame ?

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

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

text-emphasis-color: color;

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

p{text-emphasis-style: '?'; text-emphasis-position: under right;color:blue;}

// 這里我們移除 text-emphasis-color: orange;屬性，則會與文本顏色一致。

3、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查看兼容情況。

測試后，總體來說暫時使用場景或兼容還是有一定局限性，具體根據實際場景而定吧，就當多了個選擇，將其儲備起來。

總結

以上是生活随笔為你收集整理的html 文本强调,CSS Emphasis Marks 文本强调标记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。