VUE自定義個(gè)別字體

由于公司業(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>請(qǐng)輸入您的姓名請(qǐng)輸入您的手機(jī)請(qǐng)輸入驗(yàn)證碼請(qǐng)選擇時(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ā)取古可同
名啟器地圳場(chǎng)址城聲大天太奧姓字存守安定州已市并廣店開當(dāng)息您意愿成手擇指按收旅日時(shí)明月本機(jī)條格次款段沙洋活海消深用百的盛碼
確示立粉約細(xì)經(jīng)維耀茂西規(guī)解認(rèn)證請(qǐng)讀賽輸遠(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è)置bodyfont-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);

字體合并網(wǎng)站

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市工秩,隨后出現(xiàn)的幾起案子尸饺,更是在濱河造成了極大的恐慌,老刑警劉巖助币,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件侵佃,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡奠支,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門抚芦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來倍谜,“玉大人,你說我怎么就攤上這事叉抡《蓿” “怎么了?”我有些...
    開封第一講書人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵褥民,是天一觀的道長季春。 經(jīng)常有香客問我,道長消返,這世上最難降的妖魔是什么载弄? 我笑而不...
    開封第一講書人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任耘拇,我火速辦了婚禮,結(jié)果婚禮上宇攻,老公的妹妹穿的比我還像新娘惫叛。我一直安慰自己,他們只是感情好逞刷,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開白布嘉涌。 她就那樣靜靜地躺著,像睡著了一般夸浅。 火紅的嫁衣襯著肌膚如雪仑最。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評(píng)論 1 314
  • 那天帆喇,我揣著相機(jī)與錄音警医,去河邊找鬼。 笑死番枚,一個(gè)胖子當(dāng)著我的面吹牛法严,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播葫笼,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼深啤,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了路星?” 一聲冷哼從身側(cè)響起溯街,我...
    開封第一講書人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎洋丐,沒想到半個(gè)月后呈昔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡友绝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年堤尾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片迁客。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡郭宝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掷漱,到底是詐尸還是另有隱情粘室,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布卜范,位于F島的核電站衔统,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜锦爵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一舱殿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧棉浸,春花似錦怀薛、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嗡害,卻和暖如春焚碌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背霸妹。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來泰國打工十电, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人叹螟。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓鹃骂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親罢绽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子畏线,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361