CSS3:Web Font與Icon Font應用

利用Web Font與Icon Font讓我們的網頁圖示更豐富

(一) Web Font與Icon Font應用

(1) Google字體:

https://fonts.google.com/ 中:https://fonts.google.com/earlyaccess

(2) 圖示字體

1 Flaticonhttp://www.flaticon.com/

2 Awesome:

(1) 網址:http://fontawesome.io/

(2) Awesome CDN:https://fontawesomecdn.com/

(二) Icon Font使用原則

(1) @font-face方式

※在使用icon font字體的時候,發現在firefox 及ie9下icon font字體不顯示,
也就是通常說的firefox和IE9不支持對icon font字體的跨域訪問

(2)font-family設定順序

參考連結:CSS font-family 屬性CSS3 @font-face 規則CSS3字體

(三)Font-family其他介紹

(1)字體檔案類型

 

(2)瀏覽器對於字體相容性

(3)各電腦作業系統預設字型