13個常用CSS字型樣式屬性，你知道哪幾個呢？

1. CSS字型樣式屬性

1.1 font-size 字型大小

1. font-size屬性用於設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。

   font-size: 14px; // px 絕對畫素單位font-size: 1em; // 相對父元素字型大小單位// 注：每個元素必須有字型大小，如果沒有申明，則直接使用父元素的字型大小//    如果沒有父元素（html）則使用基準字號，基準字號為瀏覽器裡設定的字號

2. 現在網頁中普遍使用14px+
3. 儘量使用偶數的數位字號。ie6等老式瀏覽器支援奇數會有bug。
4. 其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。具體如下：

1.2 font-family字型樣式

1. font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文字的字型設定為微軟雅 黑，可以使用如下CSS樣式程式碼：

    p{ 
    	font-family:"微軟雅黑";
    }
    // 注: 可以同時指定多個字型，中間以逗號隔開，表示如果瀏覽器不支援第一個字型，則會嘗試下一個，直到找到合適的字型。

2. 各種字型之間必須使用英文狀態下的逗號隔開。
3. 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號。當需要設定英文字型時，英文字型名必須位於中文字型名之前。
4. 如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: 「Times New Roman」;。
5. 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示。
6. 一般網頁中用的較多的字型為 arial，此字型是喬布斯研發的

1.3 CSS Unicode字型

1. 在 CSS 中設定字型名稱，直接寫中文是可以的。但是在檔案編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。

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

3. 方案二： 在 CSS 直接使用 Unicode 編碼來寫字型名稱可以避免這些錯誤。使用 Unicode 寫中文字型名稱，瀏覽器是可以正確的解析的。 font-family: 「\5FAE\8F6F\96C5\9ED1」，表示設定字型為「微軟雅黑」。

4. 可以通過escape() 來測試屬於什麼字型。

   體名稱	英文名稱	Unicode 編碼
   宋體	SimSun	\5B8B\4F53
   新宋體	NSimSun	\65B0\5B8B\4F53
   黑體	SimHei	\9ED1\4F53
   微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
   楷體GB2312	KaiTiGB2312	\6977\4F53_GB2312
   隸書	LiSu	\96B6\4E66
   幼圓	YouYuan	\5E7C\5706
   華文細黑	STXihei	\534E\6587\7EC6\9ED1
   細明體	MingLiU	\7EC6\660E\4F53

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

1.4 font-weight 字型粗細

1. 字型加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語意的。
2. 拓展： strong元素，預設加粗。strong元素表示重要的不能忽略的內容

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

注：css 數位 400 等價於 normal，而 700 等價於 bold。 但是我們更喜歡用數位來表示。

1.5 font-style 字型風格

1. 字型傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語意的。
2. 拓展： i元素表達的語言：這一塊文字為特殊的文字，實際使用的時候通常用它表示一個圖示（icon）

   屬性	屬性值	作用
   font-style:	normal	預設值，瀏覽器會顯示標準的字型樣式
   	italic	瀏覽器會顯示斜體的字型樣式
   	oblique	瀏覽器會顯示傾斜的字型樣式

注：平時我們很少給文字加斜體，反而喜歡給斜體標籤（em，i）改為普通模式

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

1. font屬性用於對字型樣式進行綜合設定，其基本語法格式如下：

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

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

1.7 letter-spacing 字型間距

1. letter-spacing就是文字與文字間的間距，值可以負數，預設值normal

   p{
   	letter-spacing : 2px;}

1.8 text-decoration 文字修飾：加線

1. line-through：穿過文字，表示中間加條線
2. overline：上面加條線（少用）
3. underline：下面加條線
4. none：表示沒有線，去掉線
5. 拓展： del、s元素預設中間加線；del元素表示廢棄、錯誤的內容；s元素表示過期的內容；a元素預設下面加線，表示超連結

1.9 text-indent 首行文字縮排

1. px：縮排多少畫素
2. em：縮排幾個字型（中英文縮排寬度值一樣）

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

1. 每行文字的高度，該值越大，每行文字的值越大
2. 設定行高為容器高度，可以讓單行文字垂直居中，容器高度為如：height：50px
3. 行高可以設定為純數位，表示相對於當前元素的字型大小。如取值1.5:行高為文字的1.5倍，這樣文字在放大的時候，行高也在變大，不會出現文字重疊現象

2.1 letter-spacing 文字間隙

1. em：每個文字間隔幾個字型寬度
2. px：每個文字間隔幾個畫素

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

1. left：靠左，預設靠左排列
2. center：居中
3. right：靠右

2.3 網頁的最小和最大寬度

1. 設定在body元素的css裡
2. min-width: 1000px 最小畫素
3. max-width: 1500px 最大畫素

（學習視訊分享：）

以上就是13個常用CSS字型樣式屬性，你知道哪幾個呢？的詳細內容，更多請關注TW511.COM其它相關文章！