html如何调用特殊字体,怎样在页面中引入特殊字体呢？

让网页自由引入中文字体成为可能，可能有人会说直接引入字体包，在样式中设置font-family:"XXX"不就好了吗？超级简单呢..

那我们一起看看字体包的大小(该实例中使用：喜鹊招聘简体)

一个字体库文件十几兆，页面加载速度超级慢，严重影响用户体验，怎样做减法呢？

接下来给大家分享一个中文字体压缩器——字蛛

首先我们先写入一段默认显示文字的代码：

显示与众不同的字体

.container{font-size: 18px;line-height: 32px}

这一行是普通文本哦！

复制代码

页面显示截图如下：

接着我们准备引入特殊好看的字体，并且给字体库做减法咯。

前提条件：安装好node环境

1、安装font-spider

npm install font-spider -g

复制代码

构建插件：grunt-font-spider | gulp-font-spider

2、在 CSS 中使用 WebFont：

/*声明 WebFont*/

@font-face {

font-family: 'xqzpzt';

src: url('fonts//xqzpzt.eot');

src: url('fonts//xqzpzt.eot?#font-spider') format('embedded-opentype'),

url('fonts//xqzpzt.woff') format('woff'),

url('fonts/xqzpjt.TTF') format('truetype'),

url('fonts/xqzpzt.svg') format('svg');

font-weight: normal;

font-style: normal;

}

/*使用选择器指定字体*/

.xqfont{font-family: 'xqzpzt';}

复制代码

提醒：

a. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

b. 开发阶段请使用相对路径的 CSS 与 WebFont

3、运行提取文字压缩文件包

font-spider ./*.html

复制代码

提醒：

根据您自己的需求定义路径，当前路径意思：根目录下的所有html文件

页面依赖的字体将会自动压缩好，原 .ttf 字体会备份

整体代码：

显示与众不同的字体

.container{font-size: 18px;line-height: 32px}

@font-face {

font-family: 'xqzpzt';

src: url('fonts//xqzpzt.eot');

src: url('fonts//xqzpzt.eot?#font-spider') format('embedded-opentype'),

url('fonts//xqzpzt.woff') format('woff'),

url('fonts/xqzpjt.TTF') format('truetype'),

url('fonts/xqzpzt.svg') format('svg');

font-weight: normal;

font-style: normal;

}

/*使用选择器指定字体*/

.xqfont{font-family: 'xqzpzt';}

这一行是普通文本哦！

这里显示喜鹊招牌简体！

复制代码

最后显示如下图：而且字体包大小也变小了，只有21KB

友情提示：字体包变小，实际上是把文件中使用到的文字给提取了出来，所以每次文字变化的话，都需要重新生成一下字体库。