CSS3 @font-face 規則
css通常用font-family
我們都知道，在網頁製作中，會經常用到不同的字體，常用的有 微軟雅黑、宋體、Aria 等等。在我們寫css的樣式的時候，通過 font-family 可以指定元素的字體名稱。
CSS3 @font-face自定義字體
如果是 特殊字體 ，因爲我們的電腦沒有安裝那個字體，所以在網頁中顯示不出來，所以我們通過 @font-face 來引入特殊字體。
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
取值說明：
YourWebFontName：字體名稱，他將被引用到元素中的 font-family 上
source：字體的存放路徑，跟css引用圖片一樣；
format：字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype , opentype , truetype-aat , embedded-opentype , svg 等；
weight和style：這兩個值大家一定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。
注：字體文件格式
TrueType(.ttf) 格式：
.ttf 字體是 Windows 和 Mac 的最常見的字體，是一種 RAW 格式，因此他不爲網站優化,支持這種字體的瀏覽器有 【IE9+ , Firefox3.5+ , Chrome4+ , Safari3+ , Opera10+ , iOS Mobile Safari4.2+】
OpenType(.otf) 格式：
.otf 字體被認爲是一種原始的字體格式，其內置在 TureType 的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+ , Chrome4.0+ , Safari3.1+ , Opera10.0+ , iOS Mobile Safari4.2+】
Web Open Font Format(.woff) 格式：
.woff 字體是Web字體中最佳格式，他是一個開放的 TrueType/OpenType 的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+ , Firefox3.5+ , Chrome6+ , Safari3.6+ , Opera11.1+】
Embedded Open Type(.eot) 格式：
.eot 字體是IE專用字體，可以從TrueType 創建此格式字體,支持這種字體的瀏覽器有 【IE4+】
⚠️
字體文件的體積可能非常的大，而且需要額外的HTTP連接，這些都會降低網站頁面的加載速度。所以，在使用網絡字體@font-face前，你需要清楚它的利與弊，判斷網絡字體是否真的有必要用在你的網站頁面上。
http://font-spider.org/
中文字體壓縮器