什么是图标字体？（以及如何使用它）

图标字体现在是常见CSS问题的流行解决方案，如何以高效，快速的方式将图标整合到你的网站设计中。

目前互联网上已经有很多的服务或者资源提供，借助这些，你可以轻松选择和使用图标字体，而无需从头开始创建自己的图标。

但是图标字体到底是什么以及如何使用它们？ 这是你需要了解的有关图标字体的所有内容的指南。

什么是图标字体？（What Is an Icon Font?）

图标字体是使用微小图像而不是字母形式的字体。 与字符一样，每个图标字体都是矢量元素，可根据需要进行伸缩，并可以使用CSS样式进行修改。

使用图标字体的主要原因是你可以轻松更改大小，颜色，形状。 图标字体本质上是透明的，因此你可以将它们放在任何颜色或类型的背景上，还可以添加笔触或更改图标的不透明度。

所有的设置操作均可以使用CSS完成，因此你不必为设计中的每个新图标实例创建唯一的图像（这对于保持网站设计和代码的轻量级非常有用）。

图标字体是矢量图像，这意味着它们是可随意进行缩放而不失真的。 与其他字体一样，你可以根据需要将它们设置更大或更小。 仅将图标字体用作艺术元素，甚至在其他文本字段中。

使用图标字体的优缺点（Pros and Cons of Using Icon Fonts）

那么，为什么要使用（或避免使用）图标字体？ 以下是使用这种风格的艺术元素的一些利弊。

1.使用图标字体的优势

· 只要CSS中存在相应的类，图标就易于缩放；

· 你可以在互联网上轻松获得既有的大型图标库；

· 更改图标属性非常容易，无论你使用什么来构建网站的；

· 将图标添加到网站设计上的任何页面都很容易（只需插入图标名称）；

· 有数千种各种样式的图标可供选择；

· 如果需要更高的自定义，你甚至可以创建自己的图标字体。

2.使用图标字体的劣势

· 图标是单色或渐变色（在大多数情况下，不过一些可以提供更多自定义选项的服务正在改变这一点）；

· 如果无法加载到图标字体，则没有其他的备用字体供使用；

· 你可能不需要完整的图标集；

· 一些浏览器器还不能或不完全支持图标字体；

· 你可能找不到适合你的需求的资源。

如何使用图标字体（How to Use Icon Fonts）

虽然根据所选择的程序或服务的不同，使用图标字体的规则或注意事项可能会略有不同，但基本思路是相同的。

通常，你有三个选择（除非你打算自己做一些编码调整）：

· 使用可以安装所有内容的插件，因此你只需要调用要使用的图标即可（超级简单！）。

· 使用CMS或网站构建器中的内置字体图标。 如果你没有自定义网站或需要特定类型的字体图标，则此方法非常有用。 大多数网站构建器都提供相关的服务和功能模块。

· 手动链接到外部的图标字体。

使用图标字体还是SVG格式文件？（Icon Fonts vs. SVGs）

目前面临的最大的争议可能是你是否（或想要）使用图标字体而不是SVG图像，以便在你的网站设计中插入图标。 两种选择都同样可行，并且与个人喜好有很大关系。

SVG（可缩放矢量格式）文件可为你提供更多的设计灵活性（不仅限于一种颜色）。 可扩展的小型文件可以直接上传到你的媒体目录中，并且易于使用。 如果你只需要少量图标并且不想处理库，那么这是一个不错的选择。

SVG格式支持添加更多颜色和动画的能力，因此更加灵活。

从长远来看，图标字体可能在加载速度上更快，因为它们已被缓存，但是差异上可能很小（SVG格式文件在大小上一般都很小）。

定位图标字体可能会有些棘手，因为它们要遵循典型的字体规则，例如大小，行距和垂直对齐。 仅这就是为什么大多数使用图标字体的人更多选择一家既有的提供商而不是尝试自己做的原因。

SVG可以包含alt元素，这些元素使它们比图标字体更易于访问，而图标字体可以作为字母字符出现在屏幕阅读器上。

图标字体通常使大多数人更容易找到和使用，字体库通常都是可用的，并不难理解。 想要更多设计控制和自定义选项的用户一般首选SVG图标。

这两个选项都是常用的，并且在大多数情况下效果都很好。 你所需要做的就是选择一个你最喜欢的以及与你的设计和用户界面相匹配的选项。

总结

图标字体如此受欢迎的原因之一是它们用途广泛且易于使用。 借助可扩展的格式，只需单击几下即可将其安装到大多数项目中，几乎任何人都可以快速开始使用图标字体。

图标字体的最大的优势是元素使用CSS，而不是独立的图像文件。 这对于创建一个精简的网站设计非常有用，该网站具有可以快速加载的矢量格式元素（如果以后需要更改大小，则非常有用）。

图文来自：design shack 

由深圳网站建设公司-Clh翻译编辑整理