css - 图标字体与图像

Question

我的经理告诉我不要在我们的网站上使用图标字体，因为这是另一个 http 请求加上要下载的额外 kB。也因为我必须使用 content before 作为字体(我不能更改 html)，他更喜欢背景图像，所以它在 IE7 中工作。

就我个人而言，我喜欢这些小东西，它们非常漂亮、清新而且可以调整大小!

如果我们只在一个网站上使用几个图标，我能理解，但如果我会使用，比如在一个网站上使用 5 个图标——你们怎么看？是否值得使用图标字体，还是他认为不值得？

我只是对任何新的和令人兴奋的事物的傻瓜，而今年是视网膜显示器。

Answer 1

图标字体和高密度屏幕

随着更高分辨率/密度显示的出现，使用图标字体将越来越相关。

16×16px 图标在高密度显示器 (>300ppi) 上看起来很糟糕。由于自动缩放，它可能显示得非常小或不清晰。另一方面，无论屏幕密度如何，1em 字体图标都会正确且清晰地呈现。

当然这一切都归结为你

• 应用程序用户和
• 您的要求(IE7 似乎是主要的破坏者)

现在 Sprite 是要走的路。

缺点？

图标字体也有不同的问题。所有图标都是单色的。 目前还没有具有多色能力的字体标准。而且很可能不会。至少不是字体。 有可能使用 SVG 字体进行多色处理，SVG 字体本身不是字体标准/格式，但可以作为字体容器并用作浏览器中的字体传送机制。将多色图标做成 SVG 字体可以让彩色可缩放图标成为可能(感谢@Joey)。

矢量化图标图像更适合全彩色可调整大小的图标。

请求和字体图标

你老板关于额外要求的论点完全是错误的。您的图标是文件的一部分还是(在最好的情况下) Sprite 图像的一部分并不重要。

两者都会产生一个 HTTP 请求来获取资源。文件大小在很大程度上取决于复杂性和格式，但 Sprite 图像可能会更小。但是拥有几公斤大的字体文件并没有太大的区别。之后它们都缓存在客户端上。