簡寫屬性

font: [[<font-style> || [normal | small-caps] || <font-weight>]? <font-size> [/<line-height>]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar
初始值：font-style:normal,font-weight:normal,font-size:medium,line-height:1
舉例：font: italic normal bold 1.5rem/1.2 Verdana, Helvetica, Arial, sans-serif;
 

• 在最大的[]裡除了font-size和font-family，其餘屬性都是可選的

• 若直接使用簡寫形式，那麼省略的屬性會採用預設值，相當於完整的寫了一遍font的所有屬性，可能會對想要繼承的屬性有影響

• 在最大的[]外的屬性值可以讓字型設定成作業系統字型值

  button { font: caption; } /* 按鈕的字型和操作體統中的按鈕一樣 */
  /*
  caption：用於說明文字的控制元件(如按鈕)、 
  icon：標註圖示、 
  menu：下拉選單和選單列表、
  message-box：對話方塊、
  small-caption：標註小型控制元件、
  status-bar：視窗的狀態列
  */
   
  

字型族

css定義了5種通用的字型族：襯線字型族、無襯線字型族、等寬字型族、手寫字型族、奇幻字型族。有一篇文章清楚地講述了字型族的特點和區別：五類字型serif，sans-serif，monospace，cursive和fantasy

• 在font-family屬性中使用通用字型族(serif, sans-serif,monospace,cursive,fantasy)，那就會依賴瀏覽器預設的字型(當然這個字型屬於你選擇的通用字型族)

• 在指定的字型名稱後面新增類似效果的字型名稱或通用字型族，確保該字型失效還能有類似的字型替代，不然會採用系統預設字型

• 如果字型名稱有空格，應使用引號(這點不是強制的)，但如果字型名與關鍵字(可能是字型族)衝突，那就一定要用引號

  body {
  	font-family: serif;
    font-family: Georgia, serif;
    font-family: Times, 'Times New Roman', Georgia, 'New York', serif;
    font-family: 'cursive', cursive;
  }
  

使用@font-face：自定義字型

@font-face {
  /* 必須的描述屬性，font-family和src，一個指定被引用時的名稱，一個指定字型資源的連結 */
  font-family: <family-name>;
  src: [[<uri>[format(<string>#)]?]|<font-face-name>]#;
  /* 其他描述 */
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-variant: normal;
  font-feature-settings: normal;
  unicode-range: U+0-10FFFF;
}

• 在@font-face使用的屬性值僅作為描述作用，不能改變字型的樣式，比如：一款自定義字型有不同屬性（粗細、字寬等），被引用時通過描述區分

  /* 正常字型 */
  @font-face {
    font-family: 'SwitzeraADF';
    src: url('SwitzeraADF-Regular.otf') format('opentype');
    font-weight: normal;
  }
  /* 粗體字型 */
  @font-face {
    font-family: 'SwitzeraADF';
    src: url('SwitzeraADF-Bold.otf') format('opentype');
    font-weight: bold;
  }
  

• @font-face是惰性載入字型的，需要用到的時候才會載入；但瀏覽器不管是否需要都會全部下載快取

• 使用@font-face可以自定義網頁上的字型，如果字型資源失效或格式不被瀏覽器支援，文字會使用備用的字型顯示

• 不同時代的不同瀏覽器支援的字型格式可能不同，可以使用下面的模版做到相容(其餘屬性採用預設)：

  @font-face {
    font-family: 'SwitzeraADF';
    src: url('SwitzeraADF-Regular.eot');	/* 針對ie9 */
    src: url('SwitzeraADF-Regular.eot?#iefix') format('embedded-opentype'), /* 針對ie6～ie8 */
      	 url('SwitzeraADF-Regular.woff') format('woff'),	/* 針對多數現代桌面瀏覽器 */
      	 url('SwitzeraADF-Regular.ttf') format('truetype'),	/* 針對ios和android裝置 */
      	 url('SwitzeraADF-Regular.svg#switzera_adf_regular') format('svg');	/* 針對舊款的ios裝置 */
  }
  

• 線上字型格式轉換網站：cloudconvert

font-weight

初始值：normal

取值範圍：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

• 100或200可能是一樣的效果，這個跟字型的字重等級劃分有關(小於9)，也就是說值名稱對應某個數字區間，在這個區間內字重不會發生改變

font-size

初始值：medium(預設16px)

取值範圍：xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>

• 較為常用的是數字+單位的組合，單位有em、rem、px、pt等
• 採用百分數的時候，會基於父元素的字號計算，1em == 100%
• 在某些瀏覽器中，等寬字型字號設定為基於父元素相關的值(父元素字號為medium)，不會基於父元素的字號計算，而是瀏覽器預設的等寬字號(預設13px)，可以採用font-family: monospace, serif;解決，即新增serif
• 推薦使用em或者rem，而不推薦使用畫素值，因為絕對單位在不同的裝置中表現的不一樣

font-style

初始值：normal

取值範圍：italic | oblique | normal

• italic(斜體)和oblique(傾斜體)通常使用同一款字型，可以做到相互替代

font-stretch

初始值：normal

取值範圍：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

• 字型拉伸只有在使用的字型有多個寬度的時候才會生效，不然都會是normal效果

font-kerning

初始值：auto

取值範圍：auto | normal | none

• none：使用者代理忽略字型中的字距資訊
• normal：使用者代理正常處理字距，即使用字型中的字距資料
• auto：讓使用者代理選擇合適的處理方式，具體怎麼做依賴於使用的字型

font-variant

初始值：normal

取值範圍：normal | small-cap (css2.1) (css3)

• small-cap：類似於text-form: upperform;，區別：大寫字母採用較大的大寫字母顯示，小寫字母採用較小的大寫字母顯示
• 使用的字型不存在small-cap字型，使用者代理可能會自己建立或者採用text-form: upperform;一樣的效果