Fontello:图标字体的使用

官方网址：http://fontello.com/

原文链接：https://github.com/fontello/fontello

通常，网页设计开发中，一般都采用图片的形式来做图标，比如，手机图标，定位图标，密码图标等等，使用图片作为图标的话往往有许多不便，如改变大小，颜色等等，都需要打开软件重新作图；
而Fontello就像字体一样，可以改变大小，颜色，下面就是关于Fontello的介绍，了解一下吧！！！

What is Fontello(什么是Fontello?)

Fontello是一种快速将矢量图像打包为网络字体的免费开源的工具。这个工具可以将网络图标字体整合到你的项目网页中，它有点类似于Twitter Bootstrap；此外，fontello有一个非常大的内置的开源集合。

使用Fontello,我们可以：

1、收缩字形集合，减小字体大小

2、将多个图标字体合并到一个文件中

3、可以访问大量专业级的开源图标

Why iconic fonts are cool(为什么图标字体这样酷！)

优点

• 它是矢量图标，放大后不失真；

• 浏览器支持也比较好；

• 它们可以用CSS来控制，比如大小，颜色，阴影等。

限制

• 不兼容IE浏览器，相对于图片式的图标，它加载的文件容量（字体文件/CSS文件）更大一点；

• 如果要考虑兼容性，可能需要加载更多的CSS文件；

How to use Fontello fonts in your project(如何在你的项目中使用Fontello?)

Fontello会生成一个包含字体，CSS文件，文档的文件；

1、复制所有具有文件夹结构的文件到你的项目中，且不要有任何改变，这将简化以后字体的更新；

2、如果你需要更改@font-face参数，使用<your_font_name> -codes.css，并在外部文件中自定义@fontface规则。 这将有助于保持fontello文件夹完整，当用新的字体版本覆盖内容时，防止在升级时报错。

3、不要忘记为字体文件设置合适的MIME类型。

4、如果将字体放在单独的域上，要确保该服务器以合适的CORS头响应。

5、在网页的html中，添加<i class =“CLASSNAME”> </ i>以显示字体。 CLASSNAME就像搜索图标的“icon-search”。 可以在css文件中查看所有图标的名称。

Special cases（特殊情况）

单独的域+无CORS头

这是非常糟糕的。 尽可能避免它。 但如果你不能 - 直接嵌入字体到CSS。 请参见<your_font_name> -codes.css中的示例。

How to save and load projects（如何保存和加载到项目中？）

1、选择想要的图标，然后点击右上角的红色按钮Download下载；在选择所需要的图标时，可以点击Customize Names来自定义选择器的名称，来满足定制需求。

2、解压下载回来的 zip，解压出来后，里面有类似fontello.eot，fontello.svg，fontello.ttf，fontello.woff这四种字体格式，把里面的文件上传到你的网页中；

3、复制以下代码到你的CSS样式表文件中，要注意的是，你的字体文件路径要对哦（可以根据实际情况字形修改哈，src:url('font/fontello.eot')等等）；

[css]  view plain  copy

 print ?

1. <span style="font-family:SimHei;">@font-face {  
2.   font-family: 'fontello';  
3.   src: url('font/fontello.eot');  
4.   src: url('font/fontello.eot#iefix') format('embedded-opentype'),  
5.        url('font/fontello.woff') format('woff'),  
6.        url('font/fontello.ttf') format('truetype'),  
7.        url('font/fontello.svg#fontello') format('svg');  
8.   font-weight: normal;  
9.   font-style: normal;  
10. }  
11. .icon{  
12.   font-family: "fontello";  
13.   font-style: normal;  
14.   font-weight: normal;  
15.   speak: none;  
16.   display: inline-block;  
17.   text-decoration: inherit;  
18.   width: 1em;  
19.   margin-right: .2em;  
20.   text-align: center;  
21.   font-variant: normal;  
22.   text-transform: none;  
23.   line-height: 1em;  
24.   margin-left: .2em;  
25. }</span>  

4、下载回来的包有个 demo.html，这里可以看到相对应的类名（class name）。使用的话可以参照demo.html 用就可以了。比如在html页面中可以书写类似的标签html标签可以任意选择，但是类名要和你上面定义的要一致噢，比如<span class="icon">&#xe813;</span>

How to use custom images（如何定制图标？）

如果你有特殊的需求,你可以导入自定义的图片到Fontello中，目前支持两种矢量格式：

1、SVG字体

2、SVG图片

导入字体：

如果你的字体是TTF / OTF / WOFF格式，使用FontForge或类似的东西将字体转换为SVG格式。 在FontForge中执行以下操作：

1、通过“文件>打开菜单”打开您的字体。

2、然后，在“文件>创建字体”...菜单中选择SVG格式并保存文件。

3、将SVG文件拖放到fontello页面，导入SVG图像

导入SVG图片：

你应该知道，字体格式不支持SVG格式提供的所有功能。 虽然我们试图自动化导入，有时需要调整以实现我们所需的效果。

这里是我们的建议：

1、删除所有填充和颜色。 你可以留下黑色的填充。 在字体中，填充由轮廓方向定义。 确保没有任何复杂的规则，如evenodd填充。

2、删除所有FAT线属性。 Fontello不支持。

3、将所有轮廓连接到单个轮廓。 这是最后一个最重要的步骤。 通常编辑器根据嵌套和黑色填充自动设置正确的轮廓方向。