CSS letter-spacing 文字間的字距



CSS letter-spacing 屬性的功能可以用來設定文字水平方向間的空白區間,letter-spacing 的屬性值可以為正值或負值,當 letter-spacing 的參數值大於 0 時,文字水平間的距離會加大,當 letter-spacing 的參數值小於 0 時,文字水平間的距離會縮小,甚至有可能發生重疊的現象,至於什麼樣的值才會讓文字產生重疊,則要看使用的字型(font-family)以及文字大小(font-size)的搭配。

CSS letter-spacing 屬性基本語法
letter-spacing: 距離值;
CSS letter-spacing 屬性的距離值是可以使用常見的通用單位如 em、cm、px ... 等,且 letter-spacing 的效果可以套用到整個網頁或是其它網頁元素中,例如 DIV 區塊、span 區域、表單的 textarea 文字輸入欄位、HTML 表格欄位 ... 等,應用範圍相當廣泛。

CSS letter-spacing 的距離值有三種參數模式,分別為 normal、距離、inherit 這三種,說明如下。
  • letter-spacing:normal; //預設值,文字間距離為標準值
  • letter-spacing:長度; //自訂文字間距離
  • letter-spacing:inherit;//繼承自父層的 letter-spacing 屬性值
第三項 inherit 在部分的瀏覽器並不支援,建議不要使用。

CSS letter-spacing 範例
<div style="letter-spacing:-2px;">這是測試文字間距離的範例</div>
<div style="letter-spacing:0px;">這是測試文字間距離的範例</div>
<div style="letter-spacing:normal;">這是測試文字間距離的範例</div>
<div style="letter-spacing:10px;">這是測試文字間距離的範例</div>
呈現結果如
這是測試文字間距離的範例
這是測試文字間距離的範例
這是測試文字間距離的範例
這是測試文字間距離的範例
範例共提供了四種不同的 letter-spacing 效果,從第一個 DIV 區塊內將文字距離設為 -2,可以看到文字有黏在一起甚至是小部分重疊的效果,第二個 DIV 區塊與第三個 DIV 區塊都等於沒有特別效果,因為 letter-spacing 的預設效果就是 0px 或 normal,第四個 DIV 區塊就有很明顯的差異,文字間的距離為 10px,整行文字所占用的水平空間也同樣自動加大了,這就是 letter-spacing 屬性的功能。

Post a Comment

0 Comments