本篇文章帶給大家的內容是介紹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中文網其他相關文章!