字蛛webfont 安装及使用方法
先安装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 安装及使用方法的更多相关文章
- 中文WebFont解决方案Font-Spider(字蛛)
我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...
- 字蛛fontSpider的使用
字蛛官方文档 http://font-spider.org/index.html 首先安装全局包 npm install font-spider -g 然后下载字体 ,本次需要的是 "造 ...
- 二进制程序分析工具Pin在Windows系统中的安装和使用方法
这篇日志其实很弱智,也是因为换了新电脑,实验环境不全(当然,做这个实验我是在虚拟机里,因为接下来想拿些恶意代码的数据),所以这里记录一下在Windows下怎么安装和使用Pin这个程序分析领域最常用的工 ...
- CentOS 6.6 中jdk1.6的安装和配置方法
Linux中JDK1.6的安装和配置方法 一.安装 创建安装目录,在/usr/java下建立安装路径,并将文件考到该路径下: # mkdir /usr/java 1.jdk-6u11-linux-i5 ...
- 字蛛(font-spider)-单独压缩字体(解决页面少有的特殊字体的字体包引用)
特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...
- fontSpider字蛛,好用的字体压缩工具教程
一直觉得很多字体特别好看,但是那些好看的字体只能做在图片上不能用CSS样式去实现,作为一个会设计的前端,真心觉得很烦恼,有时候那些文字需要更换,修改起来非常麻烦,要到处去找源文件,找不到源文件还要尽力 ...
- 【转载】STM32 ST-LINK Utility介绍、下载、安装、使用方法
转载地址:https://blog.csdn.net/ybhuangfugui/article/details/52597133 总结的很好!!! Ⅰ.写在前面本文讲述的内容是STM32 ST-LIN ...
- 精简TTF字体、FontPruner、汉字字体瘦身(非字蛛)
20190726更新 标黄部分 网上比应用比较多的 字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件 准备工具: python : 我使用是 ...
- CentOS 6.3下Samba服务器的安装与配置方法(图文详解)
这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下 一.简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...
随机推荐
- php生成的html 顶部有一空行的解决办法
php生成的html 顶部有一空行的解决办法,但是生成的编译文件,即1d7c7a527b6335cc7a623305ca940e1findex.tpl.php就没有空行 比较两个HTML源代码一模一样 ...
- osg 自定义图元
osg::ref_ptr<osg::Geode> OSG_Qt_::createBox() { osg::ref_ptr<osg::Geode> osg_geode = new ...
- 0.9.0.RELEASE版本的spring cloud alibaba nacos实例
简而言之,nacos与eureka的不同之处有三:后台老板.部署方式.功能.nacos是阿里的,eureka是奈飞的:nacos有自己的安装包,需要独立部署,eureka仅作为一个服务组件,引入jar ...
- 编译安装MySQL5.6
安装必需的工具 比如cmake.gcc.g++.git CentOS使用下面的命令: yum install cmake gcc g++ git Ubuntu使用下面的命令: apt-get ins ...
- sed替换 - 含反斜杠(/)和Shell变量
sed替换 - 含反斜杠(/)和Shell变量 摘自: https://blog.csdn.net/zhenyongyuan123/article/details/6616263 2011年07月19 ...
- robot用例执行常用命令(还没试)
执行命令 执行一个用例 robot -t “testcase_name“ data_test.robot 按用例文件执行 robot data_test.robot或者robot --suite “p ...
- FCKEDITOR在.NET中的使用
FCKEDITOR在.NET中的使用 FCKeditor介绍 FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务.它不需要安装任何 ...
- Python之汉诺塔递归运算
汉诺塔问题是一个经典的问题.汉诺塔(Hanoi Tower),又称河内塔,源于印度一个古老传说.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆 ...
- 为什么每次登录要手动 source /etc/profile ...
由于执行顺序如下,故追个查看以下文件,看看是不是 JAVA_HOME, PATH 等环境变量在后面的文件中被重写覆盖了. 1. /etc/profile2. /etc/environment3. ~/ ...
- (IStool)64位软件安装在32位操作系统时给出提示
需求:64位的软件当在32位操作系统下安装时,需要提示用户不能在32位操作系统中进行安装 实现:打包时启用64位模式(打包工具用的是Inno Setup 5) 安装脚本段需要添加以下代码: [Setu ...