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

Codehua發表於2019-10-09
H5自定義字型

應用情景

業務搬磚需求需要用原設計稿給出的字型，使用@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
複製程式碼

多檔案的話用空格分開

壓縮完成

會生成一份備份字型檔案與壓縮後的字型包

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

存在問題

字蛛試用於本地的小專案

稍大型專案或是單頁應用不太推薦使用

  • 不支援動態渲染的專案
  • 不支援GBK編碼
  • 多頁面的支援不友好

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

閒談

其實是對接香港業務，香港的win10作業系統竟然沒有黑體，客戶覺得字型不一樣影響體驗，上字型包又太大，所以找出這一套上字型連壓縮的解決方法。（卑微實習生）

相關文章