Toggle navigation
卡尔-个人博客
网站首页
博客讯息
个人日记
代码笔记
网站模板
软件工具
友情链接
关于我
代码笔记
返回
笔记详情
web特殊字体,字蛛字体压缩
2019-01-24
817
字蛛根据网页所需文字压缩字体文件,达到优化浏览速度。字蛛安装和使用教程
网页中用到很多的特殊字体, 需要客户端安装字体还有客户端浏览器也支持字体, 客户端我们是不能确定的, 所以出现很多字体加载不了。 可以在css出添加`@font-face{}`让客户端流量器自动加载字体文件, [字体免费下载链接](https://www.fontke.com/ "字体免费下载链接") 不过一般下载都是完整的字体文件, 体积比较大, 这样使页面加载会很慢。 ##### 我们可以用字蛛这款神器来压缩字体, 它的原理是先将完整的字体包加载后, 根据网页页面对应存在的字体进行保留, 其余的字体删除,从而起到一个压缩效果, 它还会帮你自动备份原理完整的字体文件。 #### [字蛛官网链接](http://font-spider.org/ "字蛛官网")  使用流程: ###### 1.用node.js安装字蛛 `npm install font-spider -g` ###### 2.css用 `@font-face` 引入字体 ```css 例如: /* 汉仪力量黑字体 */ @charset “UTF-8”; @font-face { font-family: “HYLiLiangHeiJ”; /*字体命名*/ src: url(“../fonts/HYLiLiangHeiJ.woff”) format(“woff”), url(“../fonts/HYLiLiangHeiJ.ttf”) format(“truetype”), url(“../fonts/HYLiLiangHeiJ.eot”) format(“embedded-opentype”), url(“../fonts/HYLiLiangHeiJ.svg”) format(“svg”), url(“../fonts/HYLiLiangHeiJ.otf”) format(“opentype”); font-weight: normal; font-style: normal; } /*使用选择器指定字体*/ .home h1, .demo > .test { font-family: 'HYLiLiangHeiJ';/*直接应用*/ } //可引入单个或多个同类字体但不同类型的文件 //注意: 其中 ttf 类型的字体必须引入, 其他类型可有可无 ``` ###### 3.node.js执行字蛛压缩命令 `font-spider D:\fe\panda\Holland\*.html`(font-spider空格加html的路径地址) 正常就会loading 进行压缩了, 成功后出现对应字体文件的体积大小  ###### 4.,注意问题: 下载的字体包文件名改为英文,css文件引用的时候也改成同字体包一样的英文名; css表中eot和opentype格式先注释掉,不然压缩会提示错误,字蛛暂不支持这两种格式,压缩完 后把eot和 opentype格式复原(不复原在手机上测试字体未生效); 压缩完成后 fonts文件夹中有一个备份,其他的字体文件就只有几kb或几十kb了;把备份删掉就可以了。
标签:
HTML
CSS
字体
上一篇: Linxu查询进程和IP连接
下一篇: SendCloud邮箱验证
博客排行
1
Amazon EC2免费VPS防止超额被扣钱三大方法:流量 硬盘读写 运行时长
2
Hostry 外国VPS测评
3
AutoCAD 2017 2018 2019 2020教育正版免费下载使用
4
JustHost 外国VPS测评
5
GitHub Pages免费网站搭建
笔记排行
SSpanel 配置支付宝当面付f2fpay
宝塔面板配置SSPanel-V3-mod 前端搭建教程
Lightsail AWS SSH连接和创建root用户
SSpanel 配置QQ邮箱
SSPanel-V3-mod 后端搭建教程
paypal表单式在线付款
web特殊字体,字蛛字体压缩
云标签
更多标签 »
工具
软件
Javascript
Linxu
CSS
PHP
服务器
SS
HTML
网站模板
数据库
Nginx
ThinkPHP5
Python
SSpanel
mongoDB
企业网站
Jquery
远程连接
加速
×
扫一扫,关注我的微信!
在线联系
在线QQ
微信扫码