Web Font的基本用法不會很難，如果是要用本機的方式，首先就是要先找個資料夾放字型檔，接下來參考@font-face的作法即可。
@font-face
參考 : http://devdocs.io/css/@font-face
http://compass-style.org/reference/compass/css3/font_face/
CSS3的設定
@font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
sass 的設定 +font-face($name, $font-files, $eot, $weight, $style) //font-face(自訂義名稱，檔案路徑，IE專用!?，文字粗，樣式(might be also italic))
This is Kavoon-Regular.
google Web fonts
Google 有提供線上的版本，按照他們的方式操作並不會很難，只要先搜尋到想要的字體就可以開始了~
參考 : http://www.google.com/fonts/
CSS版
//插入 link
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
//或是import
@import url("http://fonts.googleapis.com/css?family=The+Girl+Next+Door")
//本地CSS設定
font-family: 'The Girl Next Door', cursive;
This is The Girl Next Door.
javascript版
google會提供，只要插入在網頁裡即可，font-family也是依提供的設定即可。
This is Frijole.
現實的來了
捉雞
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.5 (1.9.1) | 4.0 | 4.0 | 10.0 | 3.1 |
| WOFF | 3.5 (1.9.1) | 6.0 | 9.0 | 11.10 | 5.1 |
| SVG Font |
Not supported Unimplemented (see bug 119490) |
yes | Not supported | yes | yes |
unicode-range |
yes (bug 443976) |
yes | 9.0 | (Yes) | (Yes) |
手機
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.9.1) | ? | Not supported | 10.0 | (Yes) |
| WOFF | Not supported | 5.0 (5.0) | ? | Not supported | 11.0 | Not supported |
| SVG fonts | Not supported |
Not supported Unimplemented (see bug 119490) |
? | Not supported | 10.0 | (Yes) |
unicode-range |
(Yes) |
撰寫一篇文章需要花上非常多的時間，如果你關閉 Adblock (廣告阻擋器)，我會非常的開心 🤗。 (╭(°A°`)╮))