前端性能优化——字体文件压缩
生活随笔
收集整理的這篇文章主要介紹了
前端性能优化——字体文件压缩
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
我們?cè)陂_(kāi)發(fā)前端的時(shí)候，經(jīng)常會(huì)用到第三方字體庫(kù)。一個(gè)字體文件少則幾百KB，多則幾十M，非常影響前端頁(yè)面的展示速率。
在此我們使用一個(gè)npm插件--字蛛，對(duì)我們使用到字體文件進(jìn)行壓縮。
一、理解字蛛
字蛛是一個(gè)字體壓縮器，它的工作原理，是將我們頁(yè)面上使用到的字體，抽取到字體文件中。這樣就縮小了字體文件。
字蛛支持壓縮的文件格式暫時(shí)為ttf。
二、ttf字體文件準(zhǔn)備
我之前在做字體壓縮時(shí)，字體源文件為otf格式的，字蛛是不支持的。有好多在線站點(diǎn)支持字體文件格式轉(zhuǎn)化，但是效果不好，轉(zhuǎn)化后字體失真。
這里提供一個(gè)字體轉(zhuǎn)化的工具?FontCreator
將字體文件打開(kāi)后，另存為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';">龐門(mén)正道字體測(cè)試代碼</div> </body> </html>4、執(zhí)行腳本，生成字體文件
font-spider index.html執(zhí)行上述命令行，則可生成所需的字體文件到font目錄下
參考demo 下載
總結(jié)
以上是生活随笔為你收集整理的前端性能优化——字体文件压缩的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 厦门计算机中专学校,厦门十大中专学校
- 下一篇： TPS54560设计降压模块需要注意事项