web字体文件过大优化方案

使用font-spider[字蛛]对ttf文件进行压缩

原理：

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

font-spirder 官网：http://font-spider.org/

第一步：先安装好 NodeJS,然后执行：

npm install font-spider -g

第二步：在CSS中使用WebFont:

/*声明 WebFont*/
@font-face {font-family: 'pinghei';src: url('../font/pinghei.eot');src:url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),url('../font/pinghei.woff') format('woff'),url('../font/pinghei.ttf') format('truetype'),url('../font/pinghei.svg') format('svg');font-weight: normal;font-style: normal;
}/*使用选择器指定字体*/
.home h1, .demo > .test {font-family: 'pinghei';
}

1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

2. 开发阶段请使用相对路径的 CSS 与 WebFont

第三步：运行font-spider命令：

font-spider ./demo/*.html

页面依赖的字体将会自动压缩好，原 .ttf 字体会备份。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

使用结果如下：

1、使用BootStrap的 Glyphicons Halflings ,由45KB 压缩至 2KB，而且生成.eot等文件；

而自己加载的苹方字体原来11M，压缩后还是11M，未被压缩，也未生成.eot等文件，效果并不理想。

2、文件夹中多了一个存放压缩前字体的 font-spider文件夹，对原字体进行了备份。

web字体文件过大优化方案相关推荐

web字体库加载优化_优化Web字体以提高性能：最新技术
web字体库加载优化 This article is part of a series created in partnership with SiteGround. Thank you for su ...
vue打包生成的js文件过大优化
vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后项目打包之后js文件太大问题问题描述 1.使用cdn引入不怎么改变 ...
web引入font字体文件太大，字体抽取
当只有一个活动页面或者一小段文字需要引入特殊字体,字体文件往往会有十几兆或者几十兆,特别在移动端或者弱网情况下有相当差的体验,一个14M左右的文件就需要加载12秒... 所以针对一些小范围使用字体文件 ...
小猿圈web前端之网站性能优化方案
现在前端不仅要能做出一个网站页面,还要把这个页面做的炫酷,那需要很大程度的优化,那么怎么优化才更好呢?小猿圈总结了一下自己优化的方案,感兴趣的朋友可以看一下. 一般网站优化都是优化后台,如接口的响应时 ...
html字体文件太大,css字体文件包太大无法引入怎么处理？
前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案: 1.使用photoshop将文本图层单独导出成图片; 2.直接引入改字体的字体库.ttf文件首先第一种方案的 ...
android字体文件过大,加载字体文件过大的问题，不是icon，而是fontFamily
目前在写app时遇到ttf文件加载太大了,放本地打包比app还大(差不多了),放服务器加载太慢,于是乎想要看看能不能把这个ttf字体包搞小一点. 首先是加载字体文件的loadFontFace,插件市场 ...
html字体文件过大导致加载缓慢如何解决？
在网页设计中,美工通常要求前端使用自己的定义的字体,比如苹果的字体PingFangMedium.ttf, 而实际上除了英文和数字好看外,中文并不好看,特别是windows下,中文发虚.但是字体文件却特 ...
javascript 如何动态引导web字体文件
宝贝详情页设计,新媒体设计等web应用中,需要一次性引导大量字体文件.woff.引导时,大量字体文件导入到前端必定耗时直接影响网页性能,本文给出javascript动态引导字体的方法可快速提高前端效率 ...
Java Web 实现文件多线程分片下载方案
背景需求最近发现系统中有不少功能的下载文件涉及到较大文件当超过1G的文件下载时,直接通过浏览器下载,可能出现下载失败现象下载失败表现为下载文件损坏,或重复重试下载大文件的下载会因为网络波动.会 ...

web字体文件过大优化方案

web字体文件过大优化方案相关推荐

最新文章

热门文章