如何美化網頁文字(08)-[letter-spacing]字體間距的改變方式 @ 雲橙雨林

0000標題019

字體間距他是改變字與字的間距和詞與詞的間距的設定，主要是使用word-spacing & letter-spacing 兩個參數，橙覺得比較適合用於英文的方式，至於中文好就還好，有時還是會使用，橙主要是用於標題用，讓文字有點距離，讓使用者看起來有重點的感覺，不過，有時候，就用空白鍵就代替了，但是還是來寫一下使用方式吧！

先寫一段html 吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>
<body>
<h1>Letter-spacing & Word-spacing</h1>
<p id="line1">The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
<p id="line2">The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
<p id="line3"> The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
<p id="line4"> The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
</body>
</html>

先來看輸出吧！

2012-10-09_141035

再來就加入css 來看一下吧！

<style type="text/css">
#line1 {
    letter-spacing: 1em;
}
#line2 {
    letter-spacing: 0.1em;
}
#line3 {
    word-spacing: 1em;
}
#line4 {
    word-spacing: -1em;
}
</style>