Web Font的基本設定

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))

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;

javascript版

google會提供，只要插入在網頁裡即可，font-family也是依提供的設定即可。

現實的來了

捉雞

手機