Iconfont在移动端遇到问题的探讨_HTML5教程_前端技术
您的位置： &
& 详细内容
　Iconfont越来越得到前端的关注，特别是阿里那个iconfont库的推出和不断完善，再加上连IE6都能兼容，的确是个好东西。
　　既然那么火，我们公司移动项目也计划加入这个iconfont，于是我就针对我们自己的项目做了个测试，主要是偏向移动端的浏览器。在做demo测试过程中，发现了一个兼容问题：iconfont在安卓大部分浏览器显示成问号+菱形？
一开始觉得，既然ie6都能兼容，这些webkit浏览器应该不是问题。本Demo的iconfont来自 阿里妈妈MUX 在线生成，官网&，包含了淘宝图标库和阿里妈妈图标库。另外还有很多其它优秀的iconfont库，比如&&&
　　首先我们看一下Iconfont的两种插入方式
　　第一种，直接插入到HTML里面
&i class=&iconfont&&&#x33&/i&
　　这种插入方式在兼容性测试暂时没发现什么问题，看上面的demo对比发现，在移动的绝大部分浏览器都能正常显示，但是opera经典浏览器和opera mini浏览器都无法正常显示（IOS和安卓都是），貌似是不支持？在pc端opera是ok的。
第二种，通过css的content属性来插入
.icon-weibo:before { content: &\349f&; }
　　由于我们的项目是移动端，所以更倾向于第二种，因为放在html里很不方便，每次修改意味着需要动结构内容。
　　但是在用第二种方法的时候，发现有部分icon在大部分浏览器显示成菱形背景加问号，如图
上图的搜索、笔记本论坛、全部论坛图标都是iconfont来的，都能显示正常，但是有好几个都出现了菱形加问号，为什么通过css的content属性导入的iconfont会有问题的呢？
上面的截图来自，魅族2的自带浏览器，然后也测试过其他的比如UC/QQ/百度/海豚等浏览器，除了在chrome下是正常，其它都是这几个不正 常，都是菱形加问号。但是奇怪的是其它几个是能够正常显示的，而且采用第一种插入到html的方式，是全部icon都正常的。另外，iconfont在诺 基亚520下的ie也能够正常的，520的系统貌似是wp8，应该是IE10.
　　后来，把那些无法显示的icon和能够正常显示的icon做了详细的对比，发现一个特点，无法显示的icon的16进制的编码都是5位数，而正 常显示的icon都是4位数，并且我在查资料的时候，发现有人提到过iconfont可能会有编码冲突的问题。所以我重新iconfont库上修改编码 （阿里的iconfont库支持自定义编码），再做了demo测试，同样的icon，修改之后，都能够正常了。
　　比如，一开始微信icon的16进制编码是 &f0003&，无法显示，后来改成&3465&可以正常显示
上图是在魅族2的UC截图的，其它浏览器也是能够正常显示，大家可以拿我上面的demo测试下。
　　这个问题在出现时找了很久，貌似没找到，不知有没有童鞋在移动端遇到和我一样的问题呢？至于低版本的安卓，由于设备原因还没经过测试。
&　后来为了证实这个猜想，分别测试icomoon库和fontello库。icomoon库支持自定义编码，也是证实了这个问题。fontello库不支持自定义编码，默认也是4位的。
( 15:48:26)
( 00:21:34)
( 08:53:41)
( 10:20:29)
( 02:32:34)
( 18:47:44)
( 00:17:07)
( 09:38:55)
相关排行总榜如何在移动端app中应用字体图标icon fonts - 推酷
如何在移动端app中应用字体图标icon fonts
对于可缩放的自适应设计来讲，Icon fonts是一种惊人的解决方案。
在开发native app时，你应该记住icon fonts技术有多项超过位图的高级特性，这些特性所带来的好处会影响你的设计工作流，以及产品的最终品质。
可缩放性（Scalability）：
基于字体的icon是与分辨率无关并能缩放到任何想要程度的技术。你的图标看起来毫不关心retina,HDPI,XHDPI等等屏幕，但渲染时会根据目标设备自动调整，你将有能力应对任何当下，未来，或大多数任意规格的设备
尺寸（Size&）：
裁剪到正确的比例，icon font的文件的大小要比起位图小到难以置信的程度，使用icon font时，你不需要根据不同设备准备不同的图片，你的APP只需要在启动时加载一次icon font文件即可。
可维护性（ Maintainability ）：
自你的icon打包进一个字体文件，在项目自始至终你仅需要维护这个单一的字体文件。
通过管理字体文件你可以很自然的组织你的icon集合，任意的进行修改或扩展
可推广性（Adoption）：
然而，应用这样的icon fonts可能会影响你和你同事之间的工作流程，但说服让他们采用这样的技术也非常简单，有数款免费或收费的工具帮你轻松达到目的并能看到很好的应用结果，在几乎任意（手机）移动平台、浏览器或操作系统
灵活性（Flexibility）：
应用icon fonts技术中最有意义的一项能力是可以操纵icon fonts， 改变颜色，大小，仅仅几行代码就可以在瞬间改变外观
可交互性(Interactivity)：
由于灵活性以及能够通过代码方便的操纵，icon fonts 是独一无二的在运行时被操纵，通过应用icon fonts技术， 你能轻松的在不同状态显示对应的不同效果，创建动画。
虽然icon fonts为设计提供了众多好处为一些有趣的设计提供可能性，自然地，它也不是全权的解决方案。一旦你的设计中需要的颜色超过一种，实现复杂的视觉设计，icon font就有限制了。无认如何，主流与非主流的icon fonts都能在互联网上找到，在我们使用之前web设计界已经很流行了，并有很多服务帮你创建梦幻的icon fonts集合
通过xcode中的outlet connection, 在view呈现后，你还能很方便的改变label
Using icon fonts on iOS
在IOS中使用字体图标
在IOS中应用icon font非常的简单粗爆。在一开始你最好通过使用Fontello或IcoMoon收集一些图标并整合进你的APP。另一种方法是你自己花时间自己做出来，但创造性的工作的总要花掉你很多时间。
那么现在我们仅仅需要将得到的icon整合进我们的APP
你只需要懂得IOS开发基本的文件结构以及.tff后缀的字体文件icon font
为了测试icon font技术，我们在Xcode内新建一个 Single View Application 的工程。工程建完后就把你的字体文件复制进工程目录，如果不出什么意外，你应该在你的 Project Navigator 中看到对应的字体文件了
为了让Xcode理解你将要如何使用导入的文件，你得在你的应用程序的Info.plist内建立“链接”。这个plist文件在Supporting Files文件夹内，表现为meta data即可理解为hash表。为了在编译app时能包含进你的字体文件，在list上简单新建一行（右键然后add row）名字选择为 Fonts provided by application ，在其下给字体文件取个名字，名字就是你的应用程序中用来识别你的字体文件的。在我们这个测试工程中，值为fontello.ttf。现在Xcode知道了我们导入的文件能干什么，我们能在程序中使用导入的字体文件了
把你的app切换到storyboard模式，在view中你喜欢的地方放一个label组件用来显示icon，在设置完label后，我们需要建立一个outlet。
在storyboard中做这些事情都很简单，在 Assistant Editor Mode模式下
此模式下显示了你的图形界面和ViewController界面。现在简单的按住ctrl键，从label组件拖动就会现线条，直接拖线条到ViewController到@interface这行代码上放开就会弹出一个小界面，输入名称，比如 iconLabel，outlet就建成了，代码中你会发现多了下面这样一行：
@property (weak, nonatomic) IBOutlet UILabel *iconLabel
现在你就能通过代码来控制label组件了，通过编辑ViewController（.m后缀的文件）设置label。在viewDidload方法内加入以下几行代码，就像下面那样
( void)viewDidLoad{ 　　[super viewDidLoad];
　　[iconLabel setFont:[UIFont fontWithName:@&fontello& size:130]]; 　　[iconLabel setText:[NSString stringWithUTF8String:&\u2692&]]; }
添加的第一条代码用来定义字体应用于label并设置字号，这里我们设置了130pt
在使用这些命令时要注意字体名称，这里要填写字体的真实名称，即在字体簿打开的字体名或任何其它编辑器内能显示的字体名称。特别注意这点，因为字体名很可能与字体文件名称不一样
在第二行中文字用Unicode字符 Hammer and Pick (2692) 编码。
虽然有点神秘，获取icon字体的unicode字符编码还是比较容易的。可以使用字体编辑器，或者直接上传到Icon Moon这类网站，你可以毫不费力的将icon字体转换成unicode编码
你可以通过Android XML 语法来申明任何你想要的UI属性
Colours, gradients and shadows
现在icon“引用”已经建立，你都搞定了。在我们通过代码操作label前，你得先运行看看你的工作成果。最终，这也是你将icon字体合并进app所要做的。从现在开始有趣的事儿才开始。文本的所有操作都由你掌控了，例如：颜色，透明度，渐变，阴影。
例如应用以下几行代码 ，让icon变成红色+阴影：
iconLabel.textColor = [UIColor redColor];
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);
有许多效果可以使用。一些相对来说比较复杂，但所有文本效果都通用。动画或任何复杂的操作只要你能想到的都可以做了
Using icon fonts on Android
在Android中应用字体图标
同样的，在开发Android应用时也一样能使用icon fonts就像用在ios上面一样，能得到一样的好处。
就应用范围而言，Android更加有意思更有用。因为Android有着更多不同分辨率，不同屏幕的设备平台。最重要的是Android默认不支持矢量图形，这对开发者和设计人员面对不同Android设备时可是一个重大打击
在开始开发你的新Android应用之前，你仅需要知道一个app最基本的文件构架，同样的icon font文件也是.tff后缀，使用包含了Android ADT的Eclipse IDE，你可以开始新建一个Blank Activity的Android Application Project。在项目设置后，复杂.tff文件到你的资源文件目录内。一旦复制成功，Package Explorer面板内应该能看到
接下来，在你的Main Activity View内创建一个TextView。你可以在layout文件夹内找到你的资源文件。文件名应该是 activity_main.xml。在多数情况下，Android SDK已经将一个文本为“Hello world”的TextView放到了你的View内，我们就能使用这个TextView了。
在定义Icon各属性后，你能在模拟器内看到你的icon了。
为了操作TextView,我们需要将图形模式切换到切换到XML View内。现在为TextView添加一个ID，以便接下来UI和代码建立引用关系
你的TextView应该看起来像下面这样
&TextView android:layout_width=&wrap_content& android:layout_height=&wrap_content& android:text=&@string/hello_world&
android:id=&@+id/iconLabel& /&
通过使用ID，我们能够在APP内任何地方操作TextView。现在你可以切换到MainActivity.java文件添加一些代码来加载icon font了。在 MainActivity内有一个方法名为onCreate的方法。加载和应用icon fonts都在此方法内，如下
TextView iconLabel = (TextView) findViewById(R.id.iconLabel); Typeface font = Typeface.createFromAsset(getAssets(), &fontello.ttf&); iconLabel.setTypeface(font); iconLabel.setText(&\u2692&);
和上面的IOS例子很像，通过引用到label组件，我们告诉Android应该使用哪个自定义字体到TextView上面。之后几行使用Unicode字符编码，这次以JAVA方式而已。运行程序后你就可以看到你的icon在Main Activity的View上了
在应用成功后，你可以根据你的需要操作icon了。Android UI构建通常由interface builder或组织XML文件来实现，要添加一些效果，只要回到Main Activity的XML部分找到添加了Label ID的地方，添加一些代码就可。例如添加以下代码会让你的icon变大，带点透明的红色，并伴有阴影。
android:id=&@+id/iconLabel&
android:textSize=&120dp&
android:textColor=&#ccff0000&
android:shadowColor=&#&
android:shadowRadius=&2& /&
有很多的效果可以应用。就像在IOS中一样，动画或者复杂的操作都由你掌控了。最大的好处是自定义的icon fonts可以广泛的适配各类操作系统。任何支持自定义icon fonts的平台都允许你使用全新的这些效果
使用字体编辑器，你能优化现存的icons或解放你的思想让你创建出自己的杰作
在开发native app时使用icon fonts有着难以置信的好。考虑到icon fonts的可缩放性，在你设计任何移动设备APP时，你几乎可以忽略屏幕大小及分辨率。最大的好处莫过于，在app中icon fonts的灵活性，在整个app运行过程中中都可以操作，支持实时效果和动画。此外由于icon fonts较容易的适配，在设计工作和主要管理工作中可以增强整体工作流程事半工倍，无论面对的是何种分辨率或屏幕密度。
要应用字体图标，首要的条件还是要拥抱扁平化的设计
为什么要扁平化？
让设计从技术实现上更简单
苹果，谷歌，微软，都相继推出扁平化或类似的设计语言
在手持设备或车载设备上，扁平化的大色块设计更容易识别与操作
HTML5实现扁平化的UI性能更好
扁平化大色块的设计，使用PNG图片拥有更好的压缩比率，图片文件更小
========================================================
英文原文，可能需要翻qiang：
英文水平有限，凑合着翻，全当自我学习欢迎交流学习
转载处请注明：博客园(王二狗,池中物)
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致还没有任何记录...
阿里字体图标库介绍及图标字体的使用方法
作者： 懒人建站
先来看个图标库页面截图 阿里字体图标库介绍及图标字体的使用方法，很多前端或者网页爱好者可能早就用过字体图标，2016年了网页中使用图标字体如果你还没听说过或者很陌生，那你
阿里字体图标库介绍及图标字体的使用方法，很多前端或者网页爱好者可能早就用过字体图标，2016年了网页中使用图标字体如果你还没听说过或者很陌生，那你就要赶快看看这篇阿里字体图标库使用介绍了。
这篇文章只讲阿里字体图标库的使用，暂不讲图标制作，阿里矢量图标库上的字体图标已经很多了，几乎项目中需要的图标大部分都能找到。
字体图标的好处：字体图标是矢量的，可以无限放大不模糊，可以通过改变字体颜色color来改变图标颜色，再也不用做图片雪碧图了，换图标的话，如果保持名字和编码不变的话，就不用更改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#iconfont') format('svg'); /* iOS 4.1- */
第二步：定义使用iconfont的样式
.iconfont{
font-family:&iconfont& !
font-size:16font-style:
-webkit-font-smoothing:
-webkit-text-stroke-width: 0.2
-moz-osx-font-smoothing:}
第三步：挑选相应图标并获取字体编码，应用于页面
&i class=&iconfont&&3&/i&
如果不能直观的知道字体图标啥样子了，就打开字体包中的demo.html看一看，你要登录阿里字体库网站项目中查看也可以。
注意：谷歌浏览器不能直接打开demo.html查看到字体图标，需要在服务器环境下才可以，我用的webStorm在预览html的时候，就类似于一个web服务器
本文链接：/html+css/htmlcssjq/ali_iconfont.html
阿里字体图标库介绍及图标字体的使用方法由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
(责任编辑：懒人建站)
阿里字体图标库介绍及图标字体的使用方法-相关文章
来自百度的搜索推荐ICONFONT在APP中的使用
我的图书馆
ICONFONT在APP中的使用
阿里IconFont平台这里是阿里巴巴UED部门开发的IconFont平台，目前阿里系的重量级产品都在使用，里面有很多资源可供使用。这里说说如何在客户端内使用。IconFont虽然看起来是图标，实际原理跟字体的实现方式是一样的，所以我们把每个Icon当作一个特殊的文字来理解和处理。IconFont使用1、首先登录网站，搜索你要用的Icon，把它们加入购物车（点击就可以）。2、把购物车里的所有Icon存储在同一个项目中。3、进入项目，选择“下载至本地”。4、打开下载的文件，里面有一个*.ttf文件，我们需要的所有字体就都在这里了。5、把*.ttf文件放入项目，当使用时，把TextView（Android）或UILabel（IOS）的Font设置为加载*.ttf生成的自定义字体。这里有个问题，怎么指明我们要显示哪一个Icon呢？6、下载一个字体编辑软件，我在Mac上面使用的是FontLab Studio，打开*.ttf，找到每个图标对应的Unicode值，以”\ue600”这种形式赋值给TextView（Android）或UILabel（IOS）中的文本。就可以了。IconFont优势1、图标集中处理，避免重复资源，设计师只要说明Color、Size就可以了。2、减少包大小，每个IconFont只是一小段文本，文件大小要比图片形式的icon小一个数量级。3、节省内存，IconFont与普通文本一样是使用矢量图的方式绘制的，相比图片的内存分配方式，消耗的内存可以忽略不计了。
TA的最新馆藏[转]&