原文地址：https://www.2cto.com/kf/201312/265179.html

@font-face可以實現從伺服器端載入字型，所有瀏覽器中使用的字型就可以不受本地字型的限制。@font-face真的不是什麼新鮮玩意，早在2001年時就被提出來，只不過近兩年才被各瀏覽器廣泛支援。而且各瀏覽器支援的字型檔案格式也可能不同，一般來說如下四種格式可覆蓋所有瀏覽器。
eot：該格式僅在老版本的IE中使用，瀏覽器相容性檢視https://caniuse.sinaapp.com/html/item/eot/index.html

ttf：(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字型檔案格式,隨著windows的流行，已經變成最常用的一種字型檔案表示方式，支援的瀏覽器很多。瀏覽器相容性檢視https://caniuse.sinaapp.com/html/item/ttf/index.html

svg：(Scalable Vector Graphics)該字型可能最早在IOS裝置上被支援，沒有ttf格式使用的廣泛。瀏覽器相容性檢視https://caniuse.sinaapp.com/html/item/svg-fonts/index.html

woff：（Web Open Font Format）是一種網頁所採用的字型格式標準。此字型格式發展於2009年，現在正由W3C標準化，以求成為web字型的統一標準。瀏覽器相容性檢視https://caniuse.sinaapp.com/html/item/woff/index.html

第一步，在CSS中引入字型並給名字取一個合適的名字

@font-face {
    /* font-properties */
    font-family: pictos;
    src:url('pictos/pictos-web.woff'),  
    url('pictos/pictos-web.ttf'),
    url('pictos/pictos-web.eot'); /* IE9 */
}

p {
    font-family: pictos;
}