13個(gè)常用CSS字體樣式屬性，你知道哪幾個(gè)呢？

本篇文章給大家?guī)砹艘恍ヽss字體樣式屬性，在設(shè)置字體樣式時(shí)常用的屬性，希望對大家有幫助。

1. CSS字體樣式屬性

1.1 font-size 字體大小

1. font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。

   font-size: 14px; // px 絕對像素單位font-size: 1em; // 相對父元素字體大小單位// 注：每個(gè)元素必須有字體大小，如果沒有申明，則直接使用父元素的字體大小//    如果沒有父元素（html）則使用基準(zhǔn)字號(hào)，基準(zhǔn)字號(hào)為瀏覽器里設(shè)置的字號(hào)

2. 現(xiàn)在網(wǎng)頁中普遍使用14px+
3. 盡量使用偶數(shù)的數(shù)字字號(hào)。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug。
4. 其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：

1.2 font-family字體樣式

1. font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅 黑，可以使用如下CSS樣式代碼：

    p{   	font-family:"微軟雅黑";  }  // 注: 可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體。

2. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。
3. 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。
4. 如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: “Times New Roman”;。
5. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。
6. 一般網(wǎng)頁中用的較多的字體為 arial，此字體是喬布斯研發(fā)的

1.3 CSS Unicode字體

1. 在 CSS 中設(shè)置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持 類似微軟雅黑的中文。

2. 方案一： 你可以使用英文來替代。 比如 font-family:“Microsoft Yahei”。

3. 方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。 font-family: “5FAE8F6F96C59ED1”，表示設(shè)置字體為“微軟雅黑”。

4. 可以通過escape() 來測試屬于什么字體。

   體名稱	英文名稱	Unicode 編碼
   宋體	SimSun	5B8B4F53
   新宋體	NSimSun	65B05B8B4F53
   黑體	SimHei	9ED14F53
   微軟雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
   楷體GB2312	KaiTiGB2312	69774F53_GB2312
   隸書	LiSu	96B64E66
   幼圓	YouYuan	5E7C5706
   華文細(xì)黑	STXihei	534E65877EC69ED1
   細(xì)明體	MingLiU	7EC6660E4F53

注:為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體

1.4 font-weight 字體粗細(xì)

1. 字體加粗除了用 b 和 strong 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。
2. 拓展： strong元素，默認(rèn)加粗。strong元素表示重要的不能忽略的內(nèi)容
   

   屬性	屬性值	作用
   font-weight:	normal（簡寫400）	不加粗
   	bold（簡寫700）	加粗
   	100~900（100的整倍數(shù)）	數(shù)值越大字體越粗

注：css 數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。 但是我們更喜歡用數(shù)字來表示。

1.5 font-style 字體風(fēng)格

1. 字體傾斜除了用 i 和 em 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。
2. 拓展： i元素表達(dá)的語言：這一塊文本為特殊的文本，實(shí)際使用的時(shí)候通常用它表示一個(gè)圖標(biāo)（icon）
   

   屬性	屬性值	作用
   font-style:	normal	默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式
   	italic	瀏覽器會(huì)顯示斜體的字體樣式
   	oblique	瀏覽器會(huì)顯示傾斜的字體樣式

注：平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式

1.6 font 文字屬性速寫 (重點(diǎn))

1. font屬性用于對字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：

   選擇器{ 	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字體類型，大小和類型不能省略

2. 使用font屬性時(shí)，必須按上面語法格式中的順序書寫，不能更換順序，各個(gè)屬性以空格隔開。
3. 注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

1.7 letter-spacing 字體間距

1. letter-spacing就是文字與文字間的間距，值可以負(fù)數(shù)，默認(rèn)值normal

   p{ 	letter-spacing : 2px;}

1.8 text-decoration 文本修飾：加線

1. line-through：穿過文字，表示中間加條線
2. overline：上面加條線（少用）
3. underline：下面加條線
4. none：表示沒有線，去掉線
5. 拓展： del、s元素默認(rèn)中間加線；del元素表示廢棄、錯(cuò)誤的內(nèi)容；s元素表示過期的內(nèi)容；a元素默認(rèn)下面加線，表示超鏈接

1.9 text-indent 首行文本縮進(jìn)

1. px：縮進(jìn)多少像素
2. em：縮進(jìn)幾個(gè)字體（中英文縮進(jìn)寬度值一樣）

2.0 line-height 文本行高/垂直居中

1. 每行文本的高度，該值越大，每行文本的值越大
2. 設(shè)置行高為容器高度，可以讓單行文本垂直居中，容器高度為如：height：50px
3. 行高可以設(shè)置為純數(shù)字，表示相對于當(dāng)前元素的字體大小。如取值1.5:行高為文字的1.5倍，這樣文字在放大的時(shí)候，行高也在變大，不會(huì)出現(xiàn)文字重疊現(xiàn)象

2.1 letter-spacing 文字間隙

1. em：每個(gè)文字間隔幾個(gè)字體寬度
2. px：每個(gè)文字間隔幾個(gè)像素

2.2 text-align 文字、行盒、行塊盒水平排列方式

1. left：靠左，默認(rèn)靠左排列
2. center：居中
3. right：靠右

2.3 網(wǎng)頁的最小和最大寬度

1. 設(shè)置在body元素的css里
2. min-width: 1000px 最小像素
3. max-width: 1500px 最大像素

（學(xué)習(xí)視頻分享：css視頻教程）