html 中加载字体太慢,前端解决中文字体加载慢的问题

CSS3中，使用@font-face即可加载自定义字体了。

推荐的跨浏览器 @font-face CSS 写法：

/*声明 WebFont*/

@font-face {

font-family: 'fontName'; /*字体名称*/

src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */

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

url('../fonts/font.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('../fonts/font.svg') format('svg'); /* iOS 4.1- */

font-weight: normal;

font-style: normal;

}

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

.test {

font-family: 'fontName';

}

正常使用@font-face加载自定义字体时，可能整个字体包大小有好几M，打开网页时，可能会需要很长的时间来下载字体。用户体验很不好。

那么如何解决这一问题呢？

你可以找设计小姐姐/小哥哥帮忙把字体包中用不到的字拿掉，只留页面需要的字，这样字体文件大小就会小很多(但是这种方法适应性太差，如果发生文字更换，字体文件也会频繁需要修改。)

其实我们前端也有神器可以解决此问题，

font-spider的工作原理是这样的： 中文字体文件之所以很大，是因为英语只有26个字母，而中文的汉字有好多好多个，所以文件相对来说就会大很多。font-spider就是从你的css文件的@font-face入手，去查找字体，然后遍历你的html文件，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

如何使用font-spider

1.首先你的电脑需要安装node.js

2.安装好了node.js，然后执行：

npm install font-spider -g

3.在css中使用webfont,在css中就按照以下格式声明@font-face(注意 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成)

/*声明 WebFont*/

@font-face {

font-family: 'pinghei';

src: url('../font/pinghei.eot');

src:

url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),

url('../font/pinghei.woff') format('woff'),

url('../font/pinghei.ttf') format('truetype'),

url('../font/pinghei.svg') format('svg');

font-weight: normal;

font-style: normal;

}

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

.home h1, .demo > .test {

font-family: 'pinghei';

}

4.运行 font-spider 命令

cd /Users/xxx/Desktop/MyRepository/project /*进入项目内*/

/*执行命令，*.html是对所有html文件执行该命令，你也可以写具体name的html*/

font-spider *.html

命令执行完后，字体文件下多出来以下文件(.font-spider文件夹下是原始的ttf文件)

image.png

注意：

字蛛不支持动态生成的文字，他只能找到html中存在的文字。

除了兼容font-spider(字蛛)支持的特性：

压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积

生成字体：支持 woff2、woff、eot、svg 字体格式生成

font-spider-plus(字蛛+)还具有以下特性：

支持线上动态渲染的页面

支持线上GBK编码的文件