由于公司業(yè)務(wù)的原因，有些頁面上強(qiáng)制需要某些字體（PS：系統(tǒng)的字體也確實(shí)丑）。由于導(dǎo)入整個(gè)字體ttf文件實(shí)在龐大，一般都是在3-4M。而項(xiàng)目中只用到個(gè)別的特殊文字，完全不需要引入整個(gè)字體文件。因此就延伸出了這篇文章，記錄下如何自定義某些字體的過程。
獲取源字體
- 項(xiàng)目中用的是
漢儀書宋二簡字體，從某些網(wǎng)站上扒了ttf格式文件字體下來。正常網(wǎng)上下載下來的中文字體命名都是中文命名。如下圖是漢儀書宋二簡.ttf文件
從網(wǎng)上下載下來的文件
- 實(shí)際使用中卻遇到一個(gè)坑，就是decode失敗。根據(jù)網(wǎng)上下載的ttf文件，本人命名為
HYSSEJ.ttf。于是扒了很多文章，最終在Stack Overflow上找到了decode失敗的原因
大致意思是源字體文件已經(jīng)收到了污染。
Failed to decode downloaded font: http://0.0.0.0:8080/static/HYSSEJ.ttf
OTS parsing error: cmap: Failed to parse table
decode失敗警告
- 那只能在重新生成源ttf文件，找了一個(gè)網(wǎng)站感覺還算不錯(cuò)，該網(wǎng)站上下載下來的源文件命名不是中文的命名。字體下載網(wǎng)頁
生成自己所需要的字體
-
創(chuàng)建一個(gè)目錄，將源字體文件導(dǎo)入進(jìn)來。整體結(jié)構(gòu)目錄如下。有個(gè)隱藏的
.font-spider文件夾不用管它，它是運(yùn)行后自己備份了源文件的ttf。
目錄結(jié)構(gòu) 在目錄底下創(chuàng)建一個(gè)
demo.html文件，將項(xiàng)目中用到的字體都寫到body里面。demo.html的代碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*聲明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('./5cac63e38203f.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*使用選擇器指定字體*/
* {
font-family: 'pinghei';
}
</style>
</head>
<body>
<!-- 添加自己項(xiàng)目中用到的字體 -->
<div>請輸入您的姓名請輸入您的手機(jī)請輸入驗(yàn)證碼請選擇時(shí)間段發(fā)送驗(yàn)證</div>
<div>個(gè)人信息收集聲明</div>
</body>
</html>
安裝font-spider全局組件到本地。按照官網(wǎng)的步驟，先安裝全局的
font-spider。本人使用的是sudo cnpm install font-spider -g來安裝快一點(diǎn)。這步相信用會(huì)用vue的人都懂得安裝。不細(xì)說了~執(zhí)行字體壓縮命令，將
demo.html中有用到的文字抽成一個(gè)新的字體文件。命令如下font-spider demo.html可以看到本來4201KB的壓到了59KB
RadishdeMacBook-Pro:font Radish$ font-spider demo.html
Font family: pinghei
Original size: 4207.916 KB
Include chars: '()*-./0123456789:;@DFWabcefghilmnoprstuwy{}上下與世東個(gè)之了二人以體使保信入出則到前功動(dòng)衛(wèi)即參及發(fā)取古可同
名啟器地圳場址城聲大天太奧姓字存守安定州已市并廣店開當(dāng)息您意愿成手擇指按收旅日時(shí)明月本機(jī)條格次款段沙洋活海消深用百的盛碼
確示立粉約細(xì)經(jīng)維耀茂西規(guī)解認(rèn)證請讀賽輸遠(yuǎn)迪送選遵鄭都里長間閱雅集預(yù)驗(yàn)，
Chars length: 170
Font id: a62f35efe4a87f695ab35be0362fe40d
CSS selectors: *
Font files:
File 5cac63e38203f.ttf created: 59.308 KB
使用自定義字體
- 將字體文件導(dǎo)入到項(xiàng)目中，并且在
APP.VUE中使用它，設(shè)置body的font-family為自定義字體。再刷新下頁面，就可以看到自定義字體已經(jīng)生效。
<style lang="scss">
@font-face {
font-family: HYSSEJ;
src: url('/static/5cac63e38203f.ttf');
font-weight: normal;
font-style: normal;
}
#app{
width: 100%;
height: 100%;
}
body, html{
font-family: HYSSEJ !important;
}
</style>
最終效果頁面
拓展
使用畫布也可以用自定義的字體。
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
// 背景圖
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);
// 標(biāo)題
ctx.font = '200 50px HYSSEJ';
ctx.fillStyle = '#f88fa9';
ctx.textAlign = 'center';
ctx.fillText('您已成功預(yù)約' , width / 2, 100);
