网页中文字体的使用方法<字蛛-fontSpider>

今天给大家介绍一款很实用的工具,Font-Spider ——>>>>一个神奇的网页中文字体工具,是基于font-spider的前端字库优化,使用这款工具后,所有的中文字体都会压缩到网页可以直接使用的效果

为了不让工程与体验制约着设计师对字体选择以及创意的实现,我们利用业余时间解决了中文WebFont的两大问题即压缩和转码,于是便有了 Font-Spider (字蛛)的诞生。作为业界首款中文 WebFont 本地自动化压缩与转码工具,中文字体 web 化问题迎刃而解。它是一个 web 字体工具,通过自动化技术来压缩、转码跨平台的中文字体,让网页自由嵌入中文字体成为可能。

原理

1.    爬行本地 html 文档,分析所有 css 语句

2.    记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器

3.    通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本

4.    找到字体文件并删除没被使用的字符

5.    编码成跨平台使用的字体格式

安装方法:

font-spirder 官网http://font-spider.org/

font-spirder:让网页自由引入中文字体成为可能

步骤一:

必须安装nodeJs,如果电脑上没有,可以参考本站的教程哦!

步骤二:

在电脑自带的cmd运行程序上使用node命令:

步骤三

打开你做好的html文件夹,字体记得建一个font文件夹放进去,和images、CSS文件夹并排,字体名称一定要换成字母的,你可以是中文缩写什么的。

步骤四:

新建一个CSS样式表,定义字体,把下面的复制进去,输入你刚刚在font里命名的字体名称,这样字体的各种格式都定义好了。

注意:
1>>. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
2>>. 开发阶段请使用相对路径的 CSS 与 WebFont

步骤五:

打开刚刚运行了一半的node.js运行窗口,复制font-spider​,然后打个空格,再复制你的路径,比如我的路径是D:/字蛛/test/index.html,因为我的html是放在D盘,然后一个测试文件夹中,所以这样写,按下enter键:输入效果如下图:

由于已经将字体压缩,所以便不在此上图,另附一张已经压缩好的文件图片:

已经压缩成功的文件展示

如果,还有什么不清楚的,可以联系我~~~

Back to Top