首页 >> 秀友百科词条 >> 其他类别词条 >> iconfont图标怎么下载

iconfont图标怎么下载[编辑]


概述
iconfont图标怎么下载是指如何利用字体工具把平时web上用的图标转换成web fonts的技术方法。

一、iconfont图标怎么下载简介

iconfont图标下载是指利用字体工具把平时 Web 上用的图形图标(icons)转换成 web fonts,就成了 icon fonts,它可以借助 CSS 的 @font-face 嵌入到网页里,用以显示 icons的一种技术。

二、什么是iconfont?

利用字体工具把我们平时 Web 上用的图形图标(icons)转换成 web fonts,就成了 icon fonts,它可以借助 CSS 的 @font-face 嵌入到网页里,用以显示 icons。因为字体是矢量化图形,它天生具有「分辨率无关」的特性,在任何分辨率和PPI下面,都可以做到完美缩放,不会像传统位图, 如:png,jpeg,放大后有锯齿或模糊现象。

三、为什么要用iconfont?

除了「分辨率无关」这个最大的优点之外,icon fonts 还具有:
文件小:相比图片几十几百KB的容量,icon fonts 几乎是羽翼级轻量。
加载性能好:因为图标都被打包进一套字体内,http request 减少。这如同我们常用的 css sprites 技术。
支持CSS样式:和普通字体一样,你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…
兼容性好:web fonts 起源很早,别说主流浏览器,连IE6/7都能良好支持。除了一些老的移动端浏览器,如Android 2.1以下的初代浏览器,Opera mini 这类自限型浏览器。
当然 icon fonts 也有它的不足:
样式单一,无法针对不同分辨率来调整icon 的细节,比如降低大尺寸icon 的线条粗细。
颜色单一,CSS 无法方便的去定义彩色的 icon,倒是有通过叠加组合的方式来达到彩色图标的目的。
移动端浏览器兼容性还不够完善,像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。
有少量的移动设备有可能会和 icon fonts 的字符编码冲突,导致icon 显示不正常(我们自己风车Android 版本就碰到了这个问题)。
所以 icon fonts 也并不是一套完美的响应式图片的解决方案,当它适宜你的应用场景时,比如:
你的网站是扁平化或简约风格,图标样式单一,颜色为纯色。
你的目标用户使用桌面浏览器为主,或者,你愿意为非兼容设备做兼容hack。

四、操作步骤

步骤一

参照 iconfont.cn 提供的图标制作模版,在Illustrator 画布的16x16网格内,参考基线、上升部、下降部来调整图标大小和位置。
调整矢量图标需要注意几点:
图形需要闭合,不要用stroke,否则会显示不出来
图形合并并扩展
用单色
在16x16画布中进行排版,这样制作好的icon fonts 16px 大小的时候和其它字体保持一致。
步骤二

然后从Illustrator 保存为SVG文件,使用默认的SVG设置即可。

步骤三

你可以拖动一个或多个SVG图标到iconfont.cn 的上传表单,完成上传后会提示设置名称和tag,点击「完成上传」开始生成icon fonts 。生成完成后,你可以点击要下载的图标加入购物车,然后「下载至本地」。
步骤四

解压刚下载的文件包,除了EOT、SVG、TTF、WOFF四种 web fonts 字体外,还有个 demo.html 展示所有 icons 及其对应的字体编码。之所以有4种字体格式,是考虑到不同浏览器不同平台对字体格式的支持不一样,具体看下面 CSS 里的注解。
复制4个字体文件到 assets 或 fonts 目录下,然后在 CSS 文件加入 @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#uxiconfont') format('svg'); /* iOS 4.1- */}
再定义一个 icon-* 通配我们所有图标的共有 CSS 样式,[class^="icon-"], [class*=" icon-"] {
display: inline-block;
speak: none
font-family: "iconfont";
font-size: 16px;
line-height: 1;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
最后是利用 :before 来注入每个 icon 对应的字体编码
.icon-bell:before {
content: "\003432";}
.icon-search:before {
content: "\003433";}

 

参考资料:
扩展阅读:
相关词条:
合作编辑: 陈燕 

秀友百科词条内容均由网友提供,仅供参考。如发现词条内容有问题,请联系管理员。

词条信息

浏览次数:2

编辑次数:0历史版本

创建者: 陈燕

最近更新:2016/11/28 5:38:12

关于秀友百科| 版权声明| 联系方式| 常见问题

秀友百科是网络营销能力秀指定的教学实践平台

深圳市竞争力科技有限公司版权所有