先安装nodejs和git,比如放在D:/nodejs/  文件夹

cmd 进入该文件夹,安装npm install express

安装 npm install font-spider -g

安装 npm install grunt-font-spider --save-dev

安装 npm install gulp-font-spider --save-dev

至此,安装完成。比如我们要压缩 F:/test/www/  目录下的字体,先把ttf字体放在 www/font/ 文件夹里,

然后用cmd进入www文件夹,执行:font-spider index.html 或者font-spider *.html 即可。

然后在css文件里参照此引用 :

/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.ttf');
src:
url('../font/pinghei.eot') 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';
}

  字体文件依然放在font文件夹里。这样就ok了。

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

字蛛webfont 安装及使用方法的更多相关文章

  1. 中文WebFont解决方案Font-Spider(字蛛)

    我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...

  2. 字蛛fontSpider的使用

    字蛛官方文档 http://font-spider.org/index.html 首先安装全局包  npm install font-spider -g 然后下载字体 ,本次需要的是  "造 ...

  3. 二进制程序分析工具Pin在Windows系统中的安装和使用方法

    这篇日志其实很弱智,也是因为换了新电脑,实验环境不全(当然,做这个实验我是在虚拟机里,因为接下来想拿些恶意代码的数据),所以这里记录一下在Windows下怎么安装和使用Pin这个程序分析领域最常用的工 ...

  4. CentOS 6.6 中jdk1.6的安装和配置方法

    Linux中JDK1.6的安装和配置方法 一.安装 创建安装目录,在/usr/java下建立安装路径,并将文件考到该路径下: # mkdir /usr/java 1.jdk-6u11-linux-i5 ...

  5. 字蛛(font-spider)-单独压缩字体(解决页面少有的特殊字体的字体包引用)

    特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...

  6. fontSpider字蛛,好用的字体压缩工具教程

    一直觉得很多字体特别好看,但是那些好看的字体只能做在图片上不能用CSS样式去实现,作为一个会设计的前端,真心觉得很烦恼,有时候那些文字需要更换,修改起来非常麻烦,要到处去找源文件,找不到源文件还要尽力 ...

  7. 【转载】STM32 ST-LINK Utility介绍、下载、安装、使用方法

    转载地址:https://blog.csdn.net/ybhuangfugui/article/details/52597133 总结的很好!!! Ⅰ.写在前面本文讲述的内容是STM32 ST-LIN ...

  8. 精简TTF字体、FontPruner、汉字字体瘦身(非字蛛)

    20190726更新 标黄部分 网上比应用比较多的 字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件 准备工具: python : 我使用是 ...

  9. CentOS 6.3下Samba服务器的安装与配置方法(图文详解)

    这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下   一.简介  Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...

随机推荐

  1. [Java复习] 缓存Cache part2

    7. Redis持久化有哪几种方式?不同的持久化机制都有什么优缺点?持久化机制具体底层是如何实现的? 为什么要持久化? 如果只是存在内存里,如果redis宕机再重启,内存数据就丢失了,所以要用持久化机 ...

  2. OVS+VXLAN实现两个宿主机上的VM间的通信

    一.组网图 说明: 1.使用网络命名空间表示vm1和vm2. 因为我没有两台物理服务器. 2.使用virtualbox 的两条虚机模拟作为host1和host2. 二.配置指导 1.创建网桥 br0 ...

  3. c# 调用mysql数据库验证用户名和密码

    使用mysql数据库验证用户名和密码时,如果用户名是中文,一直查不到数据 需要把app.config 中修改为 数据库统一设置utf8编码格式,连接数据库的时候设置编码Charset=utf8可以避免 ...

  4. lumen response全局函数设置header

    设置header Cache-Controlreturn response()->json($return)->header('Cache-Control', 'public');

  5. Docker Swarm 集群(十七)

    目录 一.Docker Swarm 概念 1.集群 2.Docker Swarm 3.重要概念 swarm node service 二.创建 Swarm 集群 1.环境准备 2.创建 swarm 3 ...

  6. Bugly——Xuporter问题处理

    Unity接入Bugly   用其原生的package文件导入,结果在Ios打包时报错,找不到相对应的库. 经过排查: 这个地方如果不加拦截的话,项目中所有的 .projmods文件都会按照xupor ...

  7. 侯捷C++内存管理(一)

    1.Overview 2.内存分配的每一层面 3.四个层面的基本用法 1).对比一下: 4.基本构件之一newdelete expression(上) ——>new和operator new.m ...

  8. 【转】git2.9.2使用总结

    git2.9.2使用总结 1.系统:Windows7 2.git版本:2.9.2 由于我的git版本是最新版,后面我出现的坑就是最新版本的问题. 3.托管环境:开源中国的码云 . 使用步骤 1.在码云 ...

  9. Python爬虫入门教程之BeautifulSoup

    模块安装 pip3 install beautifulsoup4 模块导入 from bs4 import BeautifulSoup 示例html内容 RPC是一种比较流行的RPC通信框架,由谷歌公 ...

  10. mongdb学习

    1.启动mongdb 服务(注启动之前把data 文件夹清空) 2.开发和jpa一样 只是extendMongoRepository 3.实体类只有id注解,属性全为String