字体图标 vs PNG 图标

Question

字体图标 vs PNG 图标

13

我使用图标来作为标签，但我看到了这个网站：www.fontello.com，你可以用它来创建带有图标的字体。

但是当我使用这个工具创建带有图标的字体时，它比我的所有图标都要大，因为它包含了svg、ttf、woff和eot等四种字体格式，而这四种字体比所有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 的替代方案？

- Mirza Delic

1

无论是精灵地图还是符号字体作为图标都有其优点和缺点。对于用户来说，下载单个文件比下载多个微小的图像要好得多，即使所有微小图像的组合文件大小比单个文件更小。 - cimmanon

5个回答

4

这个实用的网站展示了 CSS 功能在不同浏览器中的支持情况。在这种情况下，<IE9 可能会出现问题。 http://caniuse.com/#feat=fontface 个人而言，我更喜欢使用 CSS 精灵来确保 UI 元素在各个浏览器中的一致性。

- Diodeus - James MacFarlane

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

4

快速免责声明：我一直在开发一个名为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）也支持位图，如果您的图标被导入为位图，则无法体验将其转换为矢量化字体的文件大小相关优势。

根据我的经验，即使在16x16像素下，TTF字体的文件大小也应该比20个左右的图标的组合文件大小要小得多。随着图像尺寸的增加，这种差距会加大，因为矢量在每个比例尺寸上具有相同的文件大小。

“这在所有浏览器上都可以工作吗？”取决于您使用的方法。Pictonic已在所有浏览器上进行了测试，包括IE5，但旧版本的IE（5-7）需要一些JavaScript。因此，理论上可以在所有浏览器中使用图标字体。

“那我为什么要使用这种字体方法？”图标字体非常灵活，可以通过CSS以使图像图标变得相对不太灵活。这是一个演示：https://pictonic.co/#main-demo 例如，您可以通过几行CSS实验布局并更改所有图标的颜色、大小和阴影。这非常方便。

此外，由于它们是基于矢量的，因此它们在开箱即用时就支持Retina屏幕，如苹果Retina显示器（Retina MacBook、iPhone 4+、iPad3+），而图像需要媒体查询来切换双倍分辨率版本，这需要占用更多空间。

我认为如果使用正确的格式，它们非常高效。

有没有fontello.com的任何替代品？

Pictonic目前还没有导入用户生成的图标的功能，但它允许您从超过2000个惊人的图标中生成自定义图标字体，包括一个相当大的免费图标集。我们还在不断添加更多内容，所以请看一下链接。

- alzclarke

2

你可以尝试使用另一种选择： http://fontastic.me/。;)

- mim

1

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

Font awesome

Fontello

你可以在这里找到CDN链接

- Nitesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim M. · Accepted Answer

很好的问题。我目前正在尝试使用Fontello和字体图标，以确定它是否是一种可行的方法。

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

字体图标可以按比例缩放到任何所需的大小，并且在任何像素密度下都能正常工作。如果您在高密度显示器上查看站点（例如Apple Retina，在所有移动设备上越来越受欢迎），则光栅格式（如PNG）和矢量格式之间存在巨大差异。

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

考虑因素

您将需要管理字体文件。这些文件无法读取，因此您需要使用工具。
需要维护相关的CSS选择器（通常每个图标一个选择器）。
偶尔需要额外的标记来实现特定效果/修复问题。
存在轻微的尺寸问题；并非所有图标都能均匀填充一个框，并且它们受到每个浏览器文本渲染的特殊性的影响。

这些考虑因素可能比使用精灵或为每个图标创建PNG/SVG更少的工作。

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

关于文件大小，请注意，浏览器几乎从不下载所有4种字体格式。如果正确完成，通常只会下载其中一种。

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