CSS text-transform 屬性

CSS text-transform 屬性的功能是用來控制文章中的英文字母大小寫,這是一種相當有趣的設計方式,例如一口氣把文章中的所有英文字母全部變成大寫或全部變成小寫,還可以把每個英文單字的開頭都變成大寫字母,而且不管原本文章中的英文字母用的是小寫還是大寫都可以透過 CSS text-transform 屬性重新修改唷!以下就是 text-transform 的基本語法以及範例參考。

CSS text-transform 屬性語法

text-transform: 大小寫設定值;
CSS 的 text-transform 屬性總共有三個常見的設定值,分別整理如下表:

CSS text-transform 設定值

參數樣式說明
uppercase所有英文字母都設定成大寫。
lowercase所有英文字母都設定成小寫。
capitalize所有英文單字的第一個字母都是大寫,其餘字母都是小寫。
CSS text-transform 屬性範例
功能: 在新視窗開啟程式碼文字檔
範例的實際視覺效果
Test text-transform text.
Test text-transform text.
Test text-transform text.
範例總共準備了三組不同的 text-transform 屬性設定方式,把三種不同的屬性值套入到句子中,由上而下可以看到所有英文字母變成大寫、所有英文字母變成小寫以及僅有開頭的英文單字是大寫,其餘小寫的效果,視覺感受各有不同。

有趣的是,我們可以注意到第三行的 Text-transform,只有 Text 有開頭大寫,而 transform 也是英文單字,卻沒有開頭大寫,這是為什麼呢?因為 CSS 的 text-transform 屬性判斷英文單字的方式並不是真的根據單字庫去判斷,而是根據空格,所以才會產生範例這樣的結果。

更多網頁文字設計技巧
分享於 2015-01-06 - 更新於 2017-07-31