字体图标 vs png 图标答案

【问题标题】：font icons vs png icons字体图标 vs png 图标
【发布时间】：2012-09-12 21:56:51
【问题描述】：

我使用图标作为标签，但我看到了这个网站：www.fontello.com，您可以在其中使用图标创建字体。

但是当我用图标创建字体时，它比我所有的图标都大，因为有 svg、ttf、woff 和 eot，所有这 4 种字体都比所有 png 图标都大。

@font-face {
  font-family: 'fonticons';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
  font-weight: normal;
  font-style: normal;
}

我所有的图标都是 optipng 压缩的 .png 图像。

这适用于所有浏览器吗？

那我为什么要使用这种字体方法呢？

还有fontello.com 的替代品吗？

【问题讨论】：

sprite maps 和 symbol font as icons 各有优缺点。对于用户来说，下载单个文件比下载多个小图像要好得多，即使所有小图像的组合文件大小小于单个文件。

标签： html css fonts svg icons

【解决方案1】：

好问题。 ~~我目前正在试验 Fontello 和字体图标，看看它是否可行。~~

这是一种可行的方法。我在生产应用程序中使用了基于字体的图标，并在几乎所有流行的浏览器/设备上进行了测试（Fontello 有甚至支持 IE7 的示例）。关于 Fontello，我只有好话要说，但你可以使用任何你想要的工具。

字体图标可以缩放到任何所需的（成比例的）尺寸并且适用于任何像素密度。如果您在高密度显示器（例如 Apple Retina，并且在所有移动设备上越来越流行）查看您的网站，则光栅格式（例如 PNG）和矢量格式之间存在巨大差异。

您可以在单个文件中定义所有图标（如精灵），但与精灵不同的是，您不必担心文件中项目的尺寸。此外，您可以独立于文件中的其他项目来缩放每个项目。

注意事项

您需要管理字体文件。这些不是人类可读的，因此您需要使用工具。
需要维护相关的 CSS 选择器（通常每个图标一个选择器）。
有时需要额外的标记来实现特定效果/解决问题。
较小的尺寸问题；并非所有图标都统一填充一个框，并且它们受每个浏览器的文本呈现特性的影响。

与使用 sprite 或为每个图标同时创建 PNG/SVG 相比，这些考虑可能要少得多。

请记住，字体图标不包含任何颜色信息。但是，您可以像设置任何其他文本一样设置它的样式。这包括使用 ARGB 颜色和应用 cmets 中指出的更高级的 CSS 效果。

关于文件大小，请记住，浏览器几乎永远不会下载所有 4 种字体格式。正确完成后，通常只会下载一个。

另一种方法是使用 SVG（不是 SVG 字体）作为图标。浏览器对 SVG 的支持低于 @font-face，因此您需要一个光栅回退。

【讨论】：

谢谢你的回答，所以我应该用这个，它不会有任何问题吗？
如果你能接受我列出的警告，这似乎是一个好方法。我目前在我的第一个项目中使用字体图标，到目前为止进展顺利。最大的决定因素是您是否关心高密度显示器。如果您不在乎，只需使用 PNG 精灵。如果你在乎的话，字体图标看起来很棒。
只是为了恢复这一点，实际上您可以在图标字体上使用 CSS 渐变以及过渡来缓解颜色变化。此外，它们可以通过使用 css 动画/转换来制作动画，这对于光栅图像来说是不可能的，除非您选择低效的 gif。
试试 icomoon.io - 它有一些 Fontello 没有的功能，比如上传自定义 SVG 图标的能力

【解决方案2】：

这个方便的网站向您展示了哪个浏览器支持 CSS 功能。在这种情况下

http://caniuse.com/#feat=fontface

就我个人而言，我更喜欢将 CSS 精灵用于我的 UI 元素，以确保跨浏览器的一致性。

【讨论】：

我也认为 CSS sprites 是更好的选择。如果自定义字体不起作用，它们有备用。如果您使用 @font-face 加载的图标失败，它们只是空白。

【解决方案3】：

快速免责声明：我一直在开发一个名为 pictonic 的图标字体库。

当我用图标创建字体时，它比我所有的图标都大，因为有 svg、ttf、woff 和 eot，所有这 4 种字体都更大所有的 png 图标。

就文件大小而言，您可能会发现以下 png 与图标字体的比较有趣：

http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

您应该验证图标是否正在使用跟踪转换为矢量格式。由于许多矢量格式（如 svg）也支持位图，因此如果将您的图标作为位图导入，您将不会体验到将它们转换为矢量化字体的任何与文件大小相关的好处。

根据我的经验，即使是 16x16px，ttf 字体也应该比 20 个左右图标的组合文件大小小得多。随着图像大小的增加，这个差距会扩大，因为向量在每个比例上都具有相同的文件大小。

这适用于所有浏览器吗？

取决于您使用的方法。 pictonic 在所有浏览器上都经过测试，回到 ie5，但对于旧的 ie 版本（5-7）需要一点 js。所以理论上它可以让图标字体在所有浏览器中工作。

那我为什么要使用这种字体方法呢？

图标字体非常通用，您可以使用 css 来操作它们，使图像图标看起来很不灵活。这是一个演示：https://pictonic.co/#main-demo

因此，例如，您可以尝试布局，只需几行 css 即可更改所有图标的颜色、大小和阴影。这很方便。

另外，由于它们是基于矢量的，它们是开箱即用的视网膜，因此它们在视网膜屏幕上看起来很棒，就像在苹果视网膜显示器（视网膜 macbook、iphone 4+、ipad3+）上一样，而图像需要媒体查询才能换成占用更多空间的双分辨率版本。

我相信如果您使用正确的格式，它们会非常有效。

还有 fontello.com 的替代品吗？

pictonic 还不能导入用户生成的图标，但它允许您从 2000 多个令人惊叹的图标生成自定义图标字体，包括相当大的免费图标集。而且我们一直在添加更多内容，have a look

也是如此

【讨论】：

【解决方案4】：

您的另一种选择可能是： http://fontastic.me/

;)

【讨论】：

【解决方案5】：

使用字体图标，您可以包含扩展名为 .woff、.ttf、.eot、.svg 的字体文件和该字体的 css 文件。它们的大小更小，您可以在需要时更改图标的大小，使用 png/jpeg 图像文件会扭曲图像文件，而字体图标会正确缩放。
对于多个图像，您必须向服务器发出多个 http 请求，这可以在此处避免。
字体图标文件也可以在 cdn 上找到，因此如果某些早期网站已经在您的浏览器中缓存了它，您不必从服务器请求它。
使用 fontello，您可以自定义和仅使用所需的图标。
还有 fontawesome 当前版本 4.2，您可以在其中获取字体图标，如果您需要对旧版本浏览器的支持，您可以选择旧版本 3。
您还可以使用 LESS/SASS 对其进行自定义。
另一种选择是使用 css sprite，您可以使用传统方法或使用在线服务对其进行优化。
在 html 中使用它非常简单，一旦您确定 css 文件和字体文件已加载到浏览器中，您只需将类名添加到 html 元素就可以了，然后您可以自定义字体大小、颜色、背景颜色随心所欲。

Font awesome

Fontello

您可以找到CDN here

【讨论】：