HTML5学堂-码匠 HTML5学堂

您当前位于:工具类文件推荐 ——> 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”

  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布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS