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

本篇文章給大家帶來了一些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: “5FAE8F6F96C59ED1”，表示設置字體為“微軟雅黑”。

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

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

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

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 最大像素

（學習視頻分享：css視頻教程）