css - 在 jQuery UI CSS 框架中使用矢量图标作为 Web 字体而不是 PNG

Question

我有一个共同的理解问题，我不清楚前进的最佳方式是什么。所以我决定向社区征求意见。

jQuery UI 定义 CSS Framework其中包含类“ui-icon”和许多不同标准图标的特定类(320 total icons)，可以在the test page上看到.使用CSS框架的插件、网站等有很多。例如jqGrid插电使用它。将由 jqGrid 创建的网格包含图标。

写入后the answer关于Font Awesome icons的使用而不是一些 jQuery UI icons我经常问我同样的问题:为什么 jQuery UI CSS framework有光栅图标而不是基于矢量的图标？在我看来，对 jQuery UI CSS 框架的图标部分进行另一种实现是非常实用的。在这种情况下，可以只替换 jQuery UI 主题，并以更好的方式实现图标。

我们现在生活在显示器具有高 DPI 的时代(平板电脑和智能手机的事件)。许多人使用 100% 的缩放设置作为 Web 浏览器中的标准设置。如果比较

与

人们会非常清楚地看到差异。

当前版本的网络浏览器(包括旧版 IE7)至少支持 WOFF、EOT、TTF、OTF 或 SVG 格式中的一种基于矢量的网络字体。这些字体是 W3C 工作草案文档“CSS 字体模块级别 3”的一部分(参见 http://www.w3.org/TR/css3-fonts/#src-desc)。

那么，为什么不用网络字体替换当前 jQuery UI 的 PNG 图标呢？有许多免费的开源字体已经提供了(参见 here 、 here 、 here 、 here 等等)人们需要的最多(但不是全部)图标。

我看到使用网络字体的额外好处是可以简化 jQuery UI 主题的创建。如果我比较基本主题内部使用的图像 ui-icons_XXX_256x240.png，或者如果我将那里与另一个主题的相应图像进行比较，那么我会看到图像中使用的颜色是两者之间的唯一区别.如果使用矢量字体，只需指定 color、background-color 或使用 linear-gradient 或 radial-gradient 改变颜色或产生漂亮颜色效果的 CSS 样式:

我看到使用矢量图标有很多优势，但直到现在我还没有找到一个可以放置矢量图标功能请求的好地方。我发布了 the feature request和 this one ，但我认为我们这里有越来越多的常见的 jQuery UI 框架问题。

在 release of jQuery 2.0 之后它放弃了对 IE 6/7/8 的支持，现在不是考虑用基于矢量的网络字体替换基于光栅的 PNG 图标的时候吗？

可能我忽略了使用基于矢量的网络字体的一些重要缺点？例如非常糟糕的性能(我直到现在才看到)或其他一些东西？ 创建所有需要的图标是否过于复杂？还有其他问题吗？

我决定提出这个问题，以引起其他人对我看到的问题的注意。恐怕，如果没有来自社区的相应反馈，我的功能请求将不会有任何结果。

哪种方式最适合放置此类功能请求？ 我必须补充一点，字体或图片的创建不是我自己擅长的主题。所以我不能自己参与实现。对不起。

欢迎就此主题提出任何建议或意见!

Answer 1

字体不适合实现图标。看路标——至少需要三种颜色。为此，字体将替换为 SVG 或类似格式，可能带有提示说明。

why jQuery UI framework has raster icons instead of vector

我认为，由于目前缺乏基于矢量的图标实现标准。

Is creating of all needed icons too complex? Are there some other problems?

是的，用一种字体创建所有图标并在所有浏览器中都能正常工作并不是那么容易。但是还有一个问题。好的解决方案是以矢量格式而不是光栅格式实现谷歌的 Logo 。如您所见，这还没有发生。