css如何設定字母間距？字母間距的設定方法

本篇文章帶給大家的內容是介紹css如何設定字母間距？字母間距的設定方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

其實在css中設定字母間距的方法很簡單，只需要使用一個屬性就行，這就是 letter-spacing 屬性。

下面我們來了解 letter-spacing 屬性，看看它是如何設定字母間距的。

letter-spacing屬性可以控制給定元素或文字區塊中每個字母（單一字元）之間的空間量。支援letter-spacing的值包括字體相對長度值（em，rem），父相對值（百分比），絕對值（px，像素）和normal屬性，這些屬性將重設字體的預設值。

建議使用字體相對值，以便當字體大小改變時，透過設計或使用者行為，適當地增加或減少字母間距。

我們來看看letter-spacing屬性的使用：

p {
  /* 16 * 0.0625 = 1px */
  letter-spacing: 0.0625em;
}

在使用 letter-spacing 屬性時要注意的最重要的一點是，指定的值不會改變瀏覽器的預設值，而是新增瀏覽器應用程式的預設間距（基於字體度量）。 letter-spacing 屬性也支援負值，這會縮小文字的外觀，而不是鬆動文字。

我們來看看設定letter-spacing 屬性後的效果：

#說明：

1、子像素值：在大多數瀏覽器中，指定小於1px的值將導致letter-spacing屬性不被套用。目前Firefox 14 和IE 10都支援亞像素佈局；Opera和WebKit 沒有。

2、letter-spacing屬性可透過設定CSS Transitions來進行動畫處理。

3、消除內聯塊元素之間空白的一種方法是：在內聯塊元素的父容器上設定letter-spacing: -4px;。然後，在子元素上重新設定letter-spacing: normal;就可以了。

我們來看看letter-spacing屬性的相容性

#關於行動瀏覽器支援度的說明：某些版本的Opera Mobile，非標準的WebKit核心和NetFront瀏覽器都不支援letter-spacing屬性。具體內容請訪問QuirksMode鏈接，上面有詳細說明。

QuirksMode連結位址：http://www.quirksmode.org/m/table.html#t25

總結：以上就是這篇文章所介紹的css設定字母間距的方法，希望能對大家的學習有所幫助。

以上是css如何設定字母間距？字母間距的設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！