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 屬性的功能。

更多網頁文字設計技巧