图标字体vs SVG图标:哪种最适合你?

很难想象现代网页没有这些微小但有用的元素——图标。你一定会在导航菜单、联系方式、产品描述等中找到它们。作为UI设计不可或缺的一部分，图标对开发者来说也是一个挑战。

关于图标字体和SVG字体的激烈争论已188金宝搏最新安卓版下载经持续了一段时间。现在，我们将探讨图标字体和SVG图标是什么，如何使用它们，以及在特定情况下应该选择哪种方法。

图标字体，顾名思义，代表包含图标而不是字母和数字的字体。这些图标包括符号和符号。作为规则，一组图标字体存储在字体文件中。

图标字体是向网站添加基于矢量的图标的事实上的方法，直到2020年初，不同浏览器对SVG的真正支持变得稳定。

首先，图标字体中的每个字符都是可伸缩的。主要是，你可以在CSS的帮助下调整图标，修改它们的大小，颜色和形状。你只需要在CSS中创建相关的类。

其次，指向字体文件的可能性让设计师可以使用任何他们想要的字体，而不用担心它是否网络安全。浏览器请求指定的文件并显示图标。

第三，图标字体尺寸小，因此加载速度快。

虽然图标字体有一些相当大的优点，但我们不应忽视它们的缺点。

首先，我们提到了图标字体的可伸缩性。实际上，如果需要的话，可以更改字体颜色并为其添加阴影。但是，请记住，您只能对这样的图标应用一种颜色。单色和样式限制是字体图标可能给设计师/开发人员带来的缺点之一。

至于大小，图标字体设计建议采用特定的网格，如16×16、32×32、48×48等。改变网格会导致图标的质量下降。

虽然您可以针对不同的视口大小调整图标字体，但也应该记得将它们放在aria类中，以便浏览器可以访问它们。

字体图标可能出现的另一个问题是无样式内容的闪现(FOUC)。要使用图标字体，必须应用@font-face规则，该规则指示浏览器对字体文件发出HTTP请求。

在处理HTML和链接到它的文件时，浏览器实时构建文档对象模型(DOM)。根据字体文件大小、网络条件和用户的硬件，检索字体可能需要一些时间。

在浏览器能够访问字体资产之前，它可以在完全接收文本HTML内容之前显示文本HTML内容，这将导致FOUC。因此，在字体完全加载之前，可能会显示随机符号或字符而不是图标。这样的闪光可能会令人恼火，并对用户体验产生负面影响。

此外，图标字体文件通常包含许多元素，其中许多可能不会使用。然而，文件将占用空间。

SVG(可伸缩矢量格式)文件，顾名思义，是一种矢量图形的图像格式，具有可伸缩性。SVG文件使用基于xml的标记语言来描述矢量图形。换句话说，SVG图像是基于文本的，可以与CSS、JavaScript、DOM等一起工作。

向网站添加svg有不同的方法。您可以在外部实现SVG图标，如带有标记的图像，也可以在HTML中内联。

要显示SVG图标，您应该使用 HTML元素，类似于加载PNG、JPG或GIF文件:

内联SVG看起来像这样:

这种特殊类型的svg添加不会增加服务器请求，因此不会对网站的性能产生负面影响。

让我们来探讨一下在网页上使用svg的主要优点。

与PNG或JPEG图像不同，SVG图标是可伸缩的，因此当访问者使用各种设备浏览时，您的网页不会遭受质量损失。

此外，由于浏览器将svg视为图像，因此svg没有抗锯齿规则。相反，图标字体很容易受到这些技术的影响，看起来很模糊。您可以确信svg的视觉质量在所有分辨率下都是完美的。

svg比图标字体更灵活。首先，你可以用svg添加更多的颜色。与单色图标字体不同，SVG图标允许渐变。此外，您还可以在SVG图标中对单个笔画进行动画处理。

使用SVG定位SVG和图标字体更简单。要放置图标字体，您可能需要调整各种属性，例如单词和字母间距、对齐方式、行高或字体大小。对于svg，指定大小就足够了。

正如我们已经说过的，在CSS中使用@font-face规则指定图标字体时，必须指定可以找到该字体的URL。因此，使用@font-face规则意味着指示浏览器请求字体文件。

使用svg，爬虫程序不需要发送服务器请求来显示图标。

搜索引擎可以抓取和索引SVG文件。内置语义元素，如

此外，如果某些屏幕扫描器不能正确处理图标，元素将很有用。因此，可访问性问题将通过向访问者显示alt名称来解决。

最新版本的绘图程序，如Inkscape、Illustrator和Sketch，可以生成非常干净的svg。然后，您可以使用任何文本编辑器来调整SVG代码。此外，许多在线资源可以帮助你。

下面是带有SVG选项的图标服务列表:

使用这些服务，您可以搜索所需的图标。

在某些情况下，您还可以免费定制尺寸和颜色。在进行了必要的调整之后，您应该复制代码或下载SVG。

在复制代码之后，我们强烈建议检查它，保留必要的元素，并删除任何多余的项。这将导致干净的代码和更小的文件大小。让我们来看一些例子。

使用材质设计图标，你会得到这样一个代码:

如屏幕截图所示，您可以下载SVG文件或简单地复制代码。

FontAwesome代码看起来不同:

如您所见，这段代码包含凭据-一个到FontAwesome网站的链接。在SVG代码中还可以找到其他元素。

有些软件，如Illustrator，添加了ID属性。如果使用CSS和JavaScript，这个属性很有用。否则，也有可能安全取出。

在Illustrator代码中，您还可以找到x = " 0 px " y = " 0 px”一段代码。您也可以删除这些属性。

由于浏览器不支持这些属性，您可以省略它们。

一些在线工具可以帮助删除不必要的代码:

图标字体与SVG的比较表明SVG更可靠、可伸缩且呈现速度更快。这就是为什么svg正在成为网络图标的新标准W3C推荐标准．

下面是一些选择图标的建议。

GetDevDone一直处于最前沿118bet金博宝从事了17年。

我们提供基于cms的开发(HubSpot的，Drupal，WordPress)，前端开发与前沿的JavaScript框架/库(Vue, React, Angular)，像素完美，响应灵敏设计到HTML/CSS转换．我们也制作电子邮件模板和惊人的HTML5的横幅，基于流行的电子商务平台建立网上商店(WooCommerce，Shopify，线上购物)，以及提供其他优质服务。

接触来我们讨论您的业务需求!

Alex Kopp是P2H的业务开发经理，主要任务是帮助组织克服web开发障碍。118bet金博宝他做到这一点的方法之一是撰写引人入胜、充满价值的文章。跟着他走LinkedIn