鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ webpack中字體文件過(guò)大問(wèn)題怎么解決？

webpack中字體文件過(guò)大問(wèn)題怎么解決？

項(xiàng)目中需要使用第三方字體
我在css中用font-face來(lái)創(chuàng)建定義了第三方字體
但是字體文件太大了。導(dǎo)致頁(yè)面字體加載時(shí)間超過(guò)4s左右
可以用font-spider來(lái)解決，但是對(duì)于動(dòng)態(tài)獲取到的文字有行不通了
所以請(qǐng)問(wèn)有什么可以壓縮字體文件的方法嗎？或者其他辦法

回答
編輯回答
舊言

大佬在哪里啊

2018年9月1日 01:05
編輯回答
維他命

字體文件具體有多大？
我想到兩種方案

  1. 運(yùn)用緩存加速。譬如，字體文件上反向代理，上CDN。提高用戶首次加載時(shí)的速度。首次加載之后，字體文件即會(huì)在用戶本地緩存，速度會(huì)快很多。
  2. 生成文字圖片。原理：用ImageMagick，加入文字和字體可以生成特定字體的且背景透明的圖片，并且圖片的size很小，從幾kb到十幾kb再到幾十kb。這樣加載速度會(huì)非常快，效果上文字圖片效果與直接使用字體差別很小。這也是我之前的做法。
2017年6月6日 13:30
編輯回答
清夢(mèng)

按需加載把，require.ensure ，百度搜webpack 按需加載 應(yīng)該很多答案，就是先加載頁(yè)面，然后等字體下載完成，再應(yīng)用字體。

2017年12月21日 07:19