软件开发入门:如何在网页中解决设计师留给你的字体问题?
作者: 来源: 时间: 2017-03-28 09:29:41
在一些推广活动项目的页面中,设计师可能会需要用到许多好看的字体,例如:方正综艺.ttf、方正兰亭、 方正喵呜.ttf等(此处省略N个字体)。
当设计师使用这些特殊字体的时候,前端攻城狮同学们往往因为这些字体“太有个性”而烦恼。今天小卓为大家分享一些经验,实用又经典,希望能对童鞋们的工作有所帮助!
方法一:切图法
方法二:Font-spider介绍及使用
Font-spider自动化构建工具gulp介绍及使用
如何使用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。
看一下效果:
更多精彩内容请进入技术知识库!
中软卓越java培训地址:北京市海淀区科学院南路2号融科资讯中心C座北楼12层 联系电话:400-666-3775 邮箱账号:etc-marketing@chinasofti.com
©2008-2016 北京中软国际教育科技股份有限公司 京ICP备14058756号-2