前言

在微信小程序中，我們在wxss文件中通過font-family這一CSS屬性來設(shè)置文本的字體，并且微信小程序有自身支持的內(nèi)置字體，可以通過代碼提示查看微信小程序支持字體：

這些字體具體是什么樣式可以參考：

微信小程序--字體展示_別動我的指針的博客-CSDN博客字體一font-family:‘Courier New’, Courier, monospace;字體二font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;字體三font-family:‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, ...https://blog.csdn.net/include_IT_dog/article/details/98382276

在實(shí)際開發(fā)中，我們的UI設(shè)計師可能會在繪制原型圖的時候用到多種字體，這些字體不屬于微信小程序的內(nèi)置字體，接下來將會詳細(xì)講解怎樣在微信小程序中使用這些字體；

1.字體導(dǎo)入流程

微信小程序?yàn)殚_發(fā)者提供了導(dǎo)入外部字體專用的API：wx.loadFontFace

其官方文檔如下：

wx.loadFontFace(Object object) | 微信開放文檔

具體的使用規(guī)范可以自行參考上述文檔，接下來著重說明幾個需要注意的問題：

1. 通過source參數(shù)指定字體文件資源，可以是本地資源，也可以是網(wǎng)絡(luò)資源，本示例中采用網(wǎng)絡(luò)資源；如果是網(wǎng)絡(luò)資源，字體鏈接必須是https的，不能是http，否則無法正常導(dǎo)入字體資源；
2. 微信小程序?qū)τ谒С值淖煮w格式有限制，但文檔中沒有明確說明，經(jīng)實(shí)測，ttf|ttc|otf等常見的字體格式都是支持的
3. 字體鏈接必須是同源下的，或開啟了cors支持；所謂cors，即跨域資源共享，也就是說如果小程序和存放字體鏈接的服務(wù)器不是同源的，需要開啟cors支持，使得小程序能夠正常訪問服務(wù)器，獲取到字體資源；在本示例中，字體資源通過nginx進(jìn)行部署，在其中添加cors支持即可（后面會詳細(xì)講到）

明確注意事項(xiàng)之后我們來看一下具體的導(dǎo)入方式（由于需要導(dǎo)入的字體文件較多，在app.js中進(jìn)行批量導(dǎo)入）：

以在app.js文件中導(dǎo)入DIN_Alternate_Bold.ttf為例：

App({data: {},getFonts(name) //導(dǎo)入外部字體{let url = "yourURL" //自己服務(wù)器的域名(或IP)let source = 'url(' + url + name + ')'console.log(source)wx.loadFontFace({family: name.substring(0, name.length - 4), //名稱去掉后綴source: source,global: true,success(res) {console.log("load " + name.substring(0, name.length - 4) + " success")//   console.log(res)},fail(res) {console.log("load " + name.substring(0, name.length - 4) + " failed")console.log(res) //出錯則打印信息}})},onLaunch() {console.log('app.js載入')this.getFonts('DIN_Alternate_Bold.ttf')},globalData: {}
})

我們通過getFonts方法調(diào)用了官方提供的API來導(dǎo)入外部字體文件，然后在onLaunch中調(diào)用方法即可在app.js載入的時候加載外部字體資源；

對wx.loadFontFace中的參數(shù)進(jìn)行簡單的說明：

1. family：自定義的字體名稱（這里的名稱完全自定義，但需與wxss中使用的名稱相一致）
2. source：字體資源的地址；格式：url(https://yourURL/DIN_Alternate_Bold.ttf)
3. global：字體是否全局生效，因?yàn)槲覀冊赼pp.js中導(dǎo)入，需要設(shè)置全局生效，否則各頁面的wxss文件中無法使用這里導(dǎo)入的字體樣式
4. success/fail：字體資源導(dǎo)入成功/失敗的回調(diào)函數(shù)，可以打印一些提示信息

---

字體資源導(dǎo)入成功后，我們就可以在wxss文件中使用了，示例如下：
在app.wxss中：

.DIN_Alternate_Bold{font-family: 'DIN_Alternate_Bold';
}

這里的DIN_Alternate_Bold是在上述js代碼中自定義的字體名稱（通過設(shè)置family）

這樣的話哪一部分文本需要設(shè)置為DIN_Alternate_Bold的字體樣式，只需class = "DIN_Alternate_Bold"即可，比較方便

2.字體資源部署

在上文的注意事項(xiàng)中已說明，我們需要將字體資源部署到nginx服務(wù)器上，并開啟cros支持，而且必須能夠通過https訪問，接下來我們逐步解決這些問題；

2.1服務(wù)器準(zhǔn)備

本示例中使用的是華為云ECS服務(wù)器（操作系統(tǒng)是ubuntu），并配置好了安全組規(guī)則，開放了80端口（nginx的默認(rèn)端口）

需要注意的是，如果微信小程序需要上線，則使用的服務(wù)器必須有公網(wǎng)ip；如果只是本地學(xué)習(xí)測試使用，則可以使用虛擬機(jī)；

2.2nginx安裝

2.2.1 nginx下載

訪問官網(wǎng)：nginx: download

找到想要下載的版本：

建議版本呢不要太低，本示例中使用的是1.20.2

下載完成后傳輸?shù)椒?wù)器上，通過tar zxvf nginx-1.20.2.tar.gz -C /opt/指令解壓即可

nginx-1.20.2.tar.gz為壓縮包的名稱；/opt/為解壓的路徑，可以自定義

2.2.2 nginx安裝

首先進(jìn)入nginx的解壓目錄：

然后配置ssl：

執(zhí)行指令：./configure --prefix=/usr/local/nginx --with-http_ssl_module

./configure是對nginx進(jìn)行配置；--prefix是nginx的安裝路徑；--with-http_ssl_module表面開啟ssl支持；

接下來編譯安裝：

執(zhí)行指令：make && make install

然后等待編譯安裝完成即可；

安裝完成后進(jìn)入安裝路徑/usr/local/nginx，查看nginx的版本即安裝模塊：sbin/nginx -V

2.2.3 nginx啟動/關(guān)閉

nginx啟停的指令均在sbin文件夾內(nèi)：

• nginx啟動：sbin/nginx

啟動完成后通過ps -ef | grep nginx查看是否啟動成功：

如上所示即說明啟動成功；

也可以通過netstat -anp | grep 80來查看：

• nginx關(guān)閉：sbin/nginx -s stop

注意事項(xiàng)：

1. nginx如果無法正常啟停，如啟動時報錯端口已占用，則可以通過netstat -anp | grep 80來查看80端口是否已占用，如果是，則結(jié)束進(jìn)程即可（kill -9 PID)；
2. 如果結(jié)束進(jìn)程后nginx:master已結(jié)束，但出現(xiàn)了nginx:worker，并且殺死一個進(jìn)程后，會自動再啟動一個worker進(jìn)程，具體表現(xiàn)為進(jìn)程號順延；這表明出現(xiàn)了僵尸進(jìn)程，僅僅通過kill -9無法結(jié)束進(jìn)程，需要使用killall -9 nginx，殺死與nginx相關(guān)的所有進(jìn)程；

2.2.4 nginx使用

安裝部署完成后，在瀏覽器中輸入http://你的服務(wù)器ip/即可訪問nginx：

如果無法訪問，首先考慮是否配置了安全組規(guī)則，開放80端口（云服務(wù)器）

然后考慮防火墻設(shè)置，如果是因?yàn)榉阑饓﹂_啟導(dǎo)致無法在瀏覽器中訪問，則可以考慮先關(guān)閉防火墻：

• 開啟防火墻：systemctl start firewalld.service
• 查看防火墻狀態(tài)：systemctl status firewalld.service
• 關(guān)閉防火墻：systemctl stop firewalld.service

如果都解決不了問題，可以考慮重新部署安裝nginx，因?yàn)榭赡苁欠?wù)器上之前通過yum或apt安裝過nginx導(dǎo)致的，在重新安裝部署之前，可以通過find / -name nginx查找服務(wù)器上所有與nginx相關(guān)的文件，然后逐一刪除后再重新部署（注意，刪除時一定要弄清這個文件的作用是什么，以免誤刪）

2.2.5 nginx配置文件

路徑：/usr/local/nginx/conf/nginx.conf，默認(rèn)配置的是http server；

設(shè)置默認(rèn)打開的頁面：

設(shè)置狀態(tài)碼為500，502，503，504時出現(xiàn)的頁面

其他配置下文會詳細(xì)介紹；

2.3 配置ssl證書

首先我們需要申請ssl證書，并和域名進(jìn)行綁定

證書申請可以參考：2022阿里云免費(fèi)SSL證書申請全過程（圖文詳解）-阿里云開發(fā)者社區(qū)

域名綁定自行查找文檔進(jìn)行設(shè)置即可；

申請了ssl證書之后我們可以下載.key和.pem兩個文件，用于nginx的配置：

然后打開/usr/local/nginx/conf/nginx.conf文件

首先先不修改默認(rèn)配置文件，定位到http server：

在該server外部新增https server，內(nèi)容如下：

server{listen       443 ssl;  #端口號server_name  yourURL;  #服務(wù)器 (域名或ip 示例:localhost)ssl_certificate   /opt/certs/gongzai.xyz.pem; # .pem文件ssl_certificate_key  /opt/certs/gongzai.xyz.key; # .key文件ssl_session_cache    shared:SSL:1m;ssl_session_timeout  5m;ssl_protocols TLSv1.2;ssl_prefer_server_ciphers on;ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;location / {root   html;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# 配置字體資源的訪問路徑location ~ .*\.(ttf|otf|ttc|TTF)$ { root /usr/local/nginx/html/ttfs;expires 10d;}}

以上內(nèi)容，除了注釋說明的地方需要根據(jù)實(shí)際情況調(diào)整之外，其余參數(shù)固定即可；

對于以下代碼進(jìn)行說明

# 配置字體資源的訪問路徑
location ~ .*\.(ttf|otf|ttc|TTF)$ { root /usr/local/nginx/html/ttfs;expires 10d;
}

ttf|otf|ttc|TTF為文件資源后綴； /usr/local/nginx/html/ttfs為字體資源的存儲路徑；

該配置表明，想要在訪問nginx服務(wù)器上的字體資源，則到對應(yīng)路徑下去尋找相應(yīng)的資源；

配置好https server之后，回到http server，刪除其中內(nèi)容，只保留：

server {listen       80; # 默認(rèn)端口號server_name  yourURL; #服務(wù)器 (域名或ip 示例:localhost)rewrite ^(.*)$ https://$host$1 permanent; #將http請求轉(zhuǎn)發(fā)為https請求
}

至此ssl證書配置完畢，重啟nginx服務(wù)器即可；

之后想要訪問字體資源，則在瀏覽器中輸入https://yourURL/字體資源名稱即可下載，在微信小程序中訪問方式相同

2.4 開啟cros支持

打開nginx的配置文件nginx.conf：

在location中添加add_header Access-Control-Allow-Origin *;即可，如下：

location ~ .*\.(ttf|otf|ttc|TTF)$ {add_header Access-Control-Allow-Origin *;root /usr/local/nginx/html/ttfs;expires 10d;
}

該行代碼的含義為在HTTP響應(yīng)中添加一個名為"Access-Control-Allow-Origin"的頭部字段，并將其值設(shè)置為"*"，這個頭部字段的作用是指定允許訪問資源的源（origin），即哪些域名可以與服務(wù)器進(jìn)行跨域請求；

當(dāng)瀏覽器向服務(wù)器發(fā)送跨域請求時，服務(wù)器會返回這個頭部字段的值作為響應(yīng)頭的一部分。通過將該字段的值設(shè)置為"*"，表示允許來自任何域名的請求都能夠得到響應(yīng)。換句話說，服務(wù)器允許來自任何域名的前端應(yīng)用程序通過AJAX、Fetch API等方法來獲取資源

因此通過這樣的設(shè)置，我們的小程序就可以正常獲取字體資源了（否則真機(jī)調(diào)試會無法加載字體資源）

后記

如果在微信開發(fā)者工具中報錯：

可以不予理會，官方文檔中也有說明，該報錯不會對字體文件的正常導(dǎo)入造成影響；

此外，如果字體文件比較大（10M以上），或者需要導(dǎo)入的字體資源比較多，可以考慮設(shè)置一個資源加載界面，等到所有資源加載完畢后再進(jìn)入小程序，以免造成卡頓等問題；

本文介紹的nginx部署字體資源并通過https進(jìn)行請求屬于最簡單的一種方式，作者能力有限，如果優(yōu)化需求請自行查找資料解決

如果文章中有錯誤的地方歡迎指正！ 如果遇到其他問題，歡迎在評論區(qū)討論交流！