专栏首页前端杂谈移动端引入的字体文件过大处理方法

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

一.背景

前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 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 条评论
登录 后参与评论

相关文章

  • git远程库代码版本回滚方法

    用户1741436
  • 项目中如何使用babel6详解

    用户1741436
  • 深入vue - 源码目录及构建过程分析

     公众号原文链接:深入vue - 源码目录及构建过程分析    喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」

    用户1741436
  • 怎么在自己的网页中引用其他好看的字体?

    有的网站字体,用户电脑上没有,如果只是单纯的定义 font-family 是不起效的。 我们可以将字体文件放置在网站目录(知道君喜欢放在OSS,但是这个需要注意...

    夏末浅笑
  • CSS字体font

    font-size 设置字体的大小 ,px 是一个单位,代表屏幕的上的像素,在css大多数数值都需要添加单位

    羊羽shine
  • 强烈推荐:9 款用起来超爽的编程字体!

    Consolas 是一套等宽字体的字型,属无衬线字体,由 Lucas de Groot 设计,这套字型使用了微软的 ClearType 字型平滑技术,非常好看。

    帅地
  • 强烈推荐:9 款用起来超爽的编程字体!

    Consolas 是一套等宽字体的字型,属无衬线字体,由 Lucas de Groot 设计,这套字型使用了微软的 ClearType 字型平滑技术,非常好看。

    GitHubDaily
  • 小文’s blog – WordPress自定义字体

    神无月
  • 基于 Ubuntu 的发行版上安装微软 TrueType 字体的教程

    如果你在 Linux 上用 LibreOffice 打开一些微软文档,你会发现字体看起来有一点不同。你也将注意到有些常用字体找不到,如 Times New Ro...

    砸漏
  • 设计师的春天:中文WebFont解决方案Font-Spider(字蛛) - 腾讯ISUX

    腾讯ISUX

扫码关注云+社区

领取腾讯云代金券