CSS 文字裝飾

CSS 文字裝飾模組定義了與文字裝飾相關的特性，例如下劃線、文字陰影和著重號。文字裝飾特性可以為拼寫錯誤、語法問題和連結提供視覺提示。這些特性有助於提高文字的可用性、可訪問性、功能性和美觀性。

透過使用偽類和偽元素來改變文字裝飾的顏色、樣式和粗細，你可以用不單純依賴顏色的方式來強調文字。

有幾個特性可以幫助改善文字的可讀性

text-decoration-skip-ink 可以透過跳過下伸部分來提高易讀性。
text-underline-offset 允許你微調下劃線的位置，以更好地匹配字型指標或設計美學，這對於獨特的字型尤其有用。
text-shadow 的顏色與文字color形成對比時，當放置在對比度不足的背景上時，可以使文字在視覺上突出。

所有這些特性都有助於提高易讀性，從而提高可訪問性。減少視覺干擾和提高文字清晰度對於患有閱讀障礙或弱視的使用者尤其有幫助。

在某些語言的書寫系統中，上劃線和下劃線具有語義意義。CSS 允許你根據文化規範調整樣式。文字裝飾特性對於不使用拉丁字母指令碼，而是遵循不同下劃線位置（例如日語和韓語）的語言尤其有用。

文字裝飾特性還使你能夠遵循來自印刷媒體的編輯和本地化標準。例如，透過刪除線（line-through），你可以指示內容的狀態。用它來告知使用者內容已被刪除或價格已減半。此特性允許你同時呈現原始內容和更新後的內容。上劃線或雙下劃線通常用於學術和編輯註釋。

文字裝飾實戰

p {
  margin: 1em 0;
}
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
  text-underline-offset: -5px;
}
.shadow {
  text-shadow: red 4px 4px 0;
}
.emphasis {
  text-emphasis: triangle red;
}

<p class="under">A red underline</p>
<p class="over">A wavy lime overlines</p>
<p class="line">This has a line-through it</p>
<p class="underover">This has a dashed underline and overline</p>
<p class="thick">An offset solid purple underline</p>
<p class="shadow">This has a red shadow</p>
<p class="emphasis">Emphasized with red triangles</p>