精心點綴的文字:CSS Text Decoration
CSS Text Decoration
文字修飾線:text-decoration-line
text-decoration-line也就是 CSS3 之前的 text-decoration,屬性有如下的屬性值:
屬性值 | 效果 |
---|---|
none | 無效果 |
underline | 下劃線 |
overline | 上劃線 |
line-through | 刪除線 |
blink | 文字閃爍 |
spelling-error | 展示為瀏覽器拼寫錯誤的樣式 |
grammar-error | 展示為瀏覽器語法錯誤的樣式 |
特別提醒:
修飾線的粗細:text-decorate-width
該屬性主要針對的是 underline, overline, line-through 這三個修飾線樣式,設置這些修飾線的粗細,除了直接使用數值表達外,還可以設置為以下的屬性:
屬性值 | 效果 |
---|---|
auto | 由瀏覽器決定粗細 |
from-font | 如果首個可用字體中含有推薦粗細數值,將會使用,否則行為與?auto?一致 |
下劃修飾線的位置偏移:text-underline-offset
該屬性主要控制下劃修飾線基於其起始位置的偏移量。而下劃線效果的起始位置又由text-underline-position控制,那麽我們線簡單復習一下這個屬性。
text-underline-position
屬性值 | 效果 |
---|---|
auto |
|
| under |
|
| left |
|
| right |
|
auto將下劃線置於基線位置,而under則置於元素的文字內容之下,left 和 right 則用於豎排排版的文字模式中。
回到text-underline-offset中,下劃線的位置首先基於text-underline-position設定的初始位置,然後再加上text-underline-offset設定的數值,除了數值設定外,還支持以下的屬性值:
屬性值 | 效果 |
---|---|
auto | 由瀏覽器決定合適的偏移量 |
from-font | 如果首個可用字體中含有推薦的偏移數值,將會使用,否則行為與?auto?一致 |
修飾線效果的連續性
在對文字使用下劃線效果時,我們可能經常會發現,下劃線會劃過字符本身,導致閱讀體驗不佳,那麽text-decoration-skip的出現將會去解決這一類問題。正如屬性名的字面意思:該屬性用於設定修飾線的省略位置。
text-decorate-skip
該屬性用於控制修飾線效果在文本中的什麽位置要被跳過,它支持如下的屬性值:
屬性值 | 效果 |
---|---|
none | 什麽也不跳過 |
objects | 跳過擁有?display:inline-block效果的元素 |
spaces | 跳過所有空格 |
edges | 跳過元素邊界; |
舉個例子:<u>奇舞</u><u>周刊</u>,“奇舞” 和 “周刊” 由兩個元素進行呈現
那麽修飾線效果將在這兩個元素的邊界斷開,由於元素之間的緊密相連的,為了保證效果,瀏覽器會相應地縮短修飾線的長度保證斷開效果。 |
| box-decoration | 跳過盒子的外邊距,內邊距以及邊框區域 |
| leading-spaces | 跳過文字開頭的空格、分字符以及letter-spacing和word-spacing效果 |
| trailing-spaces | 和leading-spaces效果相同,只不過做用於文字結尾 |
text-decorate-skip-ink
那麽,對於中文漢字來說,原則上是沒有基線概念的,當中文與英文同時出現的時候,可能會受到英文字符基線的影響,修飾線效果仍然覆蓋掉中文字符,為了解決這個問題,標準中還制定了這個屬性很好地解決了此類問題。
該屬性只有兩個屬性值,一個是 auto 一個是 none。當使用 auto 時,修飾線效果必須跳過所有字形繪制的區域。
總結
精心點綴的文字:CSS Text Decoration