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,字体压缩插件使用笔记的更多相关文章

  1. Linux文件压缩与打包笔记

    linux 文件压缩与打包笔记 压缩原理:通过算法去掉空位,1Bytes=8bits , 可能存储的真正有用的数据并没有占满一个字节空间 , 还有就是可能有重复的数据,通过某种算法从这些方面进行压缩处 ...

  2. Font Awesome图标字体应用及相关

    作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...

  3. CSS自定义字体的实现,前端实现字体压缩

    CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件 这里推荐一个网站:http://www.zitixiazai.org/ /********css中********/ @font- ...

  4. 中文字体压缩器-解决css引入的字体太大的问题

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  5. 如何应用Font Awesome矢量字体图标

    Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...

  6. tool 使用font-spider解决字体压缩问题

    开发页面时经常需要使用特殊字体,一个.ttf文件动则几M,字体文件需要优化 http://font-spider.org/ 安装好node环境后 1.全局安装font-spider npm insta ...

  7. Django 的css和js压缩插件:django_compressor

    今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: < ...

  8. [.NET源码学习]实例化Font,遭遇字体不存在的情况。

    实例化Font类时,当传入参数为不存在或未安装的字体时,Windows系统会用Microsoft Sans Serif字体替代该字体. Msdn: "For more information ...

  9. Font Awesome图标字体库(2015年05月25日)

    Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...

随机推荐

  1. python-soap接口请求

    一.环境准备 方法一: >pip3 install suds >pip3 install suds-jurko 因在线安装报错,所以直接下载安装包. 方法二: 1.suds库下载地址:ht ...

  2. org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dataSource' defined in class path resource [app2.xml]: Instantiation of bean failed; nested exception is org.spr

    在学习spring整合hubernate时遇到的问题.c3p0遇到了一个问题,老连不上,显示java.lang.NoClassDefFoundError:com.mchange.v2.ser.Indi ...

  3. 通过安全网闸访问MongoDB

    前景描述: 在10.235的内网3台虚拟机上部署了mongodb的副本集,同网段中的虚拟机上部署的Springboot工程可正常访问.spring配置文件: data: mongodb: uri: m ...

  4. linux关机(重启)命令

    Linux系统关机命令: #关机命令 1.halt 2.poweroff 3.shutdown -h now 立即关机(具有root权限用户使用)#重启命令 1.reboot 2.shutdown - ...

  5. IT题库5-并发和并行

    并发和并行从宏观上来讲都是同时处理多路请求的概念.但并发和并行又有区别,并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔内发生.

  6. Asp.Net Core WebApi 和Asp.Net WebApi上传文件

    public class UpLoadController : ControllerBase { private readonly IHostingEnvironment _hostingEnviro ...

  7. 通过宝塔webhook,实现git自动拉取服务器代码

    1.宝塔安装webhook,添加一条记录,脚本内容为: #!/bin/bash echo "" #输出当前时间 date --date='0 days ago' "+%Y ...

  8. Solr中在使用过程中遇到的"与"和"或"的问题

    在进行全文检索的过程中,如果使用三星和手机,两个一块进行搜索的时候,关于三星的会被搜索出来,关于手机的信息也会被搜索出来,然后,需要将一些配置文件进行配置, <!-- DEPRECATED: T ...

  9. Windows 下安装 Memcached

    Windows 下安装 Memcached 官网上并未提供 Memcached 的 Windows 平台安装包,我们可以使用以下链接来下载,你需要根据自己的系统平台及需要的版本号点击对应的链接下载即可 ...

  10. 回车\r与换行\n

    在计算机出现之前,有一种电传机械打字机,每秒可以打10个字符.但是有一个问题,就是打满一行后,需要进行换行,换行是需要0.2秒.如果这时有字符传入,就会丢失两个字符.为了解决这个问题,便定义了两个字符 ...