您的位置:首页> 日志> 前端技术 正文
DTOP

图标字体应用的简单介绍

卓文静 | 2015年03月30日 |

>>收藏本文 已有 0条评论

 

    最近看了一些有关字体图标方面的文章,分享一下自己最近学到的东东,在不少的网站中,有很多小的纯色图标,都应用到了字体图标,使用图标字体能我们带来了一定的方便

    字体图标的优势:

    1、字体图标比位图清晰且轻量:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。

    2、字体图标灵活:图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。

    3、字体图标兼容:网页字体支持所有现代浏览器,包括IE低版本

    除了以上优势之外,当然也有劣势

    1、图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用。

    2、使用版权上有限制,有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

    3、创作自已的字体图标很费时间

    字体图标试用:

    第一步:使用font-face声明字体

@font-face {font-family: 'iconfont';

    src: url('iconfont.eot'); /* IE9*/

    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('iconfont.woff') format('woff'), /* chrome、firefox */

    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

    第二步:定义使用iconfont的样式

.iconfont{

    font-family:"iconfont" !important;

    font-size:16px;font-style:normal;

    -webkit-font-smoothing: antialiased; /*字体图标出现锯齿的问题*/

    -webkit-text-stroke-width: 0.2px;

    -moz-osx-font-smoothing: grayscale; /*字体图标出现锯齿的问题*/}

    第三步:挑选相应图标并获取字体编码,应用于页面

<i class="iconfont">&#x33;</i>

http://www.iconfont.cn/  阿里巴巴矢量图标库介绍了很详细的字体图标使用和字体库的下载,使用起来很方便,不过要制作自己的字体图标很费时间

其他参考文章  http://isux.tencent.com/icon-font.html   http://sc.chinaz.com/info/130228237055.htm

点击这里下载例子:/UploadFiles/upload/201503301117216120.rar