字体图标VS PNG图标(font icons vs png icons)

2019-07-31 18:13发布

我使用图标标签,但我看到这个网站: www.fontello.com在这里您可以用图标创建字体。

但是当我的图标创建字体,它比我的所有图标更大,becouse有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:

好问题。 我目前正在与Fontello和字体图标试验,看它是否是一个可行的办法。

这是一个可行的办法。 我已经在生产应用中使用的基于字体图标和测试的几乎每一个流行的浏览器/设备(Fontello具有甚至支持IE7例子)。 我只有好的东西,说Fontello,但你可以使用任何你想要的工具。

字体图标可以缩放到任何任何(相称)的尺寸是期望的在任何像素密度工作。 如果你看看你的网站的高密度显示屏(如苹果的Retina,并在所有的移动设备越来越普及)上有个光栅格式(如PNG)和矢量格式之间有着巨大的区别。

您可以在一个单一的文件(如精灵)定义的所有图标,但不像一个精灵,你不必担心文件中的内容的尺寸。 此外,还可以缩放每个项目独立的文件中的其他项目。

注意事项

  • 您将需要管理的字体文件。 这些都不是人类可读的,所以你需要使用的工具。
  • 有相关CSS选择器来维持(每个图标通常一个选择)。
  • 偶尔需要额外的标记,以取得特殊效果/解决问题。
  • 次要上浆问题; 并非所有的图标填充盒均匀,他们都受到了文本渲染每个浏览器的特质。

这些考虑可能比使用精灵或创建的每个图标都PNG图像/ SVGs工作量少。

请记住,字体图标不包含任何颜色信息。 但是,你可以使用任何其他文本样式。 这包括使用ARGB颜色和应用在评论中指出更先进的CSS效果。

至于文件的大小,请记住,浏览器几乎不会下载所有4种字体格式。 做得正确,通常只有一个将被下载。

另一种方法是使用图标SVGs(未SVG字体)。 对于SVGs浏览器支持小于的@font-face ,所以你需要一个备用光栅。



Answer 2:

这个方便的网站显示你的CSS功能是通过其浏览器的支持。 在这种情况下<IE9可以给你的问题。

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

就个人而言,我更喜欢使用CSS精灵为我的UI元素,以确保acroass浏览器的一致性。



Answer 3:

快声明:我一直对所谓的图标字体库pictonic 。

当我创建一个图标,字体,它比我的所有图标更大,因为SVG,TTF,WOFF和EOT,所有4种字体更大,所有的PNG图标。

在文件大小方面,你可能会VS图标字体有趣的发现png格式的比较如下:

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

您应该验证图标使用跟踪被转换成矢量格式。 因为许多矢量格式如SVG还支持位图,如果你的图标将被导入为位图,你会不会遇到任何的他们转换成矢量字体的文件大小有关的好处。

在我的经验,即使在16x16px中,TTF字库应该比20个左右图标合并文件大小要小得多。 随着图像尺寸增加该间隙变宽载体具有在每一个尺度相同的文件大小。

是否所有的浏览器这项工作?

要看你用什么方法。 pictonic是在所有的浏览器测试回IE5,但需要一点点JS旧版本的IE(5-7)的。 所以理论上它可能获得图标字体在所有浏览器的工作。

所以我为什么要使用这种字体的方法?

图标字体是真正的多功能,你可以以多种方式让图像图标显得相当不灵活的CSS操纵它们。 这里是一个演示: https://pictonic.co/#main-demo

因此,例如,你可以用你的布局实验,并改变颜色,大小,和你所有的图标影线的短短几行的CSS。 这是非常方便的。

同时,因为它们是基于矢量,它们是视网膜准备开箱即用,所以他们看起来惊人的视网膜屏幕,比如那些在苹果Retina显示屏(视网膜的MacBook,iPhone 4+,iPad3的+),而图像需要媒体查询双交换它占用更多的空间分辨率的版本。

我相信他们很有效的,如果你使用正确的格式。

而对于fontello.com任何替代?

pictonic没有导入用户生成的图标还的能力,但它允许您从超过2000惊人的图标,包括一个相当大的免费图标集生成自定义图标字体。 我们一直在不断增加更多,所以做看看



Answer 4:

另一种方法你可能是: http://fontastic.me/

;)



Answer 5:

  1. 随着字体图标,你有字体文件是扩展.woff,.TTF,.eot,.SVG和该字体的CSS文件。 它们的规模较小,并在需要时您可以更改图标的大小,图像文件PNG / JPEG歪曲图像文件,其中如字体图标缩放正常。
  2. 随着多个图像,你必须做出多个HTTP请求到服务器,可以在这里避免。
  3. 字体图标文件也可在CDN因此你不必从服务器请求,如果一些早期的网站有它已经在你的浏览器缓存它。
  4. 随着fontello您可以自定义,并且只使用了所需的图标。
  5. 还有fontawesome当前版本4.2,你可以得到的字体图标,如果你需要对旧的版本,你可以选择老版本没有3浏览器的支持。
  6. 您还可以自定义使用更少/上海社会科学院。
  7. 另一种选择是使用CSS精灵可以优化它用传统方法或使用在线服务。
  8. 在HTML中使用它很简单,一旦你确认css文件和字体文件被加载,你只需要类名称添加到HTML元素的浏览器,你是好去,然后你可以自定义字体大小,颜色,背景颜色按你的愿望。

字体真棒

Fontelles

你可以找到CDN 这里



文章来源: font icons vs png icons