CSS3中，使用@font-face即可加載自定義字體了。

推薦的跨瀏覽器 @font-face CSS 寫(xiě)法：

/*聲明 WebFont*/
@font-face {
  font-family: 'fontName';   /*字體名稱*/
          src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */
               url('../fonts/font.woff') format('woff'),
               url('../fonts/font.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
               url('../fonts/font.svg') format('svg'); /* iOS 4.1- */
  font-weight: normal;
  font-style: normal;
}
/*使用選擇器指定字體*/
.test {
    font-family: 'fontName';
}

正常使用@font-face加載自定義字體時(shí)，可能整個(gè)字體包大小有好幾M，打開(kāi)網(wǎng)頁(yè)時(shí)，可能會(huì)需要很長(zhǎng)的時(shí)間來(lái)下載字體。用戶體驗(yàn)很不好。

那么如何解決這一問(wèn)題呢？

你可以找設(shè)計(jì)小姐姐/小哥哥幫忙把字體包中用不到的字拿掉，只留頁(yè)面需要的字，這樣字體文件大小就會(huì)小很多(但是這種方法適應(yīng)性太差，如果發(fā)生文字更換，字體文件也會(huì)頻繁需要修改。)

其實(shí)我們前端也有神器可以解決此問(wèn)題， font-spider是一個(gè)中文字體壓縮器，讓網(wǎng)頁(yè)自由引入中文字體成為可能。

font-spider的工作原理是這樣的： 中文字體文件之所以很大，是因?yàn)橛⒄Z(yǔ)只有26個(gè)字母，而中文的漢字有好多好多個(gè)，所以文件相對(duì)來(lái)說(shuō)就會(huì)大很多。font-spider就是從你的css文件的@font-face入手，去查找字體，然后遍歷你的html文件，通過(guò)分析本地 CSS 與 HTML 文件獲取 WebFont 中沒(méi)有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式。

如何使用font-spider

1.首先你的電腦需要安裝node.js
2.安裝好了node.js，然后執(zhí)行：
npm install font-spider -g

3.在css中使用webfont,在css中就按照以下格式聲明@font-face(注意 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動(dòng)生成)

/*聲明 WebFont*/
@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*使用選擇器指定字體*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}

4.運(yùn)行 font-spider 命令

cd /Users/xxx/Desktop/MyRepository/project  /*進(jìn)入項(xiàng)目?jī)?nèi)*/
/*執(zhí)行命令，*.html是對(duì)所有html文件執(zhí)行該命令，你也可以寫(xiě)具體name的html*/
font-spider  *.html

命令執(zhí)行完后，字體文件下多出來(lái)以下文件（.font-spider文件夾下是原始的ttf文件）

image.png

注意：

字蛛不支持動(dòng)態(tài)生成的文字，他只能找到html中存在的文字。

不過(guò)此問(wèn)題在新出的font-spider-plus（字蛛+）得到了解決。

除了兼容font-spider（字蛛）支持的特性：

1. 壓縮字體：智能刪除沒(méi)有被使用的字形數(shù)據(jù)，大幅度減少字體體積
2. 生成字體：支持 woff2、woff、eot、svg 字體格式生成

font-spider-plus（字蛛+）還具有以下特性：

1. 支持線上動(dòng)態(tài)渲染的頁(yè)面
2. 支持線上GBK編碼的文件