首页 > 代码库 > 如何在网页中解决设计师留给你的字体问题?

如何在网页中解决设计师留给你的字体问题?

文章来源:http://www.zretc.com/technologyDetail/429.html

在一些推广活动项目的页面中,设计师可能会需要用到许多好看的字体,例如:方正综艺.ttf、方正兰亭、 方正喵呜.ttf等(此处省略N个字体)。

当设计师使用这些特殊字体的时候,前端攻城狮同学们往往因为这些字体“太有个性”而烦恼。今天小卓为大家分享一些经验,实用又经典,希望能对童鞋们的工作有所帮助!

技术分享

  • 方法一:切图法

  • 方法二:Font-spider介绍及使用

  • Font-spider自动化构建工具gulp介绍及使用

步入正题:

技术分享

应对设计师的"字体”难题,有两种解决方式可供同学们挑选,方式一是我们熟知常用的切图法,方法二是今日文章重点介绍的Font-spider。

方法一:切图法

大多数的活动页面采用的方式是将字体储存为单个的小图片,这种方式简单粗暴。

有关切图方式的优缺点,想必大家都与小卓有相同的感受。切图方式简单易用,效果与设计图完全一致。然而,它也有很多缺点,例如:如果只有几张图片的话,切图方式简单而且效率较高,但如果有几十张几百张的图片拿来运用的话...不论是切图或者后期的修改都是噩梦。

方法二:Font-spider

什么是Font-spider:

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

中文字体动辄10M+的大小,使我们无法直接引用字体文件。通俗地讲,font-spider,就是将HTML里使用到的文字,单独打包成一个新的字体文件。那么,究竟该如何具体操作呢?且看以下讲解。

如何使用Font-spider

第一步:安装font-spider

使用Node.js安装font-spider:

npm install font-spider -g

(注:Node.js下载地址:https://nodejs.org/en/)

第二步:在项目中使用webfond

项目目录:

技术分享

在HTML里引入font.css

技术分享

声明一个新的字体,我们把它命名为”FZ”。

技术分享

第三部:运行运行 font-spider 命令:

font-spider demo.html

技术分享

我们可以发现页面依赖的字体将会自动压缩好,将1986KB的字体文件压缩成几KB的新字体,而且会根据不同浏览器的兼容性打包成不同类型的文件。

原字体会也会备份,我们看一下生成后的目录结构:

技术分享

压缩后出现4个字体文件,我们在CSS中已经引入。而我们的原文件会备份到.font-spider这个目录下。

执行后的效果:

技术分享

如何使用自动化构建工具gulp实时自动编译?

在真实的开发中,我们肯定不想每次保存代码后都去命令行输入font-spider命令去编译,这个时候就需要依靠自动化构建工具去做实时编译。

这里我们推荐使用gulp(因为上手很简单)。

第一步:安装gulp

没有安装过gulp的同学,使用NPM在全局下安装Gulp。

npm install --global gulp

在项目根目录下,将gulp、gulp-font-spider、gulp-watch作为项目开发依赖(devDependencies)安装:

npm install gulp gulp-font-spider --save-dev

(注①:gulp-font-spider是font-spider基于gulp的插件)

(注②:gulp-watch可以监听文件的保存)

第二步:配置gulp

在项目根目录下创建gulpfile.js文件。

技术分享

1.引入gulp、gulp-font-spider、gulp-watch这三个项目开发依赖。

2.配置gulp-font-spider、和gulp-watch监听demo.html从而自动执行font-spider。

此时的项目目录结构:

技术分享

第三步:执行gulp命令

技术分享

此时我们将H1标签的内容改为“我在正在使用Gulp!”并保存。

返回命令行工具,我们会发现gulp已经帮我们自动执行了font-spider。

技术分享

看一下效果:

技术分享

更多精彩内容请进入技术知识库!

如何在网页中解决设计师留给你的字体问题?