CSS Font

CSS @font-face 用法概要

在CSS檔開頭用@font-face宣告你的自定義字型，詳細語法說明如下：

  • font-family：定義字型名稱，可自行更改看自己喜歡
  • src：指定資源的關鍵字，最少要有一個
  • local：指定字型名稱。會尋找 user 的電腦，如果有相同名稱的檔案，就不用從 server 下載，建議寫，可節省時間與流量
  • url：定義字型位置，可用絕對路徑( http://xxx.com/font/myfont.ttf)，或相對路徑(font/myfont.ttf)。
  • format：接在url後面，可寫可不寫，有寫的話瀏覽器會解析得比較快

完整寫法：可支援很多瀏覽器

@font-face {
  font-family: 'MyWebFont'; /* 定義你的字型名稱 */
  src: url('webfont.eot'); /* IE9 Compat Modes  支援IE9才需要 */
  src: local('MyWebFont'), /* 如果user電腦已經有這個字型就用local的 */
       local('MyWebFont-Bold'), /* 可以指定多個local */
       url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

簡單寫法：支援大部分瀏覽器

受限於找不到那麼多種檔案格式，通常都用簡單寫法就可以了

  • woff2：屬於比較新的格式，IE 完全不支援，找不到可省略不寫
  • woff與ttf：這兩種格式至少二選一，可支援目前大部分瀏覽器
@font-face {
  font-family: 'MyWebFont'; 
  src: local('MyWebFont'), 
       url('webfont.woff2') format('woff2'), /* 比較新的格式，找不到可省略 */
       url('webfont.woff') format('woff'), /* 和 ttf 至少要有一個 */
       url('webfont.ttf')  format('truetype'); /* 和 woff 至少要有一個 */
}

用法

建議還是要有fallback字型（隨你喜歡），與sans-serif在後面，避免字型檔案出問題，或者老舊瀏覽器無法解析@font-face時會完全看不到字：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

備註

字型格式與副檔名的關係如下：

  • WOFF：.woff，format('woff')
  • TrueType：.ttf，format('truetype')
  • OpenType：.ttf 或 .otf，format('opentype')
  • Embedded OpenType：.eot，format('eot')
  • SVG Font：.svg 或 .svgz，fotmat('svg')

參考資料

最後更新時間：