font-spider-plus,字体压缩插件使用笔记
font-spider-plus使用笔记, fsp是一个腾讯的大佬改版后的font-soider
主要思路是 采集线上网页使用到的字体,从字体文件中分离出来,完成大幅度压缩,
1,npm i font-spider-plus -g
2,css中定义好font-face (ttf需要存在),其他配好可自动生成,不配则不会,
有个坑,如果是webpack打包的stylus,sass等,配上不存在的问题会抱错,
而且还有个坑,可能是压缩的问题,fontface放在最前面 莫名其妙消息了一行,我放在了后面一行
3,需要压缩的本地webfont 比如 fsp *.html,home/*.htm
4,执行fsp init 生成配置文件fspconfig.js
localPath: "../font", 是本地路径,把要需要压缩的字体文件放在里面,待会会生成压缩好的文件夹
onlintpath: "../font", 是线上的地址,比如开发环境里面的字体路径就是他
url: "http://127.0.0.1:5199/play.html" 是线上的网址,会根据请求和css收集要压缩的字体文件和文字
最后执行,fsp run
注意: 是到线上取到要压缩的字体 和 用到的文字 在本地的字体文件进行压缩,
特别是路径要注意,本地的,他会生成一个fsp的虚拟文件,需要上一层 ../ 再取要的路径
建议:开发完成后,在本地开发环境作为线上,拿到压缩好的字体文件,然后替换字体文件,编译后放服务器
可在任意目录下完成操作
ps:
1,我修改了 本地modules的备份文件夹的名字,
2,weboack,字体的url-loader建议名字不用hash,用原来的 '[name].[ext]',然后才能和本地的原文件对得上
font-spider-plus,字体压缩插件使用笔记的更多相关文章
- Linux文件压缩与打包笔记
linux 文件压缩与打包笔记 压缩原理:通过算法去掉空位,1Bytes=8bits , 可能存储的真正有用的数据并没有占满一个字节空间 , 还有就是可能有重复的数据,通过某种算法从这些方面进行压缩处 ...
- Font Awesome图标字体应用及相关
作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...
- CSS自定义字体的实现,前端实现字体压缩
CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件 这里推荐一个网站:http://www.zitixiazai.org/ /********css中********/ @font- ...
- 中文字体压缩器-解决css引入的字体太大的问题
字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...
- 如何应用Font Awesome矢量字体图标
Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...
- tool 使用font-spider解决字体压缩问题
开发页面时经常需要使用特殊字体,一个.ttf文件动则几M,字体文件需要优化 http://font-spider.org/ 安装好node环境后 1.全局安装font-spider npm insta ...
- Django 的css和js压缩插件:django_compressor
今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: < ...
- [.NET源码学习]实例化Font,遭遇字体不存在的情况。
实例化Font类时,当传入参数为不存在或未安装的字体时,Windows系统会用Microsoft Sans Serif字体替代该字体. Msdn: "For more information ...
- Font Awesome图标字体库(2015年05月25日)
Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...
随机推荐
- git使用手册整理
-------------------20181217------------------- git使用:在gitbash 下初始化用户: $ git config --global user.nam ...
- Cache Aside Pattern
Cache Aside Pattern 即旁路缓存是缓存方案的经验实践,这个实践又分读实践,写实践 对于读请求 先读cache,再读db 如果,cache hit,则直接返回数据 如果,cache m ...
- NetCore2.0下使用EF CodeFirst创建数据库
本文所使用的VS版本:VS2017 15.3.0 首先新建一个.net core项目 取名NetCoreTask 使用模型视图控制器方式 新建Model层 在Model层下新建一个user实体类 1 ...
- 201901<<叶武滨时间管理100讲>>
2019年1月份读物整理: 1月份,在喜马拉雅上听的这个课程叶武滨时间管理100讲,每天利用上下班时间听完的,对其中的一些讲的点很有感触.今年的读书计划,希望自己能把读的每本书都用思维导图的方式整理出 ...
- C# 读取xml——XmlReader和XElement
1.有些xml文件头部有DTD,程序解析的时候会报错 如:其他信息: 打开外部 DTD“file:///E:/PM数据/MeContext=CDF2775/MeasDataCollection.dtd ...
- vscode小程序代码高亮
vscode无法识别wxml,wxss语法: wxml文件设置: (1)任意打开一wxml文件,点击下方语言模式选择,这里已关联wxm所以当前显示wxml.默认关联为纯文本或者html或其他语法,点击 ...
- intellij idea 官方帮助文档翻译(前言)
对于java程序员来说,intellj idea这个编辑器,应该很多人都听说过,但用的人似乎并不是很多. 这也没办法,毕竟现在网上的教程,培训班授课,大多还是以eclipse为主. eclipse固然 ...
- 【SparkStreaming学习之一】 SparkStreaming初识
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...
- 20175208『Java程序设计』课程 结对编程练习_四则运算
20175208 结对编程练习_四则运算(第一周) 结对成员:20175208张家华,20175202葛旭阳 一.需求分析: 实现一个命令行程序,要求: (1)自动生成指定数量的小学四则运算题目(加. ...
- java面向对象总结(二)
Java 封装 实现Java封装的步骤 java面向对象值继承 概念: 继承的格式: 类和类之间的关系: 继承的特点: 继承的优缺点 继承的好处: 继承的缺点: 继承的注意事项: 使用继承的步骤: J ...