技术分享：font-spider（字蛛）的正确打开方式
前言
最近在部署vue項目之后，在打開網(wǎng)頁的時候，ttf文件下載時間實在是太久了，在經(jīng)過合理的運用搜索引擎之后，可能自己的固化思維消化不了大佬們給出的方案，于是在他們的基礎(chǔ)之上做了一些小小的改動，便敘文記之。
1. 引入font-spider的依賴
首先我們執(zhí)行npm install font-spider -g引入依賴， 執(zhí)行完成后，可以輸入font-spider -V來檢查是否引入成功
2. 在根目錄下創(chuàng)建三個文件
2.1 fonts
這里放入原字體包，Lato-Medium.ttf、Lato-Bold.ttf 這里可以更換為自己想要用到的ttf字體包
2.2 index.css
在這里設(shè)置@font-face和對應(yīng)的class元素,為了方便比較，我們引入兩個字體來看對比
@font-face {font-family: 'Lato-Medium';src: url('./fonts/Lato-Medium.eot');src:url('./fonts/Lato-Medium.eot?#font-spider') format('embedded-opentype'),url('./fonts/Lato-Medium.woff') format('woff'),url('./fonts/Lato-Medium.ttf') format('truetype'),url('./fonts/Lato-Medium.svg') format('svg');font-weight: normal;font-style: normal; } .medium {font-family:'Lato-Medium'; } @font-face {font-family: 'Lato-Bold';src: url('./fonts/Lato-Bold.eot');src:url('./fonts/Lato-Bold.eot?#font-spider') format('embedded-opentype'),url('./fonts/Lato-Bold.woff') format('woff'),url('./fonts/Lato-Bold.ttf') format('truetype'),url('./fonts/Lato-Bold.svg') format('svg');font-weight: normal;font-style: normal; } .bold {font-family:'Lato-Bold'; } 復(fù)制代碼這里，我們的css工作就做完了，接下來就操作html文件吧
2.3 index.html
這里首先在<head>處要引入index.css文件<link rel="stylesheet" href="index.css">，然后在<body>處壓縮我們想要的字體吧，這里只能壓縮靜態(tài)字體哦
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>font spider</title><link rel="stylesheet" href="index.css"> </head><body><div><!-- 這里對應(yīng)的是Bold的壓縮包 --><div class="bold">abcdefghijklmnopqrstuvwxyz</div><!-- 這里對應(yīng)的是Medium的壓縮包 --><div class="medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div><!-- 這寫在class元素之外的就沒有對應(yīng)的壓縮包了 -->0123456789</div> </body></html> 復(fù)制代碼這里html里面的寫法只會把小寫的a～z壓縮成Lato-Bold字體，也就是是說Lato-Bold這個ttf文件在被壓縮之后，內(nèi)部只包含了a～z的字體，Lato-Medium同理。
3.生成新的ttf包
做完上面的這些操作之后，就可以執(zhí)行font-spider index.html生成新的壓縮ttf文件了，這個時候，不僅會生成ttf文件，還會生成eot、woff、svg這些文件，我們?nèi)∥覀円玫降膖tf文件即可
4.應(yīng)用到自己的項目中
將生成的ttf文件放到自己的項目文件目錄夾下，然后在css文件引入的時候，需要這么寫src: url("../fonts/Lato-Bold.ttf") format('truetype');
@font-face {font-family: 'Lato-Bold';src: url("../fonts/Lato-Bold.ttf") format('truetype');font-weight: normal;font-style: normal; } 復(fù)制代碼寫在最后
在初次接觸這個問題的時候，我看到的都是用.html的方式來使用font-spider方法的，當時我固化思維的就一個勁的查詢Vue怎么使用font-spider，搜索結(jié)果不盡人意，當時有一種挫敗感，什么辣雞玩意兒，都不支持vue...后面在尋求多方幫助之后，自己沉下心來，終于解決了這個問題。
如果大家想學(xué)習(xí)前端方面的技術(shù)，我把我多年的經(jīng)驗分享給大家，還有一些學(xué)習(xí)資料，分享Q群：1046097531
?
?
總結(jié)
以上是生活随笔為你收集整理的技术分享：font-spider（字蛛）的正确打开方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java 计算圆的面积
- 下一篇： SiT9365：超低抖动0.23ps差分