前端性能优化——字体文件压缩

我们在开发前端的时候，经常会用到第三方字体库。一个字体文件少则几百KB，多则几十M，非常影响前端页面的展示速率。

在此我们使用一个npm插件--字蛛，对我们使用到字体文件进行压缩。

一、理解字蛛

字蛛是一个字体压缩器，它的工作原理，是将我们页面上使用到的字体，抽取到字体文件中。这样就缩小了字体文件。

字蛛支持压缩的文件格式暂时为ttf。

二、ttf字体文件准备

我之前在做字体压缩时，字体源文件为otf格式的，字蛛是不支持的。有好多在线站点支持字体文件格式转化，但是效果不好，转化后字体失真。

这里提供一个字体转化的工具 FontCreator

将字体文件打开后，另存为ttf格式即可。

三、使用字蛛

1、全局安装字蛛

npm install font-spider -g

2、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、执行脚本，生成字体文件

font-spider index.html

执行上述命令行，则可生成所需的字体文件到font目录下

参考demo 下载

前端性能优化——字体文件压缩相关推荐

前端性能优化-对图片进行后压缩发向后端
思路是使用filereader读取input的上传的图片,返回一个base64 传到img实例,绘制到canvas上并通过toDataURL方法进行压缩获取到返回的base64文件,我们接口要传fi ...
前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)
gzip主要用来压缩html,css,javascript等静态文本文件,gzip 压缩的比率通常在3~10 倍之间,压缩后的体积能达到只有原本的30%左右,这样就能大大节省服务器的网络带宽和大大提升 ...
前端服务器获取js文件偶尔慢_我所认识的前端性能优化
现象: 用户体验差网页太卡打不开(卡.慢) 服务器带宽流量(成本) 服务器压力从哪处理:各处的缓存地址缓存减少DNS的解析请求.预解析DNS(不是"解析DNS") TCP缓 ...
dll文件懒加载_前端性能优化
# 前端性能优化写在最前面:下面都是我对webpack的一些性能优化,想系统的学习性能优化方面的知识推荐大家看看这本书很系统感觉面试也能如鱼得水 ## 构建优化 ### webpack优化 ( ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
【前端性能优化实践】手把手教你实现webpack图片压缩插件
前言我想写一个系列:前端性能优化实践方案.网上虽然一搜一大把这样的文章,但大多缺乏体系化.也有很多讲性能优化的书籍,但其实想照着书上的知识进行实践,还是挺难的一件事. 这是该系列的第一篇文章由于自 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
每个前端工程师都应该懂的前端性能优化总结：
文章目录采用css雪碧图(css sprite/css图片精灵)技术在项目中,我们最好把css或者js文件进行合并或者压缩,尤其是在移动端开发的时候,如果css或者j s内容不是很多,我们可以采用 ...
Web前端性能优化，应该怎么做?
本文将分享一些前端性能优化的常用手段,包括减少请求次数.减小资源大小.各种缓存.预处理和长连接机制,以及代码方面的性能优化等方面. base64:尤其是在移动端,小图标可以base64(webpack ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

前端性能优化——字体文件压缩

前端性能优化——字体文件压缩相关推荐

最新文章

热门文章