CSS3的@font-face

參考資料：https://www.w3cplus.com/content/css3-font-face
@font-face是CSS3中的一個模塊，主要是把自定義的Web字體嵌入到網頁中。

@font-face的語法規則

// 以iconfont爲例
@font-face {font-family: "iconfont";
    src: url('../fonts/iconfont.eot?t=1505286646246'); /* IE9*/
    src: url('../fonts/iconfont.eot?t=1505286646246#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/iconfont.ttf?t=1505286646246') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../fonts/iconfont.svg?t=1505286646246#iconfont') format('svg'); /* iOS 4.1- */
  }

字體格式

- TureTpe(.ttf)格式
Windows和Mac最常見的字體，是一種RAW格式，不爲網站優化。
兼容性：【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

- OpenType(.otf)格式
被認爲是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能。
兼容性：【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】

- Web Open Font Format(.woff)格式
Web字體中的最佳格式，是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離。
兼容性：【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

- Embedded Open Type(.eot)格式
IE專用字體，可以從TrueType創建此格式字體。
兼容性：【IE4+】

- SVG(.svg)格式
基於SVG字體渲染的一種格式。
兼容性：【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

字體獲取
Google webfonts: http://www.google.com/webfonts
Dafont: https://www.dafont.com/
獲取到的字體包爲.ttf格式，要使用需要先進行轉換。

字體轉換
https://www.fontsquirrel.com/tools/webfont-generator