如何調整單詞中字母間的間距？- CSS排版技巧

一、字母間距基礎知識

字母間距，也稱作字母間隔或字元間距，就是指單詞中每個字母之間的間距。在CSS中，可以通過letter-spacing屬性來設置字母間距。letter-spacing屬性的默認值是normal，即瀏覽器會根據不同字體的特性自行調整字母間距。

一般來說，中文字元之間不需要添加字母間距，英文字元之間可以適當加入一些字母間距來增加可讀性和美感。但是，如果字母間距設置得過大或過小，會影響文字排版效果，所以需要根據實際情況進行調整。

二、通過letter-spacing調整字母間距

在CSS中，可以通過letter-spacing屬性來調整字母間距。letter-spacing屬性的取值可以是一個長度值，也可以是normal或inherit。

/* 設置字母間距為2px */
span {
  letter-spacing: 2px;
}

在上面的代碼中，使用letter-spacing: 2px;來設置字母間距為2px。需要注意的是，字母間距的取值不應該過大或過小，一般維持在1px-3px之間比較合適。

三、通過text-rendering調整字體渲染

除了通過letter-spacing屬性來調整字母間距，還可以通過text-rendering屬性來調整字體的渲染方式。text-rendering屬性可以設置為optimizeLegibility、optimizeSpeed或auto。

/* 設置字體渲染方式為optimizeLegibility */
span {
  text-rendering: optimizeLegibility;
}

optimizeLegibility會儘可能地優化文本呈現，包括調整字間距、自動斷字、調整字體寬度等。如果你不想手動設置字母間距，可以嘗試使用text-rendering來進行優化。

四、通過font-kerning調整字距

在CSS3中，新增加了一個font-kerning屬性，它用來控制字體的字距。font-kerning屬性可以設置為auto、normal或none。

/* 設置字距為最優 */
span {
  font-kerning: auto;
}

在上面的代碼中，設置字距為auto，表示使用字體默認的字距。如果需要調整字距，可以設置為normal或none，不同字體對應的字距也不同。

五、通過text-align控制單行文字居中

有時候，我們需要將單行文字居中顯示，可以通過text-align屬性來實現。text-align屬性可以設置為left、right、center、justify、inherit。

/* 將單行文字居中顯示 */
div {
  text-align: center;
}

在上面的代碼中，將text-align屬性設置為center，即可將單行文字居中顯示。

六、通過text-indent調整首行縮進

在文本排版中，有時候需要對第一行進行縮進，可以通過text-indent屬性來實現。text-indent屬性可以設置為px、em、%等單位。

/* 對第一行進行2em的縮進 */
p {
  text-indent: 2em;
}

在上面的代碼中，將text-indent屬性設置為2em，即可對第一行進行2em的縮進。