字体图标与png图标

Question

我对标签使用图标，但我看到了这个网站：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的替代品呢？

Answer 1

这个方便的网站向你展示了CSS功能是由哪种浏览器支持的。在这种情况下，< IE9可能会给您带来问题。

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

就我个人而言，我更喜欢在我的UI元素中使用CSS精灵，以确保浏览器之间的一致性。

Answer 2

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

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

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

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也是如此

Answer 3

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

;)