css - 图标字体与图像

标签 css icons icon-fonts

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

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

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

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

最佳答案

图标字体和高密度屏幕

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

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

当然这一切都归结为你

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

现在 Sprite 是要走的路。

缺点?

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

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

请求和字体图标

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

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

关于css - 图标字体与图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12674954/

相关文章:

javascript - jQuery 圆形菜单

css - 一些 Icomoon 图标不会显示

java - 根据平台放置程序图标

fonts - 图标字体 : some icon display as text instead on my machine

html - 可以在圆形图标字体周围绘制 css 边框吗?

javascript - 如何设置选课日?

html - 响应式网站使用 100% 视口(viewport)高度时,部分框转义 Div 标签

html - 隐藏父级溢出时在父级上方显示伪元素

WPF 图标和 Uri

css - 改变带有内容的伪元素的宽度和高度