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

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

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

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

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

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

根据我的经验，即使在16x16px，ttf字体应该比20个左右图标的组合文件大小得多。随着图像尺寸的增加，这种差距会随着矢量在每个尺度上具有相同的文件大小而变宽。

这适用于所有浏览器吗？

取决于您使用的方法。 pictonic在所有浏览器上测试回到ie5但是对于旧版本（5-7）需要一些js。因此理论上它可以让图标字体在所有浏览器中运行。

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

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

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

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

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

fontello.com的替代方案？

Pictonic还没有能够导入用户生成的图标，但它确实允许您从超过2000个令人惊叹的图标生成自定义图标字体，包括一个相当大的免费图标集。而且我们总是添加更多内容，have a look

也是如此

Answer 2

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

）

Answer 3

使用字体图标，您可以包含扩展名为.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 here

字体图标vs png图标

3 个答案: