我們常常會在網(wǎng)頁中對文本某一關(guān)鍵詞進行凸顯強調(diào)，加粗、高亮、下劃線等等一系列相對匹配的樣式去裝飾進而引起用戶注意，今天我們看看另一種實現(xiàn)方法text-emphasis。

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

現(xiàn)在我們可以了解一個新的文本強調(diào)裝飾屬性，即：text-emphasis。

看上去沒多大用途，實際項目中可能很少用到，但是，多一份關(guān)注，多一份選擇嘛，了解一下也無妨。

CSS Emphasis Marks

首先，我們了解下關(guān)于這個Emphasis標記的屬性。

字面上我們可以看出是強調(diào)的意思，其讀音 [?emf?s?s]。

text-emphasis是text-emphasis-style與text-emphasis-color的縮寫。還有一個屬性是text-emphasis-position，不在text-emphasis的縮寫范圍內(nèi)。即：

p{text-emphasis: '?'orange}

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

兩者渲染結(jié)果是一樣的。

其次，了解下具體屬性。

1、text-emphasis-style屬性 -?強調(diào)標記的樣式。

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

none 初始值，無標記。

[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] 關(guān)鍵字裝飾

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

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

2、text-emphasis-color屬性 - 強調(diào)標記顏色

text-emphasis-color: color;

若不設(shè)置此屬性值，則會根據(jù)其元素顏色而定。如：

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

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

3、text-emphasis-position屬性 -?強調(diào)標記的位置。

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

如，強調(diào)裝飾于文本下方，即：

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

CSS? Emphasis Marks 文本強調(diào)裝飾 示例圖

最后，兼容性。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。