这周继续在弄hybird app 的 UI框架的重构,进行到了编写换肤功能的阶段,而在做换肤之前,我想应该先弄一套框架内置的图标。

而图标无非就是两种做法:

1.图片

使用图片很正常,但是有缺陷的。

1.众多的图标导致了增加了许多HTTP请求

PS:有人会说我把它们弄成一张大图不久行了,可是这样弄了之后,你连大小都无法改变。所以肯定还是一批小图片。

2.放大缩小失真

3.同张图片如果需要不同颜色,又得弄多一套出来。

2.字体

也就是这篇要说得Icon Font。做法就是讲你的图标做成字符,然后用css3中的@font-face去使用它。

PS:不说怎么去做字体,因为这对于缺少美工功底的我来说,做起来太吃力了。

优点:

1.不失真

2.可做到0 HTTP请求

3.可随意更换颜色大小(因为它是字体嘛),甚至是渐变

缺点:

1.即使使用一个图标也要用整个字体css(我觉得无伤大雅)

找另一条路弄Icon Font

在寻找资源中,有个网站不错——IcoMoon,https://icomoon.io/#home

1. 这个网站提供20+套,合计上千个不同风格的icon font(有免费,有收费的,但是基本上使用免费的就够用了)

2. 这个网站有一个在线工具,你可以使用这个工具来编辑它提供的icon font,并且选择自己喜欢的打包下载

就说下它的使用步骤

1.点击

PS:默认会有free的Icon在下面了

2.增加一些icon库进来

然后选择你喜欢的图标,再点击Generate Font,就可以到下载页面。

3.下载配置

之所以选择那一项,是为了生成的Icon字体文件直接以base64编码放在css文件里面

4.结果

刚刚所说的css文件就是style,我们看下里面有什么内容(被我删减了些东西)

@font-face {
font-family: 'icomoon';
src: url(data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXXXXXXXXXXXXXXX) format('truetype');
font-weight: normal;
font-style: normal;
}

PS:后面的"XXXXXXX"太长了,就不在这里显示。

这个就是对字体的定义,src的引用也变成了base64编码的字符串。

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height:; /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .icon-checkmark:before {
content: "\e600";
}

这个定义字体样式,值得注意的是后面一段css,之所以用:before伪类来声明,其实也是为了使用时可以不用写一个空标签"&#33",用法如下。

<span class="icon-checkmark"></span>

就能够愉快的使用Icon Font

总结:

对于mobile web应用来说,Icon Font去实现一套应用或框架默认图标是个不错选择,而不失真是这种方式鼓舞人使用的利器。当然如果是复杂的图标(色彩多样...)就不能用了,只能用回图片。

番外:

一些工具

文件与base64字符串进行转换工具: http://www.motobit.com/util/base64-decoder-encoder.asp

查看、编辑字体: TypeTool 3或FontCreator

Icon Font浅谈的更多相关文章

  1. Qt浅谈之总结(整理)

    Qt浅谈之总结(整理) 来源 http://blog.csdn.net/taiyang1987912/article/details/32713781 一.简介 QT的一些知识点总结,方便以后查阅. ...

  2. 【转】.NET(C#):浅谈程序集清单资源和RESX资源 关于单元测试的思考--Asp.Net Core单元测试最佳实践 封装自己的dapper lambda扩展-设计篇 编写自己的dapper lambda扩展-使用篇 正确理解CAP定理 Quartz.NET的使用(附源码) 整理自己的.net工具库 GC的前世与今生 Visual Studio Package 插件开发之自动生

    [转].NET(C#):浅谈程序集清单资源和RESX资源   目录 程序集清单资源 RESX资源文件 使用ResourceReader和ResourceSet解析二进制资源文件 使用ResourceM ...

  3. Qt3升至Qt4需要注意的几件事项浅谈

    Qt3升至Qt4需要注意的几件事项浅谈 公司以前的项目是用Qt3写的,随着时间的推移慢慢显示出Qt3有多方面的限制,因此先公司决定用Qt4来改写这个项目,并为软件添加新功能,在此背景先编写此文章. 先 ...

  4. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  5. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  6. 浅谈Hybrid技术的设计与实现

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...

  7. JqueryEasyUI浅谈本地化应用

    JqueryEasyUI浅谈本地化应用 Jquery是对javascript一种封装,使我们开发人员使用起来更加方便,同时也解决了不同浏览器中javascript的兼容性.JqueryEasyUi是基 ...

  8. 安卓开发_浅谈ListView(SimpleAdapter数组适配器)

    安卓开发_浅谈ListView(ArrayAdapter数组适配器) 学习使用ListView组件和SimapleAdapter适配器实现一个带图标的ListView列表 总共3部分 一.MainAc ...

  9. 浅谈OCR之Onenote 2010

    原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...

随机推荐

  1. SharePoint Server 2013开发之旅(二):使用在线的开发人员网站进行SharePoint App开发

    上一篇我已经介绍了新版本的SharePoint Server提供了四种主要的开发场景,其中一个全新的App开发模型让我们眼前一亮.这一篇我将介绍如何在线进行SharePoint App开发. 谈到Sh ...

  2. SQL*Loader之CASE2

    CASE2 1. 控制文件 [oracle@node3 ulcase]$ cat ulcase2.ctl -- NAME -- ulcase2.ctl - SQL*Loader Case Study ...

  3. Javascript定时器(一)——单线程

    一.JavaScript 引擎是单线程的 可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了. <script type=&quo ...

  4. [Node.js] 使用TypeScript编写Node项目

    原文地址:http://www.moye.me/2015/04/25/using_typescript/ 入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番. 是什么 Ty ...

  5. 解决SpringMVC的@ResponseBody返回中文乱码

    SpringMVC的@ResponseBody返回中文乱码的原因是SpringMVC默认处理的字符集是ISO-8859-1,在Spring的org.springframework.http.conve ...

  6. 基于HT for Web矢量实现3D叶轮旋转

    在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for Web ...

  7. JAVA - JAVA编译运行过程

    Java编译原理 *.java→*.class→机器码 java编译器 (编译) → 虚拟机(解释执行) →  解释器(翻译) → 机器码 1.Java编译过程与c/c++编译过程不同 Java编译程 ...

  8. LINQ多个操作嵌套实现

    获取集合,需要使用多个条件Where,排序OrderBy,查询Select一起. 先来分步实现: source code: string[] stringArray = { "hgdgh&q ...

  9. 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

    在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...

  10. Widget的点击事件

    本文实现Widget中的按钮点击事件,点击一次下面的按钮,上面的数字减少1. 首先是Manifest文件: <?xml version="1.0" encoding=&quo ...