前言

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

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

微信小程序--字體展示_別動(dòng)我的指針的博客-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í)際開(kāi)發(fā)中，我們的UI設(shè)計(jì)師可能會(huì)在繪制原型圖的時(shí)候用到多種字體，這些字體不屬于微信小程序的內(nèi)置字體，接下來(lái)將會(huì)詳細(xì)講解怎樣在微信小程序中使用這些字體；

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

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

其官方文檔如下：

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

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

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

明確注意事項(xiàng)之后我們來(lái)看一下具體的導(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) //出錯(cuò)則打印信息}})},onLaunch() {console.log('app.js載入')this.getFonts('DIN_Alternate_Bold.ttf')},globalData: {}
})

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

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

1. family：自定義的字體名稱（這里的名稱完全自定義，但需與wxss中使用的名稱相一致）
2. source：字體資源的地址；格式：url(https://yourURL/DIN_Alternate_Bold.ttf)
3. global：字體是否全局生效，因?yàn)槲覀冊(cè)赼pp.js中導(dǎo)入，需要設(shè)置全局生效，否則各頁(yè)面的wxss文件中無(wú)法使用這里導(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代碼中自定義的字體名稱（通過(guò)設(shè)置family）

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

2.字體資源部署

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

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

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

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

2.2nginx安裝

2.2.1 nginx下載

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

找到想要下載的版本：

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

下載完成后傳輸?shù)椒?wù)器上，通過(guò)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是對(duì)nginx進(jìn)行配置；--prefix是nginx的安裝路徑；--with-http_ssl_module表面開(kāi)啟ssl支持；

接下來(lái)編譯安裝：

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

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

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

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

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

• nginx啟動(dòng)：sbin/nginx

啟動(dòng)完成后通過(guò)ps -ef | grep nginx查看是否啟動(dòng)成功：

如上所示即說(shuō)明啟動(dòng)成功；

也可以通過(guò)netstat -anp | grep 80來(lái)查看：

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

注意事項(xiàng)：

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

2.2.4 nginx使用

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

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

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

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

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

2.2.5 nginx配置文件

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

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

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

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

2.3 配置ssl證書(shū)

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

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

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

申請(qǐng)了ssl證書(shū)之后我們可以下載.key和.pem兩個(gè)文件，用于nginx的配置：

然后打開(kāi)/usr/local/nginx/conf/nginx.conf文件

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

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

server{listen       443 ssl;  #端口號(hào)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;}# 配置字體資源的訪問(wèn)路徑location ~ .*\.(ttf|otf|ttc|TTF)$ { root /usr/local/nginx/html/ttfs;expires 10d;}}

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

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

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

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

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

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

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

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

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

2.4 開(kāi)啟cros支持

打開(kāi)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)中添加一個(gè)名為"Access-Control-Allow-Origin"的頭部字段，并將其值設(shè)置為"*"，這個(gè)頭部字段的作用是指定允許訪問(wèn)資源的源（origin），即哪些域名可以與服務(wù)器進(jìn)行跨域請(qǐng)求；

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

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

后記

如果在微信開(kāi)發(fā)者工具中報(bào)錯(cuò)：

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

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

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

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