前端技术分享-码匠 极客编程技术分享

您当前位于：开发工具 ——> WEB前端开发，网络特殊字体的制作工具-font-spider
上一篇：WEB前端开发中，网页调试的免刷新工具 —— [F5]工具 下一篇：Node | node.js的安装方法

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”

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 font-spider 前端开发字体的好工具</title>
  6.     <style type="text/css">
  7.         *{ margin: 0; padding: 0; }
  8.         @font-face {
  9.             font-family: 'wu';
  10.             src: url('./font/font1.eot');
  11.             src:
  12.             url('./font/font1.eot?#font-spider') format('embedded-opentype'),
  13.             url('./font/font1.woff') format('woff'),
  14.             url('./font/font1.ttf') format('truetype'),
  15.             url('./font/font1.svg') format('svg');
  16.             font-weight: normal;
  17.             font-style: normal;
  18.         }
  19.         h1{
  20.             font-family: "wu";
  21.             text-align: center;
  22.             line-height: 300px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <h1>原作：吴庆凡的font-spider测试 —— HTML5学堂</h1>
  28. </body>
  29. </html>

第二步 安装node.js

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

第三步 安装font-spider

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

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

在node中输入：cd 文件目录

范例：

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

文件目录

在node中输入的内容如下：

node中文件目录的书写

第五步 运行font-spider 命令

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

node中输入font-spider文件名

第六步 完成啦

font-spider自动生成了字体文件~
node中命令
已生成字体文件

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：WEB前端开发中，网页调试的免刷新工具 —— [F5]工具 下一篇：Node | node.js的安装方法