Css字體間距的設(shè)置方法

原圖樣式）

今天我們講一下幾個文本標(biāo)簽<code>text-indent</code>,<code>letter-spacing</code>和<code>line-height</code>,并附加講一下<code>first-line</code>和<code>first-letter</code>的使用方法。

先上源碼：

<!DOCTYPE html>

<html>

<head>

<title>css文本標(biāo)簽介紹</title>

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

}

</style>

</head>

<body>

今天我們來測試一下自己間距的設(shè)置方法，主要標(biāo)簽有<code>text-indent</code>、<code>letter-spacing</code>和<code>line-height</code>,附加講一下<code>first-line</code>和<code>first-letter</code>的樣式。

</div>

</body>

</html>

第一個標(biāo)簽：text-indent（設(shè)置抬頭距離css縮進(jìn)）

css樣式：

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

}

</style>

第二個標(biāo)簽：letter-spacing(設(shè)置字與字之間的間距)

css樣式：

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

}

</style>

第三個標(biāo)簽： line-height(設(shè)置行高，就是每一行的高度)

css樣式：

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

line-height: 30px;

}

</style>

第四個標(biāo)簽，其實(shí)叫做選擇器: ::first-line(設(shè)置第一行的樣式)

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

line-height: 30px;

}

.wenben::first-line{

color:blue;

font-weight: bold/*字體加粗*/;

}

</style>

第五個選擇器: ::first-letter(設(shè)置第一行的第一個字的樣式)

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

line-height: 30px;

}

.wenben::first-line{

color:blue;

font-weight: bold/*字體加粗*/;

}

.wenben::first-letter{

font-size: 24px;

color: white;

font-weight: normal;

border: 1px solid red/*設(shè)置文字邊框*/;

background-color:blue/*設(shè)置文字背景*/;

padding: 2px;

}

</style>

你學(xué)會了嗎？有問題可以私聊我哦！

前端工作中，設(shè)計代碼時，經(jīng)常會有人手動刪除行內(nèi)元素之間產(chǎn)生的額外空隙，并通過設(shè)置margin或padding來獲取想要間距嗎？如代碼：

<div class=“”><span class=“bgr”>去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span><span class="bgr">去掉了間距</span></div>

這看起來很不舒服，特別扔給給JS同事后，JS同事看完代碼后就會提出抱怨，代碼太亂，他們希望的代碼是如下：

那么有什么好的辦法解決的？答案也是有的。

1.行內(nèi)元素之間的“換行符”產(chǎn)生間距

展現(xiàn)效果如下：

2.行內(nèi)元素之間使用“tab(制表符)”產(chǎn)生間距

展現(xiàn)效果如下：

3.行內(nèi)元素之間使用“空格”產(chǎn)生間距

展現(xiàn)效果如下：

上以上3點(diǎn)可以看出，行內(nèi)元素之間產(chǎn)生的間距，是由于換行符、tab(制表符)、空格等字符引起，而字符的大小是定義字體大小來控制。

那么改變字體的大小可調(diào)整行內(nèi)元素的間距么?

上圖把字體從0px~18px~36px的調(diào)整，可見行內(nèi)元素之間的水平間距從無到有，并不斷變大，說明行內(nèi)元素之間產(chǎn)生間距是由換行符、tab(制表符)、空格等字符引起的，那么設(shè)置字體大小font-size:0可以是不是可以在所有瀏覽器中除去這些間距呢？

經(jīng)過測試后，可發(fā)現(xiàn)設(shè)置font-size:0并不能使得換行符、tab(制表符)、空格等在所有瀏覽器中產(chǎn)生的額外間距消失：

1.IE6、7瀏覽器始終存在的 1px 空隙

2.最新版本的Safari瀏覽器（5.1.7）不支持定義字體大小為 0 的瀏覽器

通過查找資料后，一種比較正常的解決方法如下：

1.針對IE6、7瀏覽器，使用word-spacing 修復(fù) IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔）

*word-spacing:-1px;

2.使用webkit的私有屬性，讓字體大小不受設(shè)備終端的調(diào)整，可定義字體大小小于12px

html{-webkit-text-size-adjust:none;}

問題解決了，代碼如下：

結(jié)構(gòu)：

樣式：

html{
-webkit-text-size-adjust:none;/* 使用webkit的私有屬性，讓字體大小不受設(shè)備終端的調(diào)整，可定義字體大小小于12px */
}

.span-wrap {
font-size:0;/* 所有瀏覽器 */
*word-spacing:-1px;/* 使用word-spacing 修復(fù) IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔） */
}

.span-wrap span{
font-size: 12px;
letter-spacing: normal;/* 設(shè)置字母、字間距為0 */
word-spacing: normal; /* 設(shè)置單詞、字段間距為0 */
}

干脆直接使用浮動，簡單，也不用寫多余的hack，多好。的確使用浮動技術(shù)是比較好的辦法，實(shí)際工作中我們使用浮動也是比較多，但是也并不是每處地方都要使用浮動，而且使用浮動后還需要清除浮動的操作。

文/丁向明

做一個有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833

http://dingxiangming.com

說完HTML語言CSS字體的縮進(jìn)text-indent,接下來我們講下字體的行間距屬性 line-height. 該屬性用來設(shè)置行間的距離，也就是我們經(jīng)常說的行高。可以控制文字行與行之間的距離。

來一起看下line-height的語法:

p {

line-height:20px;

}

怎么理解行間距呢？看下面這個圖就可以理解了

對于一行文字來說，文字上面和上一行文字的下面，文本高度，文字的下面和下一行文字的上面，三者加起來就是整個行間距。

來看下具體的效果:

可以看出，段落間的行間距是16px,如果是一行文字的話，可以看的更清楚

<!DOCTYPE html>

在線咨詢

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Css字體間距的設(shè)置方法

您的項(xiàng)目需求