web字体图标制作_web前端怎么用iconfont 调节字体大小

❶ 如何使用Font Awesome字体图标

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等，可以免费用于贸易项目。
下面仅记录应用步调：

1.到官网高低载最新版本的Font Awesome.

2.解压文件，将此中的css和fonts文件夹拷贝到项目中，此中css文件夹中有两个css文件（font-awesome.css和font-awesome.min.css），fonts下有有5个，如下：

3.在须要应用的html或者其它类型的页面中引入样式文件，如下：

<link href="css/font-awesome.css" rel="stylesheet" />

4.查看font-awesome.css文件，若是引用的是紧缩版的，就要查看那个文件了，打开文件看到第一个样式定义如下：

＠font-face {

font-family: ""FontAwesome"";

src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）;

src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）;

font-weight: normal;

font-style: normal;

}

必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。

4.最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。：

<div class="list-group">
<a class="list-group-item" href="＃"> Home</a>
<a class="list-group-item" href="＃"> Library</a>
<a class="list-group-item" href="＃"> Applications</a>
<a class="list-group-item" href="＃"> Settings</a>
</div>







别的，font awesome 和BootStrap连络可以达到更好的结果。

❷ 如何制作自己的网页字体图标

从设计单独的图标开始，到把它们转化成@font-face格式以备嵌入，乃至授权给他人使用，整个过程中我们将仅使用免费软件和在线服务。感觉怎么样呢？你不必依托于任何深奥的知识就可以制作出一套成功的英文字体（包括字母和数字），而只需要眼睛来设计——你面对的可能是非常非常小的东西。

最终，你将会收获一个制作设计元素的过程（方法），它的意义远远在制作出简单的图标之上。

在我们继续之前，首先应该谈谈，究竟希望通过在设计中使用图标达到什么目的，又是什么使得一个图标比下一个更成功。先讲理论再讲应用。为了完成这个任务，我们必须思考图标作为符号学的一部分，所扮演的角色。

什么是优秀的图标？

符号学，从广义上来说就是研究符号系统，我们如何对它们的形成和维护做出贡献，它们亦因我们对世界的理解而受到影响。

不论何时，当你从“它象征着什么”—— 它向你的观众传达了什么信息，或者它唤起了他们什么概念——思考你的某一部分设计工作时，你就是以符号学家的角度来审视你的设计。符号学像其它语言学一样，的确可以覆盖一种语言，在一个网站上面，有很多东西不是通过文字表达出来的，例如颜色、字体、形状（图标）。每个人都应该注意的是，这些东西所表达的都含有一种很强的文化因素。在中国，红色可以表示好运气，而在很多西方国家，它却意味着危险。
术语“icon”在符号学中有一个特殊的意思。icon是一个神器，通过相似表达某事物。例如，一个标记地图位置的icon。它拥有一个类似真实的
地图标记的形状,因此它可以表示一个位置，反过来，真正的地图位置标记使人们想起各种有意义的概念。其中这些有抽象的概念，比如地点；也有不太抽象的概
念，比如这个位置可能在什么地方。

一些所谓的图标并不具有真正意义的代表性。无处不在的RSS图标，一个点和两个同心圆弧段，没有什么比它更像Really Simple
Syndication 了。构成RSS图标的形状通过单独约定具有象征意义，对此我们已经达成了共识。不过，一个RSS图标更适合被称为RSS标志。
现在，我希望我们已经确定了下面两项成功的网站icon需要遵循的准则：

要有与真实事物的相似点，例如，一个类似真实打印机的打印图标。

你的图标在符号系统中应该是一个熟悉的，可识别的标志。

字体图标日益受到欢迎

Icon字体，由于其提供了一种图标速记方式，长期以来被认为是一种加强型UI设计，它协助人们理解文本信息。Icon图像以毒品传播的速度在整个web设计社区流传，使用它可以使你的设计更加亮丽、吸引更多用户点击。

与图片相比，使用icon式字体是一个相对新的主意。然而，与图片（背景图片方式）相比，它具备很多固有的优势，因此它的吸引力正在逐渐增长。早在9月初，我在微博上写了它的一些好处，Chris Coyier显然也有类似的想法，几周之后也向更多观众介绍了它。基于以上两篇文章和其它内容，我编写了这个较为完整的特征列表：

它们的尺寸能够轻松调整，并且不会损坏图像质量（作为矢量图）；

给icon定义颜色和文本一样简单。例如，对于一个rss图标，color:orange；

可以把许多icons排列在一个组中，也就是一个文件中，这样只需要一次http请求就可以了;

正如Chris所指出的，它们在IE6中也可以借着透明性显示出形状（这一点与PNG图片不同）;

对于那些应该出现在文字附近的图标，对齐方式和包装都不是问题（因为它们是文本）;

你可以应用CSS3的text-shadow和background-clip:text效果，以便凸显字型的形状;

不像SVG，icon字体很容易实现跨浏览器兼容；

问题

Chris说过，使用icon字体是一个不错的主意，我要告诉你。

尽管如此，icon字体的使用现状并不理想。首先，一些优质的可用字体，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收费的。实际上意味着真有两个问题：

你或许不得不投资一部分钱。

无论你是否需要花钱，你将会被迫接受其他一些人的糟糕设计。

除了自动抓取程序，我假定主要是网页设计师将会阅读这篇文章。我是一个设计师，我不认为只有我一个讨厌依靠别人的作品，使自己的设计思路大打折扣这
种事儿。当然，我更不喜欢那种有支付权限的想法。我知道自己要使用什么图标，并且我知道如何才能使其适合我的整体设计。我想要那种控制力。

经过一些搜索，我想介绍一下Inkscape的svg字体编辑器。通过使用Inkscape和一款在线转换器（SVG字体到TTF），我制作出了字体“Heyding”，这个字体在 Simurai’s list（由Coyier的文章链接到）中有介绍。我不打算将自己的字体卖给你（它是免费的），但是我想它会带给你一个非常好的概念。

使用Inkscape制作icon字型

启动Inkscape

我们先从下载和安装Inkscape开始。你也应该使用我的icon字体启动器模板，它们被放在这个GitHub仓库的资源文件夹里（以后这个项目中还会有更多）。一旦你在Inkscape中打开了这个文件，你应该通过在主菜单中打开以下窗口来设置好你的工作空间：

OBJECT → FILL AND STROKE

OBJECT → ALIGN AND DISTRIBUTE

TEXT → SVG FONT EDITOR
在SVG字体编辑面板中，点击“Font”下的“Font1”。现在，你的工作空间看起来应该有点儿像这个截图：

值得指出的是， baseline不是在画布的下边界之下：如果你希望与相邻的字体共享同一条基线，你的图标应该很轻微地悬在画布的底部。我已经用Georgia，Arial和一些网页字体进行了测试。

制作你的第一个字型

为定义字型，点击SVG字体编辑面板中的“Glyphs”选项卡，然后点击面板下方的“Add
Glyh”按钮。一开始你可能不太清楚，但如果你在你的字形（“字型1”）上点击，一个字段将会显示出来，它要求你输入你需要的图标对应的字符。我们首先
要做一个简单的星形，所以我建议你输入的字符“s”，“S”或“*”：

现在我们已经定义了字型对应的字符，我们需要制作字型本身。由于这次我们仅仅要制作一个星星，我们应该从Inkscape左边的工具栏中选择有用的
Stars and Polygons tool
，然后，在画布上绘制一个星星。你会发现，这个工具自带的选项允许您更改星星的外观。在我的例子中，选择了角数为5，spoke
ratio为0.5，rounded value为0.1。

使用Align and Distribute panel（可能在SVG Font Editor下面隐藏着）使星星横向居中，然后乡下拖动形状使触及基线。关闭网格显示之后，画布看起来应该像这样子：

在我们的icon字体中，字型只是形状，没有颜色、层级或者渐变的形状。因此，为了使我们的星星成为一个合格的字体候选者，我们必须将它由一个对象
转化成基于路径的图形。你可以通过在主按钮上选择星星，然后是PATH → OBJECT TO
PATH来完成这一任务。现在，选择了星星之后，我们可以在SVG Font Editor 中，高亮显示可用的“s”字型，然后点击 Get
curves from selection按钮：

当你在Sample Text 区域输入“s”时，你的星星应该被预览出来，如下所示：

制作更加复杂的icon

你已经制作出了第一个可扩展的SVG字体字型。通过使用Fill and
Stroke面板上的选项：编辑路径节点，以及合并对象和笔画，能够使你做出更加不凡的icon设计。由于我们还有很多要讲，我不想深入完成一个完整的
Inkscape教程，但是遵循下面的简单规则会给你带来好处：

坚持使用黑色笔画和填充，只是为了提醒你：那些icon仅仅是形状，而非复杂的矢量图。为icon上色这件工作，我们会在最终产品中使用CSS来完成。

所有对象和笔画（线条）必须被转化成路径（不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）

当有多个对象和/或笔画被用来完成一个icon字型时，它们应该被合并起来（使用PATH → COMBINE 或者，在某些情况下，使用 PATH → UNION）

为了在已有的形状上剪切出想要的形状，将形状放置在主形状上面，选择两个形状，然后选择 PATH → DIFFERENCE。点击Get curves from selection ，黑色块上面的白色区域剔除之后就是你要的形状。

准备嵌入你的字体

假如你已经重复了很多次我刚才所描述的方法，创建了一些有用的图标，并且，字体文件被保存为myicons.svg。现在，你将要准备好把这个图标库用于网页中。

把SVG转化成TTF

你应该采取的第一项措施是，将SVG字体格式转换成一个更熟悉、更通用的格式。 TTF是一种用于本地安装的卓越格式。同时，它还为再转化成@font-face提供了一个良好的基础。可以进行字体转换的在线服务包括： http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我个人最喜欢的，是http://www.freefontconverter.com，因为我不会排队，也从来没看到它产生什么故障。

我想，不需要向你介绍如何使用这个资源也足以显示我的诚意了。醒目的文件上传字段，select元素和巨大的转换按钮会让你迅速抓住重点，真的。

编辑字体信息

既然你已经获得了一个TTF，我推荐你现在编辑产生的元数据。对字体进行重命名、添加属性和描述，使它准备好被安装、嵌入和分发。这也是一种声明字体为你所创造的途径。运行Windows的读者可以选择使用貌似很霸气的 Microsoft Font Properties Editor或者允许免费使用X天的Typograf。对于苹果和Linux用户，我希望得到你们更好的意见。

重要提示：虽然Microsoft Font Properties
Editor允许您添加作者，描述和许可信息，它似乎并没有让你编辑字体名称、附言名称等基本数据。这些字段是被禁用的。如果你想使用这些特殊的功能，你
需要在SVG转换为TTF之前，在SVG代码中编辑禁止的值。在你喜欢的文本编辑器（我用Notepad++）中打开原始的SVG，并编辑以下内容：

Font Name:标签中可以寻找到, font-family 属性

Postscript Name:标签中可以寻找到, id属性

Description:你应该在这个标签中添加一个描述（作者、许可等）。请注意这与TTF描述文字是不同的，转换过程中将不会被保留；你还需要为TTF添加单独的描述信息。

嵌入字体

一旦你在本地系统中安装了TTF，并且已经预览过，确定没有出现意外状况，你就可以在Font Squirrel的 @font-face generator中运行它了。为了使输出代码的效率和效果尽量好，这里有几个专家模式中的选项值得一提：

Subsetting：该选项允许您只运行需要的字符集（包括字符编码、类型、语言等选项），减少文件大小。

Remove kerning:您的图标将几乎总是单独出现，所以字距是没有必要的。据称，这也将减小文件大小。

WebOnly™:如果你希望您的字体仅仅用于web中，而非桌面- 你可以选择此选项。它也可以更好地满足您的授权计划。现在我将介绍许可证。

发布字体

如果你有兴趣发布你的字体，给它添加许可是一个比较好的做法。否则许多字体网站将不会带它玩儿。由于我们制作图标时使用的是免费、开源的软件，发布时也不妨这样做。

目前，有很多可用的授权选项，而逐一调查研究它们有时是令人费解的一件事。 GNU General Public License是完全可以接受的，但你可能要考虑SIL Open Font License。使用这种许可证的主要优点是，reserved font name：即允许其他设计师修改字体，但他们需要用不同的名字。在实践中，这意味着，对图标设计的一些不良行为不能以“你的名字”来进行。

有了这两种许可，你还应该在一个文本文件中保存版本信息，同时在字体的元信息中插入版权声明和完整许可的URL链接。如果需要更具体的说明，请访问各自的许可证页面（上面的链接）。

CSS spriting的终结者

为什么要停下使用SVG字体做通用图标的脚步？有了做图标的能力，也就有了能力去设计出站点独有的形状、品牌元素和装饰。这一点像CSS
sprities，所有这些视觉元素都可以保存在一个文件中，减少了服务器调用http请求的次数；不过，icon字体的元素都可以调整大小，而不必依赖
于位置坐标（背景位置值）才能正确显示。这使它们更适合于 responsive design。

让我们假装要选择使用一个SVG字体去代替一些我的steampunk般的blog里基本的设计元素。组件设计的一个简单的HTML表格呈现会是这个样子：

关于这种方式，最好的事情就是通用性。举例来说，从左边的第二个齿轮形状既可作为一个微小的圆点设计，又可以是一个巨大而抽象的背景装饰。着色很简
单：color:maroon，但没有必要坚持扁平的颜色;多种CSS3效果叠加起来可以为它添加纹理和触感。为了让你一开始有所启发，查看this excellent gallery of CSS3-enhanced webfonts。

关于屏幕阅读器的快速笔记

以这种方式使用字体来显示视觉元素的一个问题是，在屏幕阅读器上输出时会受到影响。直观上的网站访问者会看到齿轮，箭头之类的图标，但是屏幕阅读器将坚持读出指定这些设计的字符。对于使用装饰性的SVG字体元素，我建议听取Coyier的建议：为Unicode的Supplementary Private Use Area分配向量。这样的符号不应该由读者来读出。

一个协作式icon web字体

作为我的JavaScript导师，Rupert，有一天向我指出，使用SVG字体来创建图标集为合作提供了一个有趣的机会。你看，SVG的代码 - XML的一种形式 - 是高度标准化而且轻松可读的。正是源码的顺序让我觉得，icon字体的开发很适合选择像GitHub这样的协作编码服务。

这个想法契合了我想要的符号含义：如果一个图标是由很多人协商之后一致确定的，那么它的形成过程中也存在一定的“共识”。通过我们的图标标识系统设计出来的，一定是最典型的图标。我们应该创建一种属于社区的icon词汇，并且它对于需要的人来说是有意义的。

为了发展这个想法，我创建了一个公开的GitHub仓库Community Icon Font，这个仓库的文件结构并不复杂：仔细阅读上面的Inkscape教程和项目主页的内容应该可以为你解答所有的疑惑。如果你是GitHub的新成员，尝试阅读它们的帮助页面，或者问问你附近的技术人员（我正是这样做的）。

❸ 玩转响应式图标设计

什么是响应式图标设计?
响应式设计主要讲的是布局，那么什么是响应式图标?响应式图标设计是一种根据屏幕尺寸来改变图标类型、从而达到更好可读性的设计。
图标为什么要响应式?
怎样阅读内容?时至今日，我们用来阅读内容的平台越来越多。设备、屏幕分辨率、浏览器、平台——我可以拿着5S+Safari+iOS7.0浏览网页，也可以拿着1020+Chorome+WP8浏览网页。
各种选择，各种搭配实在是太多了，这些都或多或少的影响了内容的可读性。而图标作为一种视觉语言，可读性非常重要。
图标设计，首先要满足易于理解。其次，图标的可读性必须高。在小尺寸的情况下，图标设计为了追求更高的辨识度/可读性，可以选择牺牲一点美感。
那么能不能美感、可读性兼得呢?图标设计的艺术便在于二者的平衡，取与舍。怎样设计，让不同尺寸的图标均能展现美感，同时又具备可读性?
我认为，需要根据尺寸范围进行图标响应式的优化
这个理念不是新的。对于栅格化图标来说，这种设计方法很常见。
在网页设计中，很多设计师错误的认为，只要简单的缩放图标即可达到完美的可读性。但实际上并非如此。
每款图标需要三种不同的尺寸，通过使用代码，来自动进行可读性优化。
简单的方法和复杂的方法
有两种最基本的优化方式。一种依靠假定，另外一种更精确。一种简单，一种复杂。
简单的方法是使用Media
Queries根据屏幕宽度来调整图标，这种方法奏效的原因是因为，内容的大小通常由屏幕的大小决定——也就意味着，桌面版的图标应该比手机版的图标大。(或许是这样吧?)
但是这种方法太被动了，不是吗?应该化被动为主动，正确的做法是，让图标元素具备响应式功能——图标会依据图标本身的大小来进行选择(3选1)，更具伸缩性，更灵活，适应面也更广。虽然有点复杂。
具体细节
注意：
下面提出的仅仅是概念，这些代码还没有完成，测试版也没有发布。我们正处于研发阶段，我们需要Kickstarter的众筹。
但并不妨碍我为大家上述这种响应式图标设计的思想。
简单的media-queries(图标的外观根据屏幕尺寸来变)
这是最简单的方法。图标设计的核心是SVG，但其实，我们可以把图标设置成一种字体，这样就能起到很好的响应式效果。将图标的大小看成字重。然后作为字体的图标会根据屏幕的大小来改变字重。可以看看下面这个Demo，图标根据屏幕宽度响应式改变。
Web字体和element-query(图标的外观根据图标尺寸来变)
正如前面提到过的那样，根据屏幕大小来改变图标显示种类，这终归不是一个好办法。图标的显示种类还是要根据自身的尺寸来变。下面这个Demo使用了Element
Queries以及Web字体，打造了一种图标动态调节的效果。
SVG
断点
SVG断点法，依赖media
queries，以及SVG文件，会根据图像尺寸，进行一系列的触发，较上者效果更好，可以看看下面的demo
结论
更灵活、可读性更高的响应式图标设计需要某种方法，我们正在努力的思考图标尺寸、图标外观、屏幕尺寸的关系，争取早日找到一种简单、高效的解决方法。

❹ 将图标转换成web字体我显示不出来的

字体文件创建好了，你可以先用word试试么...

❺ 移动应用中字体图标怎么制作

对于可缩放的自适应设计来讲，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="#99000000"
android:shadowRadius="2" />

有很多的效果可以应用。就像在IOS中一样，动画或者复杂的操作都由你掌控了。最大的好处是自定义的icon fonts可以广泛的适配各类操作系统。任何支持自定义icon fonts的平台都允许你使用全新的这些效果

❻ web前端怎么用iconfont 调节字体大小

iconfont的使用

平时的网页开发该如何使用iconfont？在这边微信小编给大家推荐一个工具：Iconfont-阿里巴巴矢量图标库。

WEB前端开发，图标的快速制作

❼ 如何制作icon-fontweb字体ttf

使用icon font来生成图标相对于基于图片的图标来说，有如下的好处： 1.自由的变化大小 2.自由的修改颜色 3.添加阴影效果 4.IE6也可以支持 5.支持图片图标的其它属性，例如，透明度和旋转等等

❽ web前端开发常用又好用的几个软件

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。Web前端的学习起来相对简单，未来的发展前景也是非常不错的。

web全栈工程师5.0课程包括：

①计算机基础以及PS基础

②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）

③移动开发

④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）

⑤小程序开发

⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）

⑦就业拓展（网站SEO与前端安全技术）

互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。

想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。

祝你学有所成，望采纳。

web字体图标制作

与web字体图标制作相关的内容