什么是图标字体？知识库

什么是图标字体？

图标字体(有时称为符号字体)是使用符号和图标代替传统字符(例如字母和数字)的字体。这些图标可以是从简单的形状和箭头到对象，动作或概念的更复杂表示形式。图标字体在Web设计中变得很流行，因为它们允许开发人员和设计人员在网站上轻松插入可扩展的向量图标。

图标字体的优点是什么？

有各种各样的传统字体可以满足项目或设计的任何要求。那么，为什么选择图标字体呢？他们提供了几个优势：

• 图标字体是基于矢量的，因此它们可以上下缩放或向下缩放而不会失去质量。这使它们非常适合响应式网络设计，因为图标可以适应不同的屏幕尺寸和分辨率。
• 与基于图像的图标相比，图标字体通常文件大小小。浏览器下载并兑现一次，从而减少了总页面加载时间。
• 这些字体易于使用。将它们纳入网络项目很简单。您可以使用CSS进行操作，就像常规文本一样。它为您提供灵活性和自定义选项。
• 图标字体可提供一致的外观和感觉，因为它们是由同一字体文件创建的。这意味着网站上使用的所有图标都具有相同的样式和视觉语言。

但是，随着Web技术的发展，SVG(可扩展的向量图形)图标的使用获得了更好的知名度，但是在各种Web项目中，图标字体仍然使用。许多流行的图标字体库，例如“ Awesome Awesome”和“物质图标”，仍被全球开发人员和设计师广泛使用。

SVG图标或图标字体？

SVG图标和图标字体都是在网站上渲染图标的流行方法，但它们具有一些关键差异。为了使您之间的选择更容易，这里有一个详细的比较SVG图标与图标字体：

参数	SVG 图标	图标字体
可扩展性	与分辨率无关，因此可以放大或缩小而不会损失质量。它们在任何屏幕尺寸或分辨率下看起来都很清晰，非常适合响应式网页设计。	图标字体也是可扩展的，并且可以调整大小而不会损失质量，因为它们基于矢量图形。
文件大小	SVG 图标通常比光栅图像格式（如 PNG 或 JPEG）小，但仍然可以比图标字体大。	文件大小更小，因为它们是打包到单个字体文件中的矢量图标集合。一旦字体被浏览器缓存，进一步使用图标只需很少的额外加载时间。
浏览器支持	所有现代浏览器都支持。	得到广泛支持，但在旧版本的 Internet Explorer 中可能会遇到一些兼容性问题。
可访问性	提供更好的可访问性，因为它们可以使用“aria-label”属性或隐藏的标题元素为屏幕阅读器添加描述性文本。	可能面临可访问性挑战。它们被视为字体，因此屏幕阅读器可能无法将其识别为图标，而是读出单个字符。
交互性	具有交互性，可以添加悬停效果、动画和其他动态行为。	由于交互性有限，不支持使用复杂的动画或交互。
自定义和样式	可以使用 CSS 轻松自定义，因此您可以更改颜色、应用渐变或为图标添加动画。	也可以使用 CSS 设置样式，但某些样式选项可能受到限制。

如您所见，SVG图标和图标字体都具有其优点和劣势，但是随着技术的发展，SVG图标已成为许多网页设计师和开发人员的首选选择。它们更通用和访问。但是，图标字体仍然具有其位置，尤其是在使用提供各种图标的现有图标字体库时。

符号字体的分类

有很多方法可以将这些字体依赖于不同的标准进行分类。这是一些常见的分类类别：

• 根据它们的视觉样式或设计图标字体，可以将其分类为下一个：

  • 极简主义 - 简洁干净的图标，注重基本形状和线条。
  • 扁平化 - 图标采用二维扁平设计，通常不带阴影或渐变。
  • Material Design - 图标遵循 Google Material Design 指南，并带有特定的风格元素。
  • 拟物化 - 图标与现实世界中的物体或纹理相似，外观更逼真。

• 根据他们的预期使用或主题图标字体，可以通过下一步进行分类：

  • 社交媒体图标 - 代表各种社交媒体平台的图标（例如 Facebook、Twitter、Instagram、Youtube）。
  • 通讯 - 用于电子邮件、聊天、消息或通话的图标。
  • 导航 - 这些图标用于指示菜单项、箭头和其他导航元素。
  • 电子商务 - 与购物流程、支付方式和产品类别相关的图标。
  • 反应 - 这些图标用于显示对任何内容的反应（喜欢/不喜欢）。

• 图标字体还可以根据其文件格式以及与不同浏览器和设备的兼容性进行分类：

  • Web 安全字体 - 被大多数浏览器和设备广泛支持的符号字体。
  • SVG 字体 - 以 SVG（可缩放矢量图形）格式存储的图标字体，提供更高的灵活性和可扩展性。
  • 图标字体库 - 它们是各种来源提供的预先设计的图标字体的集合。

• 根据可以通过CSS自定义图标字体的程度，可以将它们分类为下一个：

  • 图标字体可以使用 CSS 属性轻松更改颜色。
  • 图标字体可以放大或缩小，且不会损失质量或像素化。
  • 图标字体可以修改以获得其他效果，例如阴影或旋转。
  • 图标字体也可以根据其许可条款进行分类，包括免费开源许可和商业许可。

图标字体也可以根据其尺寸选项进行分类，因为其中一些具有不同的尺寸或变化以满足不同的设计需求。您可以将小图标用于按钮或较大的图标进行标题。

我在哪里可以使用图标字体？

符号字体看起来很花哨，您可能会认为对于此类字体没有很大的实际用途。您可能会感到惊讶，但可以在Web开发和设计的各种情况和应用中使用它们。以下是使用此类字体的一些常见地方：

956 / 5,000

图标的使用位置	使用原因	示例
网站导航	图标字体在导航菜单中用作视觉提示。它们可以代表不同的部分或操作，以帮助用户理解网站并与之互动。
按钮和号召性用语	这些字体可用于按钮和号召性用语元素，以提升用户体验。例如，电商网站“添加到购物车”按钮上的购物车图标。
(UI) 设计	图标字体广泛用于软件应用程序、移动应用程序和 Web 界面的 UI 设计中，作为特性、功能和操作的直观表示。
社​​交媒体链接	它们用于显示社交媒体图标，以提供指向您公司社交媒体资料的链接。
页眉和页脚元素	图标可以放置在页眉和页脚中，以表示联系信息、搜索栏、电子邮件链接等。
功能列表	它们用于以视觉上吸引人的方式突出显示功能、服务或优势。
信息图表	图标字体可用于信息图表中，以表示数据和统计数据，以及构建信息结构。

如何将图标字体访问和集成到Web项目中

要在Web项目中具有这些字体，您将需要遵循以下步骤：

1. 选择图标字体库。访问图书馆的网站，探索他们的图标收藏。
2. 下载ICOFONT文件。通常，您将以WOFF，WOFF2，TTF，EOT和SVG等格式获得字体文件。您还可以收到一个包含图标类和映射的CSS文件。
3. 将CSS文件链接到您的HTML文件。该CSS文件包含将图标类与字体文件中相应字符相关联的样式和映射。将链接标签放入HTML文档的头部部分。
4. 在您的HTML中包含图标以显示所需的图标。将类名称添加到您希望图标出现的HTML元素中。

句法：

<link rel="stylesheet" href="path/to/icon-font-library.css">

5. (可选)检查库的文档，以查看是否以及如何自定义图标以匹配您的设计首选项。

句法：

<i class="icon-font icon-envelope"></i>

6. 使用设备和浏览器测试您的网站，以确保图标正确显示，并正确加载CSS和字体文件。还要测试您的图标字体是否响应迅速，并在各种屏幕尺寸和分辨率上适当扩展。

如果您仔细遵循这些步骤，则应该能够成功地访问和集成图标字体到您的Web项目中。

可访问性和SEO考虑

在您的网站上使用图标字体时，必须考虑搜索引擎优化(SEO)，以确保您的内容和图标由搜索引擎正确索引，并且用户可以访问。以下是这样一个问题的一些点：

• 使用语义HTML元素合并图标字体。避免将它们纯粹用于装饰目的。最好使用适当的HTML元素，例如``‘or`’，并在这些元素内提供描述性和相关的文本内容来传达图标的含义。
• 对于‘或`元素中使用的图标字体，请使用“ alt”属性添加描述性替代文本。这有助于屏幕读取器和搜索引擎了解图标的目的和含义。

句法：

<i class="fa fa-envelope" aria-hidden="true" alt="Envelope icon - Contact us"></i>

• 使用ARIA(可访问的Internet应用程序)属性来增强屏幕阅读器和辅助技术的可访问性。使用“ ARIA-LABEL”属性为补充替代文本的图标提供标签。

句法：

<i class="fa fa-search" aria-hidden="true" aria-label="Search"></i>

• 确保图标字体文件有效加载，并且不要降低网站的性能。使用现代浏览器支持并优化字体文件大小以减少加载时间的合适字体格式(例如Woff2)。
• 实施响应式设计实践，以便您的图标字体适当地刻度，并在台式机和移动平台上保持清晰和清晰。
• 考虑使用 ICON SPRITES来减少HTTP请求并改善加载时间。它允许将多个图标组合到单个图像文件中，然后使用CSS背景定位显示所需的图标。
• 优化您的CSS以消除未使用的图标类。 缩小您的CSS文件以减小其大小并增强网站加载速度。
• 在网站的XML站点地图中包括您的图标字体文件。然后搜索引擎可以发现并索引它们。

通过遵循这些SEO实践，您可以使符号字体更加易于访问，并提高网站性能，同时保持搜索引擎结果良好的可见性。

使用图标字体的资源和工具

使用图标字体需要特定的资源和工具来有效地创建，自定义和实施它们。让我们看一下您可以使用的一些宝贵资源和工具：

• font Awesome， - 一个流行的ICOFONT库，提供大量可扩展的向量图标。它提供CSS和Web字体文件，您可以轻松地集成到项目中。
• Google字体 - 主要以其文本字体而闻名的资源，但还提供了您可以在项目中使用的图标字体。
• icomoon， - 是一个Web应用程序，可通过从多个图标包中选择或上传SVG图标来自定义和创建自己的图标字体。使用它，您只能下载所需的图标，从而减小字体文件大小。
• Fontello还使您可以通过从各种图标集中选择图标来构建自定义图标字体。
• 花哨的文本生成器。跨平台应用程序允许创建用图标包装的文本行，因此您可以在社交媒体中将它们用作状态或BIO信息中。
• Fontastic， - 一种工具，可以通过从不同来源选择图标或上传自己的SVG文件来创建自定义ICOFONTS。它还为您的图标生成CSS和字体文件。
• Adobe Illustrator或Inkscape-是在将图标转换为图标字体之前创建或修改图标的强大工具。
• GitHub图标存储库 - 是查找开源图标集和图标字体项目的宝贵资源。搜索“图标字体”或“图标包”，以免费提供免费使用图标字体的存储库。
• CSS文本生成器，一个跨平台应用程序，可帮助您使用CSS和HTML中的字体。它创建了代码，然后您可以使用该代码在网站上实现字体。

使用图标字体时，要记住可访问性很重要。确保您提供适当的替代文本和ARIA属性，以使屏幕读取器使您的图标包含在内，并且所有用户都可以访问。

结论

图标字体在增强网站的视觉吸引力和用户体验方面发挥了重要作用，尤其是在导航，按钮和用户界面设计等领域。它们提供了许多优势，包括简单的自定义，小文件尺寸以及与各种设备和浏览器的兼容性。

但是，随着技术的发展，出现了新的，更容易获得的替代方案。可扩展的矢量图形(SVG)图标和图标库，因为它们在响应能力，搜索引擎优化和屏幕读取器兼容性方面带来好处，因此变得流行。