您当前位于：
开发工具 ——> WEB前端开发，网络特殊字体的制作工具-font-spider
WEB前端开发，网络特殊字体的制作工具-font-spider
2015/07/17 11:42:24
|
作者：HTML5学堂（码匠）
|
分类：开发工具
|
关键词：网络字体,自定义字体,font-face,spider
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”
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 font-spider 前端开发字体的好工具</title>
-
<style type="text/css">
-
*{ 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;
-
}
-
</style>
-
</head>
-
<body>
-
<h1>原作：吴庆凡的font-spider测试 —— HTML5学堂</h1>
-
</body>
-
</html>
第二步 安装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学堂
阅读：2664
极客编程技术分享
