H5自定義字體解決方法（mark）

應用情景

業務搬磚需求須要用原設計稿給出的字體，使用@font-face引入後，發現字體包太大10M左右，每次請求服務器10M流量會形成服務器壓力，影響用戶體驗

第一步：使用@font-face

MDN概述

這是一個叫作@font-face 的CSS @規則 ，它容許網頁開發者爲其網頁指定在線字體。 經過這種做者自備字體的方式，@font-face 能夠消除對用戶電腦字體的依賴。 @font-face 不只能夠放在在CSS的最頂層, 也能夠放在 @規則 的 條件規則組 中。

簡單來講就是能夠在網頁上用本身的字體包 能夠放在相似@media媒體查詢等@規則中

用法

@font-face CSS at-rule 指定一個用於顯示文本的自定義字體；字體能從遠程服務器或者用戶本地安裝的字體加載. 若是提供了local()函數，從用戶本地查找指定的字體名稱，而且找到了一個匹配項, 本地字體就會被使用. 不然, 字體就會使用url()函數下載的資源。
經過容許做者提供他們本身的字體，@font-face 讓設計內容成爲了一種可能，同時並不會被所謂的"網絡-安全"字體所限制(字體如此廣泛以致於它們能被普遍的使用). 指定查找和使用本地安裝的字體名稱可讓字體的自定義化程度超過基本字體，同時在不依賴網絡狀況下實現此功能。
在同時使用url()和local()功能時，爲了用戶已經安裝的字體副本在須要使用時被使用，若是在用戶本地沒有找到字體副本就會去使用戶下載的副本查找字體。
@font-face 規則不單單使用在CSS的頂層，還能夠用在任何CSS條件組規則中.

簡單來講就是@font-face 突破網絡安全限制，可讓做者自由使用本身想要的字體，能夠用在任何css條件組規則中，這裏不對其local()函數作額外延伸。 下面貼一個平常用法

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),//後綴是字體文件格式 常見有ttf svg等
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
複製代碼

這裏提供一個在線字體轉化網站 字體格式轉化

第二步：字體包壓縮

成功引入後，就發現字體包太大了，這裏就涉及字體包壓縮，使用一個字體包壓縮器 font-spider。

font-spider使用

基本原理

經過匹配html中用到的文體，刪除剩餘沒有用到的文字。達到壓縮字體包的目的。

安裝

npm install font-spider -g 
複製代碼

沒有安裝node npm的同窗，請尋找安裝方法

使用

@font-face {
    font-family: mysimhei;
    src: url(../../../simhei.ttf);
}
p{
    font-family: mysimhei;
}
複製代碼

注意若是使用要在css文件中先這樣引入

font-spider ./demo/*.html
複製代碼

這裏的*號是表示匹配所有 也可指定html。

font-spider ./demo/*.html ./demo/pages/index.html
複製代碼

多文件的話用空格分開

壓縮完成

會生成一份備份字體文件與壓縮後的字體包

存在問題

字蛛試用於本地的小項目

稍大型項目或是單頁應用不太推薦使用

• 不支持動態渲染的項目
• 不支持GBK編碼
• 多頁面的支持不友好

可是目前github上已經有字蛛延伸的庫，能夠嘗試一下。

閒談

實際上是對接香港業務，香港的win10操做系統居然沒有黑體，客戶以爲字體不同影響體驗，上字體包又太大，因此找出這一套上字體連壓縮的解決方法。（卑微實習生）