图标字体 vs 图像

Question

图标字体 vs 图像

cssiconsicon-fonts

17

我的经理告诉我不要在我们的网站上使用图标字体，因为这会增加另一个HTTP请求以及下载额外的KB。此外，由于我必须在字体之前使用content（我不能更改HTML），他更喜欢使用背景图片，这样可以在IE7中正常显示。

个人而言，我喜欢小东西，它们非常清晰并且可调整大小！

如果我们在网站上只使用几个图标，我可以理解，但如果我在一个网站上使用五个图标，你们认为值得使用图标字体还是他正确认为不值得？

我只是对任何新的和令人兴奋的东西着迷，今年就是视网膜显示器。

- Miss A

6个回答

8

我个人将Font Awesome作为我的主要字体资源，我从CDN加载它，希望其他页面已经获取了它并且被浏览器缓存。

如果文件大小是一个问题，我可以向您推荐这个非常棒的工具：

http://fontello.com/

它允许您将多个字体合并为一个单独的文件，并仅包括您实际使用的图标。

http://www.icnfnt.com/ 对于FontAwesome也是如此，但我更喜欢fontello，因为它允许使用更多的字体。

在我看来，图标字体是一种值得推荐的方式...

编辑我最近也经常使用这个应用程序：http://icomoon.io/

- roy riojas

3

当您使用字体时，不同平台上的不同浏览器会产生不同的结果。PNG文件将提供稳定和独立的结果。

- Helaine Denoble

2

我使用icomoon实现了一个字体图标库，它可以在所有浏览器上正常工作，包括ie7。对于小型图标集来说，这是一种适当的做法，字体可以缩放，可以更改为任何你需要的颜色，并且你不必担心PNG/GIF透明背景颜色匹配的问题。

然而……如果你的库变得更大（我的现在已经有40个图标左右了），维护就会越来越困难。如果设计师停止为项目工作或者你需要更改图标，更新字体是一个繁琐的过程。然后一切都需要重新测试。对于使用CSS动态图标（对于ie7）也很困难。

所以，考虑到难以维护，我正在考虑切换回一系列精灵（不同颜色的）。原因如下：

任何设计师都可以轻松地将新图标添加到集合中。 CSS不需要重新测试或修改。您不必在IE中乱搞javascript解决方法。您根本不需要javascript。

对于视网膜显示屏，只需创建一个两倍大小的精灵版本即可。无论如何，您可能需要具有不同密度的CSS版本，因为站点上的所有其他图像都会出现相同的密度问题。

- Maurice John

1

我会推荐两种解决方案来解决你的问题，这是我为最佳客户支持使用的方式，就像他们想要更改文本、大小或其他东西一样

使用Fontsquirrel制作Web字体，并通过您的CSS嵌入到您的网站中，并将其添加到您的FTP目录中。如果这样看起来不太好，那么请使用Google Web Fonts

如果这些都不行，我会采用老板提出的图像解决方案。

所有这些都取决于您解决问题所需的时间量等因素

顺便说一句，如果您无法访问HTML，我认为您可以通过大多数后端访问CSS，如果您无法访问，则选择图像！

最后但并非最不重要的是，如果您决定使用图像解决方案，请制作一个精灵，通过背景位置直接引导它。这样，您只需要加载1张图片即可获得所有小图标。

- Simon Dragsbæk

-1

他说得对。在这种情况下，我会使用CSS精灵。如果你必须支持ie7（很抱歉），你真的没有其他选择。当然，自己探索这些东西-你永远不知道什么时候会派上用场。

- vector

谢谢您的回复...虽然不是我想要的！我认为您可能是对的，我应该在我的个人项目中尝试这些东西（我已经花了两个小时阅读关于我永远不会用于工作的技术，哎呀！）...或者也许我会在网站上挤入足够多的图标，使它值得一试，呵呵。 - Miss A

关于“我永远不会用于工作”的说法并不正确，我现在不确定哪位著名的高尔夫球手说过“我练习得越多，运气就越好”（尼克劳斯？），这是纯金。谁说你学习的东西只能用在你目前的工作上？到现在为止，你可能已经意识到，在这个行业里，事情可以随时改变。 - vector

撰写时，IE7的市场份额约为2％。我不会为使用IE7的可怜人担心图标，他们有更重要的事情要考虑（例如基本的Gmail支持）。 - Jake Rayson

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

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

- Robert Koritnik · Accepted Answer

图标字体和高密度屏幕

随着越来越多的高分辨率/高密度显示器问世，使用图标字体将变得越来越重要。

16×16像素的图标在高密度屏幕（>300ppi）上可能看起来很糟糕，因为它可能因自动缩放而呈现出非常小或不清晰的状态。另一方面，1em字体图标将无论屏幕密度如何都正确而清晰地呈现。

当然，这都取决于你的应用程序用户和你的需求（IE7似乎是主要瓶颈）。

目前来说，精灵图是最好的选择。

缺点？

图标字体也有不同的问题。所有图标都是单色的。~~目前尚无字体标准支持多彩图标。这也很可能不会出现。~~ 使用SVG字体可以进行多彩处理，虽然它本身不是字体标准/格式，但可作为字体容器在浏览器中使用。将多彩图标制作成SVG字体可以实现彩色可缩放的图标（感谢@Joey）。

矢量化图像适用于全彩调整大小的图标。

请求和字体图标

你老板关于额外请求的论点是不正确的。无论你的图标是文件的一部分还是（最好的情况）精灵图像的一部分，都会产生HTTP请求来获取资源。文件大小严重依赖于复杂性和格式，但可能精灵图像会更小。但是，一个几千字节大一些的字体文件并没有什么区别。它们都会在客户端被缓存。