我的经理告诉我不要在我们的网站上使用图标字体，因为这是另一个 http 请求加上额外的 kB 下载。另外因为我必须使用content before字体（我不能更改 html），他更喜欢背景图片，所以它可以在 IE7 中使用。
就我个人而言，我喜欢这些小东西，非常漂亮、清脆和可调整大小！
如果我们在一个网站上只使用几个图标，我明白了，但如果我会使用，说一个网站上的 5 个图标 - 你们怎么看？是否值得使用图标字体，还是他认为它不值得？
我只是喜欢任何新的和令人兴奋的东西，今年是视网膜显示器。
问问题
10602 次
6 回答
13
图标字体和高密度屏幕
随着更多高分辨率/密度显示器的出现，使用图标字体将变得越来越重要。
图标在16×16px高密度显示器 (>300ppi) 上看起来很糟糕。由于自动缩放，它可能会显示得非常小或不清晰。1em另一方面，无论屏幕密度如何，字体图标都将正确且清晰地呈现。
当然，这一切都归结为您的
- 应用程序用户和
- 您的要求（IE7 似乎是主要的破坏者）
现在精灵是要走的路。
缺点？
图标字体也有不同的问题。所有图标都是单色的。目前还没有具有多色功能的字体标准。而且很可能不会。至少不是字体。有可能使用 SVG 字体进行多色，这本身不是字体标准/格式，但可以作为字体容器并用作浏览器中的字体传递机制。将多色图标作为 SVG 字体可以使用彩色的可缩放图标（感谢 @Joey）。
矢量图标图像更适合全彩色可调整大小的图标。
请求和字体图标
你老板关于额外要求的论点是完全错误的。您的图标是文件的一部分还是（最好的情况下）精灵图像的一部分并不重要。
两者都产生一个 HTTP 请求来获取资源。文件大小很大程度上取决于复杂性和格式，但精灵图像可能会更小。但是拥有几公斤大的字体文件并没有太大的区别。之后它们都被缓存在客户端上。
于 2012-10-01T14:30:32.053 回答
7
我个人使用 Font Awesome 作为我的主要字体资源，在我的情况下，我从 CDN 加载它，跳跃使用它的其他页面已经获取它，并被浏览器缓存。
如果文件大小是一个问题，我可以向你推荐这个令人难以置信的很棒的工具
它允许您将多种字体合并到一个文件中，并且仅包含您实际使用的图标。
http://www.icnfnt.com/对 fontawesome 也是如此，但我有点喜欢更多的 fontello，因为它允许使用更多的字体。
在我看来，图标字体是诚实的方法......
编辑我最近也经常使用这个应用程序：http: //icomoon.io/
于 2013-04-18T15:10:06.383 回答
2
当你使用字体时，不同平台的不同浏览器会给出不同的结果。PNG 文件将提供稳定和独立的结果。
于 2012-10-07T19:34:43.310 回答
1
我已经使用 icomoon 实现了一个字体图标库，它适用于包括 ie7 在内的所有浏览器。对于小图标集，这是一个合适的做法，字体的比例适当，可以更改为您需要的任何颜色，您不必担心 PNG/GIF 透明背景颜色匹配。
但是...如果您的库变得更大（我的现在大约有 40 个图标），则维护变得越来越困难。如果设计师停止在项目上工作，或者您需要更改图标，则更新字体是一个费力的过程。然后一切都需要重新测试。使用 CSS 动态图标也很困难（对于 ie7）。
因此，考虑到维护的难度，我正在考虑切换回一系列（不同颜色的）精灵。原因是：
任何设计师都可以轻松地将新图标添加到集合中。CSS 不需要重新测试或更改。您不必为 IE 使用 javascript 变通方法。你根本不需要javascript。
对于视网膜显示器，只需创建两倍大小的精灵版本。无论如何，您可能需要为视网膜使用不同版本的 CSS，因为您网站上的所有其他图像都会有相同的密度问题。
于 2013-11-25T23:09:19.477 回答
1
我会推荐 2 种解决方案来解决您的问题
使用Fontsquirrel制作一个 webfont 并通过你的 css 将它嵌入到你的网站中，如果那不是很漂亮，则将它添加到你的 ftp 目录中，然后使用google web fonts
如果不是那种看起来我应该去你老板说的图像解决方案..
所有这一切还取决于您需要多长时间来解决您的问题等
顺便说一句，如果您无法访问 html，我认为您可以访问可以通过大多数后端执行的 css，如果您无法访问图像！
最后但并非最不重要的一点是，如果您决定使用图像解决方案，请制作一个您将其引导到背景位置的精灵。这样，您只需为所有小图标加载 1 张图片。
于 2012-10-01T14:17:04.223 回答
-1
他是对的。在这种情况下，我会使用 css sprites。如果你必须支持 ie7（我很抱歉）你真的没有任何选择。自己探索这些东西——当然，你永远不知道什么时候会派上用场。
于 2012-10-01T14:15:27.247 回答