字体图标Icon Font

字体图标Icon Font

前段时间研究怎样做字体图标，在网上查找诸多资料，诸多尝试，找到一套可以自己制作自己独立控制的制作流程，公司按照这套流程形成一套自己公司图标，本人目前所在公司已经在使用没有发现任何bug。下面是自己就个人研究和网上资料总结的字体图标相关知识和流程。看到这篇文章的同学，使用过程有什么问题可以互相学习，嘻嘻。。。。

一、字符图标的优点

l  字体文件小，减少http请求；

l  容易编辑和维护，大小颜色等可以通过css来控制；

l  兼容性好，支持大多数浏览器；

缺点：只能被渲染成单色。

                                          不能通过字符图标实现，颜色较多

                                          可以使用字符图标实现，颜色单一

虽然是多个颜色，但是可以通过css进行控制

二、字符图标的制作

工具：（ps），AI，FontLab Stadio，在线字体转化；

步骤：1.将图标保存成Photoshop eps格式（ico.eps）；

         2.在AI中打开ico.eps，选中某个图标，复制；

            3.在FontLab中新建一组字体，双击字符进入编辑页（可以选择0-9，a-z，        A-Z），粘贴，调整图标到合适的位置大小（一定要注意基准线）；

            4.所有图标都调整完毕后，保存gentrate font（.ttf根据需求选用格式）；

            5.如需要其他字体格式，可通过在线转化工具，进行字体格式转换。                          （http://www.fontsquirrel.com/tools/webfont-generator）

三、注意事项

UI（图标制作阶段）：

1.最好使用AI软件进行图标制作，若使用PS制作需提供eps格式文件，所需图标整合到一起，排列整齐，图标颜色一律采用黑色，透明背景，制作时大小统一48*48px，图标间距48px；

         2.图标路径一定要闭合，绘制弧线时保持弧度饱满，一条路径贯穿起来（若使用形状叠加，做到拐角处链接流畅）(不可用), (可用)；

            3.删除不必要的路径，节点，保持画布清洁；

            UI是最重要的环节，后期字体的路径直接取决于图标的精细程度。

形成图标字体阶段：

            1.用AI打开eps，复制粘贴到FontLab后，若路径变形，回到AI放大后重复操作，直到路径和AI中的一样（可以锁定宽300px，高度自动）；

         2.图标必须在A、D基准线内，否则会影响使用。

            3.结合参考线控制所有图标的尺寸一致，居中排列（600*600）。

            4.解决屏幕阅读器问题，方法一html元素添加aria-hidden='true'属性；

            方法二把内容写到css里面，

            font-family:yourFont;content:attr(data-icon);speak:none;  

            统一起来可以都添加上，经测试chrome、firefox、safari、微信、qq、UC都能正常显示。      

四、字符图标的使用

现在主流浏览器（包括IE6）都支持CSS3的自定义字体(@font-face)，因此可以尝试使用font来替换图片展示网站的各种icon。但是各浏览器对于字体文件格式的支持不尽一致。目前主流浏览器对于icon font的支持如下：

l  IE：从IE4开始支持eot格式，IE9开始支持woff。

l  webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体； Safari5.1+ 开始支持woff格式

l  Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；

l  Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；

l  Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff；

l  iPad, iPhone and Android 3.0+ 支持SVG fonts。

 

使用font-face声明字体：

@font-face {

    font-family: 'gome_icon';

    src: url('../fonts/gome_icon.eot');

    src: url('../fonts/gome_icon.eot?#iefix') format('embedded-opentype'),

         url('../fonts/gome_ico2.woff') format('woff'),

         url('../fonts/gome_icon.ttf') format('truetype'),

         url('../fonts/gome_icon.svg#icon') format('svg');

    font-weight: normal;

    font-style: normal;

}

方法一：把字符直接写到html文件里。

<div class="iconFont">1</div>

.iconFont{font-family:"gome_icon".....}

方法二：使用data-icon属性。

<div class="" data-icon="1"></div>

[data-icon]:before {

    display: block;

    font-family: 'gome_icon';

    content: attr(data-icon);

    speak: none;

    -webkit-font-smoothing: antialiased;//去除锯齿，实际测试无影响}

实际用途中经常图标和文字结合使用例如：

 

 <a href="" data-icon="2">影院</a>

[data-icon]:before {

    font-family: 'gome_icon';

    content: attr(data-icon);

    speak: none;

}这种情况用data-icon写法更方便。

综上，统一为使用data-icon的写法。