w图标生成原理. <style> @font-face { font-family: iconfont-sm; src: url(//at.alicdn.com/t/font_1433401008_2229297.woff) format('woff'), url(//at.alicdn.com/t/font_1433401008_2229297.ttf) format('truetype'), url(//at.alicdn.com/t/font_1433401008_2229297.svg…

转自http://www.tuicool.com/articles/QVf6nei 一.webfont与@font-face 什么是webfont web font,又称之为 在线字体 或者 网络字体 ,是CSS3中的一个模块,主要是把自定义的特殊字体嵌入到网页中.无需安装,无需下载,直接在线使用. @font-face语法 web font技术需要通过CSS的 @font-face 语句引入在线字体. @font-css是CSS3中的一个模块,通过它可以将自定义的字体嵌入到前端网页中.随着@f…

我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. 下面,我将介绍如何使用iconfont图标字体. 假设,有一个项目,在登录的时候需要两个小图标,一个是代表帐号,另一个代表密码的图标,大概就是这样: 图片的红框处,我们需要俩个小图标.以前的做法肯定是做图片啦,现在就可以用iconfont字体图标代替了.操作如下: 第一步:你得有一个阿里巴巴矢量图…

这周继续在弄hybird app 的 UI框架的重构,进行到了编写换肤功能的阶段,而在做换肤之前,我想应该先弄一套框架内置的图标. 而图标无非就是两种做法: 1.图片 使用图片很正常,但是有缺陷的. 1.众多的图标导致了增加了许多HTTP请求 PS:有人会说我把它们弄成一张大图不久行了,可是这样弄了之后,你连大小都无法改变.所以肯定还是一批小图片. 2.放大缩小失真 3.同张图片如果需要不同颜色,又得弄多一套出来. 2.字体 也就是这篇要说得Icon Font.做法就是讲你的图标做成字符,然后用…

CSSDesk body { background-color: #2574b0; } /*! zybuluo */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{…

CSSDesk body { background-color: #2574b0; } /*! zybuluo */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{…

1. 第一步.准备svg格式图片 2. 登陆http://iconfont.cn/网站,上传图标. 3. 选中需要制作成iconfont的图标. 4. 将选中的图标转储为项目 5. 下载至本地. 6. 使用: a. 引入下面四个文件 b. 添加css到css文件内 @font-face {font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('…

一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢 在线教程:用字体在网页中画ICON图标 http://www.imooc.com/learn/243 免费图标: https://icomoon.io/#home 制作font教程: webfont应用系列(一)位图如何转成矢量?http://ntesmailfetc.blog.163.com/blog/static/206287061201241854857235/ webf…

1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧会出现一个预览窗口,显示我们前面加入购物车的那些图标,我们选择页面中的下载代码 5.查看一下我们的下载包里面都有什么文件 6.使用fontclass方式其实在下载的文件里面demo_fontclass里面说的已经很详细了,我们在此基础上,再说明一下. 6.1font-class是unicode使用方…

font-face自定义字体,iconfont就是把各种图片做成字体.iconfont优势: 字体文件小,一般20-50kb: 容易编辑和维护,尺寸和颜色可以用css来控制: 透明完全兼容IE6:     http://www.qianduan.net/zai-shuo-iconfont-he-font-face.html   webkit下可以做渐变: margin: 0 0 0 50px;      font-size: 50px;      font-family: 'HelveticaN…