基本介紹
1、自定義網頁特殊字體，無需考慮用戶電腦上是否安裝了此特殊字體，從此把特殊字體處理成圖片的時代便成為了過去。
2、支持程度比較好，甚至IE低版本瀏覽器也能支持。
3、web字體的大小鑒定是字體的高度
字體格式
1、.eot格式：IE專用字體，支持瀏覽器IE4+
2、.ttf格式：Windows和Mac的最常見的字體，是一種RAW格式，支持瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+
3、.otf格式：被認為是一種原始的字體格式，其內置在.ttf的基礎上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+
4、woff格式：Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
5、.svg格式：基於SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
字體圖標
1、阿里巴巴矢量圖庫：http://www.iconfont.cn/
2、Font Awesome ：http://www.bootcss.com/p/font-awesome/
3、以上網站擁有豐富的字體圖庫，阿里巴巴可能有版權問題，建議第二個
阿里字體
1、拷貝項目下面生成的font-face
2、定義使用iconfont的樣式
3、在標簽添加樣式，並寫入字體編碼
4、也可以使用偽元素進行在樣式類中就插入字體編碼
注意事項
1、'\e605'是Unicode編碼’؅‘轉化來的，這是固定格式
2、@font-face是用來聲明自己的自定義字體，這也是固定格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face { font-family: 'iconfont'; src: url('font/iconfont.eot'); src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), url('font/iconfont.woff') format('woff'), url('font/iconfont.ttf') format('truetype'), url('font/iconfont.svg#iconfont') format('svg'); } .self-font::before { content: '\e605'; font-size: 30px; font-family: "iconfont" !important; } </style> </head> <body> <span class="self-font"></span> </body> </html>
Font Awesome
1、直接引用CSS
2、直接在標簽中添加類名（原來也是偽元素）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/font-awesome.css"> </head> <body> <span class="icon-play">播放圖標</span> <span class="icon-beer">啤酒圖標</span> <span class="icon-book">圖書圖標</span> <span class="icon-money">金錢圖標</span> </body> </html>
