站長資訊網本篇文章給大家帶來了一些css字體樣式屬性，在設置字體樣式時常用的屬性，希望對大家有幫助。
1. CSS字體樣式屬性
1.1 font-size 字體大小
font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。font-size: 14px; // px 絕對像素單位font-size: 1em; // 相對父元素字體大小單位// 注：每個元素必須有字體大小，如果沒有申明，則直接使用父元素的字體大小// 如果沒有父元素（html）則使用基準字號，基準字號為瀏覽器里設置的字號
- 現在網頁中普遍使用14px+
- 盡量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
- 其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：
1.2 font-family字體樣式
font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅 黑，可以使用如下CSS樣式代碼：p{ font-family:"微軟雅黑"; } // 注: 可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。- 各種字體之間必須使用英文狀態下的逗號隔開。
- 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
- 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: “Times New Roman”;。
- 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。
- 一般網頁中用的較多的字體為 arial，此字體是喬布斯研發的
1.3 CSS Unicode字體
-
在
CSS中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。 -
方案一： 你可以使用英文來替代。 比如 font-family:“Microsoft Yahei”。
-
方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。 font-family: “5FAE8F6F96C59ED1”，表示設置字體為“微軟雅黑”。
-
可以通過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 字體粗細
- 字體加粗除了用
b和strong標簽之外，可以使用CSS來實現，但是CSS是沒有語義的。 - 拓展： strong元素，默認加粗。strong元素表示重要的不能忽略的內容
屬性 屬性值 作用 font-weight: normal（簡寫400） 不加粗 bold（簡寫700） 加粗 100~900（100的整倍數） 數值越大字體越粗
注：css 數字 400 等價于 normal，而 700 等價于 bold。 但是我們更喜歡用數字來表示。
1.5 font-style 字體風格
- 字體傾斜除了用
i和em標簽之外，可以使用CSS來實現，但是CSS是沒有語義的。 - 拓展： i元素表達的語言：這一塊文本為特殊的文本，實際使用的時候通常用它表示一個圖標（icon）
屬性 屬性值 作用 font-style: normal 默認值，瀏覽器會顯示標準的字體樣式 italic 瀏覽器會顯示斜體的字體樣式 oblique 瀏覽器會顯示傾斜的字體樣式
注：平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式
1.6 font 文字屬性速寫 (重點)
font屬性用于對字體樣式進行綜合設置，其基本語法格式如下：選擇器{ font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字體類型，大小和類型不能省略- 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
- 注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
1.7 letter-spacing 字體間距
letter-spacing就是文字與文字間的間距，值可以負數，默認值normalp{ letter-spacing : 2px;}
1.8 text-decoration 文本修飾：加線
line-through：穿過文字，表示中間加條線overline：上面加條線（少用）underline：下面加條線none：表示沒有線，去掉線拓展：del、s元素默認中間加線；del元素表示廢棄、錯誤的內容；s元素表示過期的內容；a元素默認下面加線，表示超鏈接
1.9 text-indent 首行文本縮進
- px：縮進多少像素
- em：縮進幾個字體（中英文縮進寬度值一樣）
2.0 line-height 文本行高/垂直居中
- 每行文本的高度，該值越大，每行文本的值越大
- 設置行高為容器高度，可以讓單行文本垂直居中，容器高度為如：height：50px
- 行高可以設置為純數字，表示相對于當前元素的字體大小。如取值1.5:行高為文字的1.5倍，這樣文字在放大的時候，行高也在變大，不會出現文字重疊現象
2.1 letter-spacing 文字間隙
- em：每個文字間隔幾個字體寬度
- px：每個文字間隔幾個像素
2.2 text-align 文字、行盒、行塊盒水平排列方式
- left：靠左，默認靠左排列
- center：居中
- right：靠右
2.3 網頁的最小和最大寬度
- 設置在body元素的css里
- min-width: 1000px 最小像素
- max-width: 1500px 最大像素
（學習視頻分享：css視頻教程）
