@font-face可以實現從服務器端加載字體，所有瀏覽器中使用的字體就可以不受本地字體的限制。@font-face真的不是什么新鮮玩意，早在2001年時就被提出來，只不過近兩年才被各瀏覽器廣泛支持。而且各瀏覽器支持的字體文件格式也可能不同，一般來說如下四種格式可覆蓋所有瀏覽器。

eot：該格式僅在老版本的IE中使用

ttf：(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字體文件格式,隨著windows的流行，已經變成最常用的一種字體文件表示方式，支持的瀏覽器很多。

svg：(Scalable Vector Graphics)該字體可能最早在IOS設備上被支持，沒有ttf格式使用的廣泛。

woff：（Web Open Font Format）是一種網頁所采用的字體格式標準。此字體格式發展于2009年，現在正由w3c標準化，以求成為web字體的統一標準。

如何使用自定義字體？

第一步，在CSS中引入字體并給名字取一個合適的名字，如下：

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

font-family定義字體的名字，接下來的src是加載字體文件的位置，之所有有多個url就是因為瀏覽器兼容問題。

第二步，使用剛剛定義的字體，如下：

div {
font-family: tonjay;
}

附@font-face的瀏覽器字體兼容性

Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；

Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；

Internet Explorer： 自ie4開始，支持EOT格式的字體文件；ie9支持WOFF；

Firefox(3.5+)： TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)

Google Chrome：TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有瀏覽器的完美支持。

另外一種方法：

1.下載SourceHanSansCN-Regular.TTF

https://www.fontke.com/font/18839412/download/

2.解壓得到左邊文件

3.找到在線font-face生成器

https://www.fontke.com/tool/fontface/

根據提示上傳 SourceHanSansCN-Regular.TTF

可以得到以下文件：

4.引入項目

在需要的地方引入 .css 文件；

• css
• 字體