CSS3 line-height, word-spacing, letter-spacing

簡介

要讓網頁的文章變得容易閱讀，除了使用不同字體，改變字型的大小之外，還可以調整「行高」（有時也稱「行距」），以及調整「字距」。在 CSS3 中用來設定行高的屬性是 line-height；word-spacing 及 letter-spacing 這兩個屬性是以英文的角度命名，從中文的角度而言，所調整間距的位置，則和屬性之英文名字的字義略有出入。現說明如下：

line-height: 這個屬性在英文和中文之間沒有歧義，代表的都是行高。單位可以是 px, pt, em, rem, % (百分比）或倍數，其中 em, 百分比及倍數是以目前的 font-size 值作為基準計算，rem 則以 <html> 中所設定的 font-size 為基準，若 <html> 中未設定該屬性值，則以流覽器預設的 16px 為基準。這個屬性的預設值是 normal，但實際上預設值在呈現行高時的表現一點都不正常，不論是在不同的流覽器中，或是在相同的流覽器中使用不同的字體，其結果可以說是千奇百怪，似乎毫無規則可尋；實在令人訝異。 line-height-abnormal 這篇英文文章裡有詳細的說明。另外有一點比較奇特的是，雖然預設值是 normal，但只要元件的先輩元件中，有設定 line-height 的值，不論是用絕對單位，或是相對單位，該元件會自行繼承其值，這和設定其值為 inherit 行為一樣。但在繼承時，是繼承計算後的結果，而不是設定。例如：父輩元件設定為 font-size:18px; line-height:1.5em;，此時，若其子輩元件不曾設定 line-height 值，不論該子輩元件的 font-size 設定為何，其繼承到的 line-height 值固定都為 18px，並非繼承到 1.5em，再去計算其行高的 px 值。所以網路上眾人的建議都是將值設定為倍數，不給單位，隨著目前的 font-size 計算得出行高。具國外研究報告指出，最佳的行高是 font-size 的 1.7 倍，我也不知是那篇報告，人家這麼說，我就這麼聽，自行設定後，看起來確實滿舒服的。1.5 倍也還可以，但看起來隱隱約約就顯得有點擠。
letter-spacing: 由字面上解釋，它是在設定英文字母間的間距，對英文而言，名符其實，它也確實在設定英文字母間的間距。但中文是沒有字母的，所以在中文的情況下，這個屬性被用來設定每個中文字之間的間距。預設值也是 normal，其實就是 0。在這個設定下，對中文而言，特別是黑體，字跟字之間看起來很擠，閱讀上稍為有點吃力。和 line-height 一樣，只要先輩元件中有設定 letter-spacing，子輩元件的行為就很像將 letter-spacing 設定為 inherit，會繼承先輩的設定；和 line-height 不同的是，letter-spacing 是繼承設定，在呈現時才計算，而非直接繼承先輩的計算值。根據國外那篇我不知道名字的報告說，最佳的英文字母間隔是 0.087em，試了一下好像真有這麼一回事，也就不去管報告的來源了。可惜對中文的字距來說，我覺得有點窄，我認為中文黑體字的字距以 0.25em 看起來最舒服，但對英文而言字母間的間距就有點過寬了。折衷的值是 0.125em，中、英文看起來都可以接受。但每個人的對讀起來舒服的觀點不一樣，就各人做做實驗，找出自己最滿意的設定值吧！
word-spacing: 這個是設定英文字與字之間的間距，因為英文字是以半形空白做為區分，wording-spacing 便以半形空白做為標的加間距，在原本半形空白的邊上再加上設設定值，全形空白則不受影響。預設值也是 normal，也就是 0px；可以賦予負值，縮小字和字之間的間距，也就是吃掉原本半形空白的字寬。在通篇是中文字的文章中，這個屬性不起作用，但若不小心在文章中打了一個半形空白，空白邊的寬度就會受到影響。

範例

範例中有三段文字，每段文字是一小段中文，加上其英文翻譯。用來顯示 line-height 及 letter-spacing 設定的作用。第二段的英文另設了一個 CSS 的類別，讓英文字母間的間距變小一點。這個作法在整段都是英文時，還可以湊和著用，如果是一段中文中夾雜著許多英文單字，這種解法就很累人了。

CSS

<style>
html {
 width:100%;
 font:normal normal normal 1em Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei';
    line-height:1.7;
    letter-spacing: 0.125em;
}
body {
    width:600px;
    margin: 0 auto;
    padding-top: 20px;
}
.en {
    letter-spacing:0.087em;
    
}
.newSize {
    font-size: 1.5rem;
}
.useRem {
    font-size: 1rem;
    
}
.useEm {
    font-size: 1em;
   /* word-spacing: -10px;*/
}
</style>

CSS 中只在 html{} 中設定了 line-height 及 letter-sapcing 屬性，讓子元件可以繼承。注意：line-height 的設定值為倍數，並沒有給單位值，可以試著給單位值，再重新下載網頁，看看有什麼變化。
.en{} 中重設了 letter-spacing 的值為 0.087em，這也是第二段的英文字母間距變窄的原因。

HTML

<body>

色即是空，空即是色，色不異空，空不異色，受想行識亦復如是。
form is emptiness and the very emptiness is form; emptiness does not differ from form, form does not differ from emptiness, whatever is emptiness, that is form, the same is true of feelings, perceptions, impulses, and consciousness.

色即是空，空即是色，色不異空，　空不異色，受想行識亦復如是。
form is emptiness and the very emptiness is form; emptiness does not differ from form, form does not differ from emptiness, whatever is emptiness, that is form, the same is true of feelings, perceptions, impulses, and consciousness.

</body>

HTML 中，第二段的英文段落以 <span> 標記包覆，同時給於 CSS 類別名稱為 "en"，以套用類別設定，改變字母間的間距。在 HTML5 中，還可以自訂標記，做起來更方便；但如果考慮到舊版的流覽器，這個作法是比較安全的。

熊伯的外接硬碟

2016年5月4日星期三