1. 程式人生 > >精心點綴的文字:CSS Text Decoration

精心點綴的文字:CSS Text Decoration

under evel images pla rom 之間 table ora css

大家很熟悉的 CSS2 用法 text-decoration ,到了 CSS3 就擁有很多新的特性。本文將介紹 Level 4 中最新添加的特性。

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