CSS字型樣式屬性總結
font-size:字號大小
用來設定字號大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位,比較常用的是em,畫素單位px。
相對長度單位 | 說明 |
em | 相對於當前物件內文字的字型尺寸 |
px | 畫素,最常用,推薦使用 |
絕對長度單位 | 說明 |
in | 英寸 |
cm | 釐米 |
mm | 毫米 |
pt | 點 |
font-family:字型
font-family屬性用於設定字型。網頁中常用的字型有宋體,微軟雅黑,黑體等,列如將網頁中所有段落文字的字型設定為微軟雅黑,可以使用如下CSS樣式程式碼:
p{font-family:"微軟雅黑";}
注意:可以同時指定多個字型,中間用逗號隔開,表示如果瀏覽器不支援第一個字型,則會嘗試下一個,直到找到合適的字型。
常用技巧:
- 現在網頁中普遍使用14px
- 儘量使用偶數的數字字號。ie6等老式瀏覽器支援奇數會有bug。
- 各種字型之間必須使用英文狀態下的逗號隔開
- 中文字型需要加英文狀態下的引號,英文字型一般不需要加引號。當需要設定英文字型時,英文字型名必須位於中文字型名之前。
- 如果字型名中包含空格、#、$等符號,則該字型必須加英文狀態下的單引號或雙引號,例如font-family:"Times New Roman";
- 儘量使用系統預設字型,保證在任何使用者的瀏覽器中都能正確顯示
CSS Unicode字型
在CSS中設定字型名稱,直接寫中文是可以的。但是在檔案編碼(GB2312、UTF-8等)不匹配時會產生亂碼的錯誤。XP系統不支援類似微軟雅黑的中文。
方案一:你可以使用英文來代替。比如font-family:"Microsoft Yahei"。
方案二:在CSS直接用Unicode編碼來寫字型名稱可以避免這些錯誤。使用 Unicode 寫中文字型名稱,瀏覽器是可以正確的解析的。font-family: "\5FAE\8F6F\96C5\9ED1",表示設定字型為“微軟雅黑”。
搜狐頁面就是這樣寫的
字型名稱 | 英文名稱 | Unicode 編碼 |
宋體 | SimSun | \5B8B\4F53 |
新宋體 |
NSimSun | \65B0\5B8B\4F53 |
黑體 | SimHei | \9ED1\4F53 |
微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隸書 | LiSu | \96B6\4E66 |
幼園 | YouYuan | \5E7C\5706 |
華文細黑 | STXihei | \534E\6587\7EC6\9ED1 |
細明體 | MingLiU | \7EC6\660E\4F53 |
新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
為了照顧不同電腦的字型安裝問題,我們儘量只使用宋體和微軟雅黑中文字型
font-weight:字型粗細
字型加粗除了B標籤和strong標籤之外,可以使用CSS來實現,但是CSS是沒有語義的
font-weight屬性用於定義字型的粗細,其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)
小技巧:
數字400等價於normal,而700等價於bold,大家更喜歡用數字來表示
font-style:字型風格
字型傾斜除了用i標籤和em標籤之外,可以使用CSS來實現,但是CSS是沒有語義的。
font-style屬性用於定義字型風格,如設定斜體、傾斜或正常字型,其屬性值如下:
normal:預設值,瀏覽器會顯示標準的字型樣式
itlic:瀏覽器會顯示斜體的字型樣式。
oblique:瀏覽器會顯示傾斜的字型樣式。
小技巧:
平時我們都少給文字加斜體,然而喜歡給斜體標籤(em、i)改為普通模式
font:綜合設定字型樣式
font屬性用於對字型樣式進行綜合設定,其基本語法格式如下:
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時,必須按上面語法格式中的順序書寫,不能更換順序,各個屬性以空格隔開。
注意:其中不需要設定的屬性可以省略(取預設值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。