font-spider 前端开发字体的好工具

HTML5学堂：font-spider是业界首款中文 WebFont 本地自动化压缩与转码工具。利用它不但能帮你轻松解决字体文件的兼容问题，并能自动检索找出指定的文字重新压缩使字体文件大大减小。能够很好的弥补@font-face的不足。

关于font-spider

之前，我们可以利用CSS3的字体新属性@font-face在网页中设置一些炫酷的艺术字效果。但是由于中文字体字数多，文件大的缺点，让@font-face不能得到“用武之地”。后来，我们讲解了自定义字体的创建。关于自定义字体创建的方法，可点击——>查看。而今天，我们要说的是font-spider。

font-spider是业界首款中文 WebFont 本地自动化压缩与转码工具。利用它不但能帮你轻松解决字体文件的兼容问题，并能自动检索找出指定的文字重新压缩使字体文件大大减小。

郑重声明：本文来源于我们原来的一位讲师的分享。本网站(HTML5学堂)在发布文章之前先征求了原作者的意见，在原文基础上进行了一定的调整，发布出来与大家分享，很感谢~！本文原作者：吴庆凡(点击可以查看原作者的介绍信息)。原文来源于庆凡的网易博客——淡淡的影痕。

font-spider使用的基本步骤

1、含有中文字体的一个html文件

2、安装node.js

3、安装font-spider

4、找到对应文件的目录

5、运行font-spider 命令

6、完成

第一步含有中文字体的一个html文件

假设我们定义的文件名是“index.html”

HTML5学堂 font-spider 前端开发字体的好工具

*{ margin: 0; padding: 0; }

@font-face {

font-family: 'wu';

src: url('./font/font1.eot');

src:

url('./font/font1.eot?#font-spider') format('embedded-opentype'),

url('./font/font1.woff') format('woff'),

url('./font/font1.ttf') format('truetype'),

url('./font/font1.svg') format('svg');

font-weight: normal;

font-style: normal;

}

h1{

font-family: "wu";

text-align: center;

line-height: 300px;

}

原作：吴庆凡的font-spider测试 —— HTML5学堂

第二步安装node.js

font-spider是基于node.js的小插件，所以要使用它我们要先安装node.js。这里就不细说node.js的安装过程了，不清楚的可点击链接——>初探node.js，也可自行百度。

第三步安装font-spider

在node中输入如下指令安装：npm install font-spider -g

第四步找到对应文件的目录

在node中输入：cd 文件目录

范例：

本例子是在桌面创建的，所以目录如下：

在node中输入的内容如下：

第五步运行font-spider 命令

在node中输入：font-spider 文件名

第六步完成啦

font-spider自动生成了字体文件~

欢迎沟通交流~HTML5学堂

html5艺术字效果,WEB前端开发，网络特殊字体的制作工具-font-spider相关推荐

十款让 Web 前端开发人员更轻松的实用工具
这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...
5款让Web前端开发人员更轻松的实用工具
Web前端的工作在以前称之为网页美工,但随着flash逐渐退出网页设计的舞台之后,HTML+css+JavaScript为核心的前端技术成功的完成了技术栈的升级,是的Web前端工程师的名头也越叫越响. ...
web前端开发网络课程，HTML常用的五种标签，重难点整理
前言最近在准备面试,然后复习下之前写过的项目,书籍,笔记,文章.一看很多知识点都没有印象,最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的.有些开始怀疑人生了. 好了,废话少说,离金三银四 ...
web前端开发——期末大作业网页制作——web网页设计期末课程大作业 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单
效果: 弧形菜单,文字按规则变形以及变换透明度简单的javascript,上手难度:简单学习笔记: text-decoration: 最主要的功能就是给文字加上附着在文字底部,上方,或者中间的线( ...
html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
Html css是前端吗,HTML5 CSS3 Web前端开发
HTML5 CSS3 Web前端开发语音编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪[1] . 书中的图片 ...
web前端开发需要哪些工具和需要学习什么？
首先封程中是在自身发展过程中java工程师,目前从事服务器(后端开发),但是之前也做过JavaWeb前端开发2年,所以还是有一些经验,下面简单介绍我的经验,这是不好的,你不喷,学习学习而忽视忽略它. ...
前端改变div排序_转行学习web前端开发，需要哪些工具和需要学习什么？
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...

html5艺术字效果,WEB前端开发，网络特殊字体的制作工具-font-spider

原作：吴庆凡的font-spider测试 —— HTML5学堂

html5艺术字效果,WEB前端开发，网络特殊字体的制作工具-font-spider相关推荐

最新文章

热门文章