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也是依提供的設定即可。
現實的來了
捉雞
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) |