前端性能优化——字体文件压缩
生活随笔
收集整理的這篇文章主要介紹了
前端性能优化——字体文件压缩
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
我們在開發(fā)前端的時候，經(jīng)常會用到第三方字體庫。一個字體文件少則幾百KB，多則幾十M，非常影響前端頁面的展示速率。
在此我們使用一個npm插件--字蛛，對我們使用到字體文件進行壓縮。
一、理解字蛛
字蛛是一個字體壓縮器，它的工作原理，是將我們頁面上使用到的字體，抽取到字體文件中。這樣就縮小了字體文件。
字蛛支持壓縮的文件格式暫時為ttf。
二、ttf字體文件準備
我之前在做字體壓縮時，字體源文件為otf格式的，字蛛是不支持的。有好多在線站點支持字體文件格式轉化，但是效果不好，轉化后字體失真。
這里提供一個字體轉化的工具?FontCreator
將字體文件打開后，另存為ttf格式即可。
三、使用字蛛
1、全局安裝字蛛
npm install font-spider -g2、css文件中引入字體
/** 聲明字體 **/ @font-face {font-family: 'PMZD';src: url('../font/PMZD.eot');src: url('../font/PMZD.eot?#font-spider') format('embedded-opentype'), url('../font/PMZD.woff') format('woff'),url('../font/PMZD.ttf') format('truetype'),url('../font/PMZD.svg') format('svg'); }3、html中填入需要的字體，如下
<!DOCTYPE html> <html lang="en"> <head><title>demo</title><link rel="stylesheet" href="css/font.css"></link> </head> <body><div style="font-family: 'PMZD';">龐門正道字體測試代碼</div> </body> </html>4、執(zhí)行腳本，生成字體文件
font-spider index.html執(zhí)行上述命令行，則可生成所需的字體文件到font目錄下
參考demo 下載
總結
以上是生活随笔為你收集整理的前端性能优化——字体文件压缩的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 厦门计算机中专学校,厦门十大中专学校
- 下一篇： 2017年html5行业报告,云适配发布