CSS letter-spacing 文字水平間距設計

CSS letter-spacing 文字水平間距設計的功能,可以用來調整網頁文字水平方向彼此間的距離,可以加大距離,當然也可以縮小距離,只需要透過 CSS letter-spacing 的參數值來設定就可以了,使用方式非常簡單,也是網頁文字排板的好幫手,letter-spacing 算是相當基本的 CSS 設計技巧,幾乎所有的新版主流瀏覽器都支援 CSS letter-spacing 屬性的效果。

CSS letter-spacing 語法規則
letter-spacing: 屬性值;
CSS letter-spacing 的屬性值很特別,可以是正整數,也可以是負整數,正整數代表文字水平間的距離要加大,負整數代表文字水平間的距離要縮小,預設值是 normal,跟沒寫一樣,所以既然要用 letter-spacing 這個屬性,就挑個屬性值給它吧!

CSS letter-spacing 實際範例
<div style="letter-spacing:-1;">將 letter-spacing 設為 -1</div>
<div style="letter-spacing:0;">將 letter-spacing 設為 0</div>
<div style="letter-spacing:5;">將 letter-spacing 設為 5</div>
範例輸出效果
將 letter-spacing 設為 -1
將 letter-spacing 設為 0
將 letter-spacing 設為 5
從範例中的三個不同 letter-spacing 屬性值,可以看到當數字越小的時候,文字水平間的距離越靠近,屬性值為負的時候,文字幾乎黏在一起,甚至有可能會疊在一起,如果將 letter-spacing 的屬性值設為 0,效果其實就等於預設值的「letter-spacing:normal」。

更多網頁文字調整技巧
© Copyright webtech.tw Since 2010