1. 程式人生 > >CSS字型樣式屬性總結

CSS字型樣式屬性總結

font-size:字號大小

   用來設定字號大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位,比較常用的是em,畫素單位px。

                相對長度單位                              說明
                        em       相對於當前物件內文字的字型尺寸
                         px               畫素,最常用,推薦使用
               絕對長度單位                              說明
                         in                              英寸
                        cm                              釐米        
                        mm                              毫米
                        pt                               點

font-family:字型

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

p{font-family:"微軟雅黑";}

注意:可以同時指定多個字型,中間用逗號隔開,表示如果瀏覽器不支援第一個字型,則會嘗試下一個,直到找到合適的字型。

常用技巧:

  1. 現在網頁中普遍使用14px
  2. 儘量使用偶數的數字字號。ie6等老式瀏覽器支援奇數會有bug。
  3. 各種字型之間必須使用英文狀態下的逗號隔開
  4. 中文字型需要加英文狀態下的引號,英文字型一般不需要加引號。當需要設定英文字型時,英文字型名必須位於中文字型名之前。
  5. 如果字型名中包含空格、#、$等符號,則該字型必須加英文狀態下的單引號或雙引號,例如font-family:"Times New Roman";
  6. 儘量使用系統預設字型,保證在任何使用者的瀏覽器中都能正確顯示

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屬性將不起作用。