微信小程序引入外部字體

最近做小程序 RPshare 的時候，設計稿使用到了優設標題黑的字體，實際搭建的時候使用到了 base64 壓縮字體直接純代碼引入的方法，我個人是比較喜歡這種方法的，比起來添加文件，用純代碼解決更簡單方便些。剛好最近有人問到了我中文字體壓縮引入的辦法，雖然博客之前寫過，但是裡面壓縮字體的網站失效，並且步驟也較為繁瑣，不夠優雅，遂寫下了這篇帖子。

準備工作#

nodejs 安裝字蛛
需要壓縮的字體文件重命名 font.ttf
一個 font.html 文件

安裝字蛛#

如果已經安裝過 nodejs 環境的用下面命令直接安裝就可以了，沒安裝 nodejs 的請看這裡

npm install font-spider -g

font.html 文件#

創建一個 font.html 文件，這個是字蛛壓縮字體必須要用到的步驟，內容如下，** 把 div 裡的內容替換成你需要的文字，** 壓縮出來的文件將包含這些文字，字蛛會自動去重，所以重複了也沒關係。

<!DOCTYPE html>
<html lang="en">
<style>
    @font-face {
        font-family: font;
        src: url("./font.ttf") format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM文件庫圖片代碼新建代碼取分享功能暫未開放!可申請文件分享權限改刪更簡介:：快速打
</div>
</body>
</html>
<style>
    div{
        font-family: font;
    }
</style>

開始壓縮#

創建好的 font.html 文件和 font.ttf 文件放在同一目錄下，右鍵點擊文件夾空白處，選擇 在此處打開 Powershell 窗口 ，輸入以下命令

font-spider font.html

微信截圖_20220717130455.png

出現這樣的命令，就代表壓縮成功了，原文件夾下的 font.ttf 被替換為了壓縮後的字體文件，未壓縮的原字體文件在字蛛新建的文件夾 .font-spider 下，如果習慣直接使用文件就可以在網頁上直接使用了，由於微信小程序不支持直接使用字體文件，需要網絡連接的字體文件，或者 base64 直接引入。我需要把字體轉換為 base64 代碼。

字體轉換為 base64#

我自己使用的是這個網站，打開 Base64 encode 選項，關閉下邊幾個字體文件的勾選（非必要，勾選的話會生成這幾種字體文件），因為我需要的僅 base64 ，就取消勾選了。

微信截圖_20220717130940.png
Add font 選擇你使用字蛛壓縮的字體文件，然後 Convert , Download 下載壓縮後打包的文件，裡面 style.css 就是 base64 的壓縮後的字體引入代碼，接下來把他添加到你的 css 文件即可，小程序可以添加到全局 css 文件裡，這樣所有頁面都可以使用這個字體了～

微信截圖_20220717131852.png