让ICON性感起来

提　要

本分享旨在介绍网页中font-face引用 Icon Font 的实例应用。通过从以下5方面全面介绍，让项目开发中的各个环节对Icon Font都有一定的了解。

 Icon Font 是什么？

非安全字体中的 Icon Font 

Tips：

网页安全字体与非安全字体：

所有平台都预装的字体，被称为“安全字体”，因为它可以保证所有用户的视觉效果是一样的。反之，仅仅少数平台或终端上安装的字体，为非安全字体。

非安全字体的解决方案

1. 通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体
2. 使用cufon-yui.js库进行渲染
3.  Google font 或者 Google API
4. 图片代替

Cufon实现原理

Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。

借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。

谷歌字体API实现原理

谷歌字体API就是一个支持高质量的开源字体文件的服务，你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展，将会有越来越多的字体类型可供你选折。

@font-face实现原理

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体。传说中@font-face这个功能早在IE4中，也就是15年就支持了。（那年头你知道互联网是什么东东吗？）

以 前

很遗憾的是，以上技术在中文页面中出现了水土不服，因为中文字体体积庞大，鲜有在实际项目中使用。因此，基本上我们仍然只能在我们的网页中看到“宋体”，“黑体”和后来的“微软雅黑”。以上的解决方案仅仅停留在国内页面重构的技术层面。

现 在

但随着CSS3对字体样式的不断丰富，即便在中文网页中对font-face尤其是web app中赋于了新的应用场景，那就是用 Icon Font 代替页面中的图片。接下来也就是本次分享的重点。介绍 Icon Font 的制作以及在网页中的应用。

PS：我将此技术介绍给一个业内资深的朋友，他描述为可能将进入一个"新时代"。

 

 Icon Font 可以干什么？

Icon Font 的样式

虽然我的颜色有点风骚，但我同样是字体哦~~

但是我在Android中，就杯具了~~成为了一坨一坨的块状

原因：我们用了渐变填充和文字蒙板，仅pc端webikit内核浏览器支持。移动端webkit貌似无视此css3新属性。即便在 Android4.0里测试，也是如此。

1background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEBB47), to(#248F24));

2-webkit-text-fill-color: transparent;

3-webkit-text-fill-color: transparent;

4-webkit-background-clip: text;

 

为什么推荐使用 Icon Font ？

Icon Font 的优点

1.  轻薄：Market项目中原icon图片背景27K（如果做成半透
2. 明发光，阴影效果会达到100K），目前全部用6K的字体代替。
3. 丰满：并且添加hover，click等状态效果更灵活。
4. 百搭：在不同的分辨率屏幕上适配缩放不失真！
5. 安静：由于体积小，可实现通过base64编码能置于样式表内。从而没有了http请求。　　

Icon Font 的缺点

1. 样式不如图片丰富。但是，我们有很多场景是用纯色icon，特别是在Windows 8这种Metro UI开始越来越多的时候。
2. 文字渐变在Android平台上无法显示，在充满未知的将来一切或许都会后得到解决。
3. 3、重构成本相应提高。熟练之后其实也充满乐趣。
4. 页面重构越来越背离“切图”这个不准确的描述。用轻量级代码还原UI，优化设计稿是页面重构最核心的任务。

 

如何制作一套 Icon Font ？

通过网上查阅教程，普遍推荐的制作工具为

1、Coreldraw是唯一能把矢量图形导出为TTF格式字体的绘图软件。

2、fontcreator是一款强大的专业字体制作软件。

但是，Coreldraw生成的TTF字体不能在为font-face调用，需要进行同格式的转化。并且由于UI均在PS中制作，绘图成本增加。经过对fontcreator的摸索，发现，ps+fontcreator是最佳拍档，利用fontcreator自带的从位图中获取路径的功能，从PSD中提取转化 Icon Font ，十分精确和便捷。

Icon Font 的制作

步骤1:

在UI设计中使用钢笔及形状工具绘制路径填充的矢量ICON。

步骤2:

放大路径，栅格化图层，以png24无损压缩格式为每一个字符输出一张图片。

步骤3：

在fontcreator中，新建字体文件。选中单个字体元素右键菜单“Import image”导入。

 步骤4：

在fontcreator中，对字体的参数进行调整。

步骤5：

在fontcreator中，按F5对所有字符在类似于记事本中窗口中检查。调整合适后，保存为TTF格式。就可以给font-face使用了。

 

网页中如何使用 Icon Font ？

Icon Font 的使用 

转化：把icon转化矢量图形，制作成字体。

加载：用css3的@font-face将非系统字体加载到页面中。

嵌入：用css3的before，after，content伪元素嵌入 Icon Font 。

控制：用css3的基本属性控制字体的大小，颜色，发光，阴影等样式，从而实现不同状态的效果。

font-face调用

01/*font-face default*/

02 

03@font-face {

04 

05font-family: 'aplus-icon';font-style: normal;

06 

07src: url(aplus-icon.ttf) format('truetype');

08 

09}

10or base64编码 

11 

12@font-face {

13 

14font-family: 'aplus-icon';font-style: normal;

15 

16src: url(data:font/ttf;省略6千个字符....=） format('truetype');

17 

18}

字体定义

01[class^="icof"]::before{

02font-family: 'aplus-icon'; font-size:22px;font-style:normal;

03}

04 /**单独定义字符**/

05.icof_star::before{content:"B";}

06 

07.icof_book::before{content:"C";}

08 

09.icof_add::before{content:"D";}

10 

11.icof_hot::before{content:"E";}

示例一

HTML结构

01<nav>

02 

03   <div><span class="icof_star current">新品</span></div>

04 

05   <div><span class="icof_bulb">推荐</span></div>

06 

07    ......

08 

09</nav>

10<i class="icof_hot"></i>

11<i class="icof_new"></i>

HTML结构示例二

01<div class="star">

02 

03<i class="icof_star"></i>

04 

05<i class="icof_star"></i>

06 

07<i class="icof_star gray"></i>

08 

09<i class="half">B</i>

10 

11<i class="icof_star gray"></i>

12 

13<i class="icof_star gray"></i>

14 

15</div><!--end star-->

Q & A：

A：原理犹如码积木，代码量太大，样式复杂。 修改颜色，大小，不灵活。 无法添加阴影，发光效果。 总之，此方法很下流，将来恐也不会普及。

Q:  兼容性如何？

A：font-face其实在IE4中已经支持，或者说css2的时代就已经出现，但是只支持特定格式的字体， 目前css3中可以通过添加几种字体来适应不同内核的浏览器。 但是鉴于移动端手机主要采用webkit内核，以及公司业务主要在手Q浏览器和Q立方上，因此，只针对webkit制作TTF格式字体。

Q：为什么要画字体，不使用老外或总部提供的。

A:  1、一般来讲，个性字体都有版权问题。自己定制，可以避免这个问题。 2、通用字体，图案固定，且并不在某个项目中全部用到，直接调用，造成浪费，可能会得不偿失。

 

http://fico.lensco.be

在这个PPT经完成后，浏览关于流动布局的国外帖子时，偶然看到这个网站，情何以堪呀？

 

推荐在线工具：

特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，下面我给大家推荐一款我常用的一个工具fontsquirrel http://www.fontsquirrel.com/fontface/generator
Cufon字体文件转换

http://cufon.shoqolate.com/generate/

靠谱的base64 ttf转换工具

http://maclife.net/tools/base64/

(Thanks for your time ! 完)

 转载：http://cube.qq.com/?p=476