[Back To Basic] CSS Web Fonts

Web Fonts

• 可以使用: 沒有安裝在使用者電腦的字體
• 想要使用的字體，可以從server端自動下載至client端
• 關鍵字: @font-face

e.g.

@font-face {

  font-family: myFirstFont; /* 定義字體的名字 */

  src: url(sansation_light.woff); /* 設定字體檔案的來源 */

}

*. url 要用小寫，否則 IE 可能會有問題

字體種類

• .ttf
• mac, windows皆支援
• 所有主流瀏覽器皆支援(ie8不支援, ie9有條件支援)
• 可能有版權問題
• 無壓縮(檔案較大)
• .otf
• mac, windows皆支援
• 所有主流瀏覽器皆支援(ie8不支援, ie9有條件支援)
• ttf的擴充
• .woff
• mac, windows皆支援
• 所有主流瀏覽器皆支援(ie8不支援, ie9有條件支援)
• 有壓縮(檔案較小)
• .woff2
• 並未受到廣泛的支持
• 是woff的加強版，檔案更小
• .svg
• 只支援safari特定版本
• .eot: 微軟開發
• 只支援IE

source code