怎样在页面中引入特殊字体呢？

Jane_sunshine
1,937 阅读2分钟

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与众不同的字体</title>
    <style>
        .container{font-size: 18px;line-height: 32px}
    </style>
</head>
<body>
    <div class="container">
        <div>这一行是普通文本哦！</div>
    </div>
</body>
</html>

页面显示截图如下：

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

前提条件：安装好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 字体会备份

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与众不同的字体</title>
    <style>
        .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';}
    </style>
</head>
<body>
    <div class="container">
        <div>这一行是普通文本哦！</div>
        <div class="xqfont">
            这里显示喜鹊招牌简体！
        </div>
    </div>
</body>
</html>

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

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

字蜘蛛官方地址：font-spider.org/

avatar
文章
阅读
粉丝