UID:111779
本帖最后由 深呼吸 于
16:25 编辑
传统 app 模块中，都是定义图片，
易失真，仔细看可以发现图片中10个有9个是失真的，有时还需要适配不同分标率的设备；
灵活性差，如果想调整某一项，需要先修改图片，再上传替换；
复杂，需要先把每个图标按照规定尺寸切图出来；
体积大，之前一个app，动辄十几M，几十M。。。
网页字体——iconfont 的流行，可以完美解决这些问题，海量图标任你选择。。。
QQ截图03.png (93.29 KB, 下载次数: 19)
12:30 上传
http://iconfont.cn/help/iconuse.html
目前 iconfont 图标已经在安卓，ios app中大量使用，
矢量图标，放大不失真，“原装正品”的感觉啊，有木有；
灵活，想调节大小，颜色，改下代码马上有效；
简单，从此告别切图；
体积小到让你吃惊，iconfont 一个字体文件，几十k的样子，可以代替上百张图片，现在用 iconfont 的 app 只有1M~2M。。。
最后，建议官方将 iconfont 应用到模块中，到时候我们的app开发，就如虎添翼啦~
....自己打包不就好了, 又不是每个人需要的图标都一样!!!!
UID:111779
....自己打包不就好了, 又不是每个人需要的图标都一样!!!!
1. 目前你没办法把 iconfont 应用到模块中；
2. iconfont 是灵活调用，在模块中设置需要显示图标，不是定死的；
1. 目前你没办法把 iconfont 应用到模块中；
2. iconfont 是灵活调用，在模块中设置需要显示图标，不是定 ...
你用了多少模块?
每个模块里面有多少图标元素?
UID:111779
你用了多少模块?
每个模块里面有多少图标元素?
就actionButton这一个模块来说，至少需要6张图片；
三个按钮的navigationMenu，至少需要3张图片，如果要加点击状态，就需要6张图片；
建议用一下 iconfont，才知道有多好用
就actionButton这一个模块来说，至少需要6张图片；
三个按钮的navigationMenu，至少需要3张图片，如果要 ...
12张图片占你多大内存了,
其次, 模块是已经打包好了的, 使用外部图片, 每个人都可以自定义图片,
把图标资源一起打包进去, 每个人都用一样的图标,
从外部应用, 让模块加载进去?&&那还不如直接图片呢....
UID:111779
12张图片占你多大内存了,
其次, 模块是已经打包好了的, 使用外部图片, 每个人都可以自定义图片,
你还不明白我的意思，估计也不清除 iconfont 如果使用吧，建议你用下iconfont就知道了为什么现在越来越多的网页图标，app图标都用 iconfont
你还不明白我的意思，估计也不清除 iconfont 如果使用吧，建议你用下iconfont就知道了为什么现在越来越多 ...
大兄弟, 把字打对了再来..
UID:111779
大兄弟, 把字打对了再来..
小兄弟，不明白就别在下面瞎回复了，丢人呀
本帖最后由 丸子APP 于
17:37 编辑
小兄弟，不明白就别在下面瞎回复了，丢人呀
笑而不语, iconfont 是有兼容性的...
APICloud粉丝
我为APICloud代言！
(C) 2014 APICloud在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
字体服务 和网页是不是在不同的服务呀，如果在不同的服务器字体所在的服务需要添加 http 头响应
Access-Control-Allow-Origin:*
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
去淘宝的那个iconfront随便下载一个图标回来，他里面会给你带demo，去看看就知道了，一般引起的是图标编码错了，字体文件丢失，你没有引入所兼容该浏览器的字体类型
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。为什么我们放弃css sprite使用iconfont字体图标
时间： 07:25:00
&&&& 阅读：1029
&&&& 评论：
&&&& 收藏：0
标签：说在开头& 前面有一篇博客说道，项目中使用压缩和css sprite技术对图标进行分类和组合；& 但随着项目的不断完善，我们也遇到了很多问题：& 1.如何对图标进行分类；刚开始还比较好，我们对图标进行分类，大概有银行卡图标一类，增删改图标一类，支付类 型一类，等等。但随着，图标的不断增加和业务直接的交叉，发现分类变得很困难，渐渐失去耐心。如果，把所有图标集成到一张图；但是有这样一种情况：有些页面只使用了一个图标，同时用户只在这个页面进行操作；却要下载一整张大图，浪费资源。&&&&2.图标位置不好控制，很多时候为了background-position:定位准确，特别保证鼠标hover效果的图片区域和默认图片的区域完全重合；我们常常会1px的尝试，调整。眼睛都看花了。诸如下图：& &3.不利于维护 新增图标不得不修改真个图，有时候为了保证某一类型的在一块区域，不得不调整其他图标的位置。& 4.放大缩小，图片失真。所以，我们决定放弃css sprite重点，重点为什么选择iconfont& 1.兼容性良好。现在主流浏览器（包括IE6）都支持CSS3的自定义字体(@font-face)，因此可以尝试使用font来替换图片展示网站的各种icon。&&&&2.使用方便；开发人员直接调用样式，不用为了background-position:准确定位看瞎眼睛。&&&&3.利于维护，新增，修改，删除图标方便，各个图标之间相对独立。&&&&4.体积很小,请求速度快，可以带来比较好的用户体验。&&&&5.矢量图，放大，拉伸不会失真。& 有些人，可能会觉得字体图标过于单调，在动画，过渡，阴影方面显得吃力；但是，在我看来这些效果并不能对用户体验造成很大影响；相反，字体的体积小，页面加载快；hover,mouse事件时，切换效果很顺畅；反而能提高用户体验。& 下面分享一下目前项目中使用的iconfont实例；& & 生成图标的过程我就略过了这个需要跟UI协同合作，建议使用FontCreator，推荐一篇博客 效果图如下：（文章附件，会附上我们项目目前的字体图片库）首选利用font-face获取字体文件@font-face&{font-family:&"iconfont";
&&src=\‘#\‘" /*&IE9*/
&&src=\‘#\‘" /*&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-&*/
}从网上，找了一下目前主流浏览器对于icon font的支持情况，如下：IE：从IE4开始支持eot格式，IE9开始支持woff。webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体； Safari5.1+ 开始支持woff格式Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff；iPad, iPhone and Android 3.0+ 支持SVG fonts。所以，我们生成了:eot,.woff,avg等格式的字体文件使用方式大概有两种：1.直接下字体图标对应的编码&&i&class="icon&iconfont"&&/i&
&&&&&&&&&&&&&&&&&&&&&div&class="name"&下载&/div&
&&&&&&&&&&&&&&&&&&&&&div&class="code"&&/div&
&&&&&&&&&&&&&&&&&&&&&div&class="fontclass"&.xiazai&/div&
&&&&&&&&&&&&&&&&&/li&我们不建议，这样做，因为这个我们需要记住编码；而且看代码时候，不能知道这个图标的含义2.通过伪类：（建议用这个，不用记忆，看代码时，也能知道图标意思）&i&class="icon&iconfont&icon-xiazai"&&/i&
&&&&&&&&&&&&&&&&&&&&&div&class="name"&下载&/div&
&&&&&&&&&&&&&&&&&&&&&div&class="code"&&/div&
&&&&&&&&&&&&&&&&&&&&&div&class="fontclass"&.xiazai&/div&
&&&&&&&&&&&&&&&&&/li&对应的样式如下：.icon-xiazai:before&{&content:&"\e670";&}
.icon-yixuan:before&{&content:&"\e671";&}这样我们就可以把这些图标当文字控制比如：color,font-size属性就可以使用了。说在最后&想写这篇文章很久了，终于加班完成了。&注意：附件为，我们的字体图标库。&&本文出自 “” 博客，转载请与作者联系！标签：原文地址：http://shuizhongyue.blog.51cto.com/0896
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！用16进制编码的字体图标在部分小米机型显示不正常。
测试机型：小米1，小米1s，小米2浏览器：微信6.1内置浏览器，QQ浏览器 5.7 X5内核字体图标：不显示svg图标：显示正常
以下来自额微信内置浏览器的截图，字体图标不显示。
内置浏览器，uc浏览器，正常显示，以下为内置浏览器截图。
如 Glyphicons 官网的字体图标就显示不正常，svg图标显示正常。
Glyphicons 官网：http://glyphicons.com/
截图来自QQ浏览器（新版微信采用QQ浏览器内核）访问Glyphicons 官网，右侧杯子部分是SVG的图片，显示正常；右侧红色标签隔壁空白部分，一堆的iconfont图标都显示异常。
国内阿里Iconfont：http://www.iconfont.cn/ & &官网采用SVG绘制正常显示，下载回来的demo显示不正常。
以下截图来自阿里Iconfont下载回来的demo。
&偶尔发现icomoon首页的图标采用了字体图标，但是能正常显示。icomoon官网地址：https://icomoon.io/
/* icomoon 的@font-face声明字体如下*/
@font-face {
font-family: 'icomoonio';
src: url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.eot?bqv7mo");
src: url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.eot?#iefixbqv7mo") format("embedded-opentype"),
url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.svg?bqv7mo#icomoonio") format("svg"),
url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.woff?bqv7mo") format("woff"),
url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.ttf?bqv7mo") format("truetype");
font-weight: normal;
font-style: normal
/*定义使用iconfont的样式*/
.ff-icomoon {
font-family: 'icomoonio'
/*获取字体编码，应用于页面*/
[data-icon]:before {
font-family: 'icomoonio';
content: attr(data-icon);
/*获取标签的data-icon字体编码，与平常我们的方式不太一样*/
speak: none;
/*取消发音*/
line-height: 0
各种分析调试对比后发现，原来是加载顺序有问题。
移动端有问题的加载顺序：eto，woff，ttf，svg
//有兼容问题的字体图标加载顺序
@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- */
移动端字体图标加载顺序应该为&eto,svg,woff,ttf(把SVG放到前面)&
//移动端字体图标
@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot'); /* IE9*/
src: url('../font/iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */
url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
url('../font/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
&不过用fiddler抓包，只看到手机请求了svg，兼容情况良好。
SVG字体兼容如下图：&http://caniuse.com/#search=svg%20font
据说安卓4.1一下不支持SVG，但是没机器，测试不了，有Android 2.3的朋友帮忙测一下给个留言感激不尽。
在ios系统图标会往下错位，如下图：
设置一下默认行高为1即可。
.iconfont{line-height:1;}
设置默认行高后。
阅读(...) 评论()}