移动端引入的字体文件过大处理方法

一.背景

前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 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适用于文字不经常变动, 或者在一定范围内变动的情况, 如果文字经常变,而且没有固定的范围,那么也是没有办法的。 

更多性能优化文章,欢迎移步到:

性能优化之reflow和repaint

使用performance进行网页性能监控

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏思考的代码世界

Python网络数据采集之采集JavaScript|第09天

2065
来自专栏Maroon1105

WordPress之去掉顶部工具栏

用WP搭建自己博客的人都会发现网站上面有一个黑色的工具栏,影响网站美观度,那么怎么去掉顶部工具栏呐?

5610
来自专栏小程序的道路

小程序生命周期

小程序并不是 HTML5 应用,而是更偏向于传统的 CS 架构,它是基于数据驱动的模式,一切皆组件(视图组件)。下面是小程序与普通 Web App 的对比。 ...

1511
来自专栏Java成神之路

计算机_01_常用快捷键

         Windows+L   : 锁(look)    屏               

943
来自专栏前端架构与工程

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有...

2589
来自专栏微信小程序开发

小程序开发注意点儿,新手入门基础

1、域名配置,不配置无法访问 小程序开发,要调用API,就必须把域名填写在配置里面,这点儿一定要记住,万一服务端突然上线一次,发现线上服务出问题了,很有可能就...

53911
来自专栏移动开发面面观

React Native 一个开始

1092
来自专栏极客编程

简单介绍一下vue2.0

Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库...

1812
来自专栏Jerry的SAP技术分享

使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

7062
来自专栏Jerry的SAP技术分享

将Chrome调试器里的JavaScript变量保存成本地JSON文件

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

3543

扫码关注云+社区

领取腾讯云代金券