移动端引入的字体文件过大处理方法
一.背景
前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案
1.使用photoshop将文本图层单独导出成图片; 2.直接引入改字体的字体库.ttf文件
首先第一种方案的缺点,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦.同时使用图片,会带来更多的宽带消耗.用户体验方面,用户无法进行文字的选择,复制等操作,体验也不好.
第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M大小,不适合在项目中使用.尤其是移动端项目,由于字体加载速度很慢,体验会十分不好.本篇博客将介绍两种自动化工具,来实现在移动端愉快的使用特殊字体.分别是Font-Spider(字蛛)和fontmin.
二.浏览器对字体的支持
不同浏览器对字体的支持不同,所以我们要对不同的浏览器制作不同的字体.下图是浏览器对字体的支持情况.其中N为不支持,P为部分支持,Y为支持.
三.Font-Spider(字蛛)
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。Font-Spider的使用方法很简单,官网介绍的也很详细,下面简单介绍,也可直接去官网查看.
1.首先,全局安装font-slider
npm install font-spider -g
2.在css中使用
/*声明 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'; }
提示: @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
3.运行font-slider命令
font-spider ./demo/*.html
页面依赖的字体将会自动压缩好，原来几M的字体文件现在只剩下几k了, 是不是很爽呢.
4.使用gulp,grunt插件
除了直接进行编译,font-slider还提供了gulp和grunt的插件,可以更方便的在项目中使用,具体使用可直接到github查看
字蛛 grunt 插件: https://github.com/aui/grunt-font-spider
字蛛 gulp 插件:https://github.com/aui/gulp-font-spider
5.使用的局限
font-slider虽然好用,但是由于其原理是直接分析本地 CSS 与 HTML 文件获取没有WebFont中没有使用过的字符,这样一来,对于动态生成的文字,就没有办法使用font-slider了.这是个坏消息!尤其在当下,很多框架都是数据驱动的,更是很多文字都不会直接出现html文件中.对于这种情况, 下面介绍的fontmin或许能解决.
四.使用Fontmin
Fontmin 是由百度推出的一个字体子集化方案。使用fontmin可以按需提取字体中的部分字型，最小化打包字体，自动生成 WebFont 字体文件（ttf/woff/eot/svg）和 CSS 文件, 并可利用 @font-face 将自定义字体呈现到网页中，提升网页文字体验。Fontmin 提供了 Node.js 模块和客户端 2 种使用方法,下面主要介绍Node.js模块的使用,更多使用请移步到Fontmin快速指南
1.安装fontmin
npm i -g fontmin
2.配置
在项目中创建fontmin.js
var Fontmin = require('fontmin'); var srcPath = 'font/*.ttf'; // 字体源文件路径 var destPath = 'font'; // 字体输出路径 var text = '我你今天中大奖了快来领红包';//有哪些文字可能需要用到这个字体的,都可以在这里进行配置 // 初始化 var fontmin = new Fontmin() .src(srcPath) // 输入配置 .use(Fontmin.glyph({ // 字型提取插件 text: text // 所需文字 })) .use(Fontmin.ttf2eot()) // eot 转换插件 .use(Fontmin.ttf2woff()) // woff 转换插件 .use(Fontmin.ttf2svg()) // svg 转换插件 .use(Fontmin.css()) // css 生成插件 .dest(destPath); // 输出配置 // 执行 fontmin.run(function (err, files, stream) { if (err) { // 异常捕捉 console.error(err); } console.log('done'); // 成功 });
3.输出
执行fontmin.js文件就可以配置好的目录下输出对应的字体及css文件,字体文件也会由原来的即M变成几k了.
node fontmin.js
Fontmin还提供了客户端, 直接把 TTF 拖进去，左侧输入需要文字，右侧实时看效果。点击生成，一步搞定. 建议还是使用node模块的方式, 只要在项目中配置好, 以后再有任何文字需要使用字体, 直接添加到fontmin.js中的text中,执行node fontmin.js命令就搞定了.
4.缺点
Fontmin适用于文字不经常变动, 或者在一定范围内变动的情况, 如果文字经常变，而且没有固定的范围，那么也是没有办法的。
更多性能优化文章,欢迎移步到:
