CSS字體屬性

CSS字體屬性

1. CSS Fonts（字體）屬性擁有定義字體系列、大小、粗細和文字樣式（如斜體）

2. 字體系列

   •       <style type="text/css">
              div{
                 font-family:"Microsoft Yahei";
              }
           </style>

   • 【註意】

     • 各種字體之間必須使用英文狀態下逗號隔開
     • 一般情況下，如果有空格隔開的多個單片語成的字體，加引號
     • 儘量使用系統預設自帶的字體，保證在任何用戶的瀏覽器中都能顯示

3. 字體大小

   • CSS使用font-size屬性來設置字體大小

   •       <style type="text/css">
              div{
                 font-size:20px;
              }
           </style>

   • 【註意】

     • px（像素）大小是我們網頁的最常用的單位
     • 谷歌瀏覽器預設的文字大小為16px
     • 不同的瀏覽器可能預設顯示的字型大小大小不一致，我們儘量給一個明確值大小，不要預設值大小
     • 可以給body指定整個頁面文字的大小

4. 字體的粗細

   • CSS使用font-weight屬性來設置文本字體的粗細

   •       <style type="text/css">
              div{
                 font-weight:normal|bold|bolder|lighter|number;
              }
           </style>

     • 參數	說明
       normal	正常字體，相當於number為400，聲明這個值將取消之前任何設置
       bold	粗體。相當於number700.也相當於<b>對象的作用
       bolder	IE5+ 特粗體
       lighter	IE5+ 細體
       number	IE5+

5. 文字樣式

   • CSS使用font-style屬性設置文字分風格

   •       <style type="text/css">
              div{
                 font-stylet:normal|italic;
              }
           </style>

     • 屬性值	作用
       normal	預設值，瀏覽器會顯示標準的字體樣式
       italic	瀏覽器會顯示斜體的字體樣式

   • 【註意】平時我們很少給文字加斜體，反而要給斜體標簽（em，i）改為不斜字體

6. 複合屬性

   • 字體屬性可以把以上文字樣式綜合來寫，這樣可以更節約代碼

   •       <style type="text/css">
              div{
                 font:font-style font-weight font-size/line-height font-family;
              }
           </style>

   • 【註意】

     • 不能改變書寫順序
     • 不需要設置的屬性可以省略，但是必須保留font-size和font-family ，否則font屬性將不起作用