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

Question

我有一个共同的理解问题,我不清楚什么是最好的前进方式.所以我决定向社区寻求建议.

jQuery UI定义了CSS Framework,其中包含类"ui-icon"和许多特定类,用于不同的标准图标(总共320个图标),可以在测试页面上看到.有许多使用CSS框架的插件,网站等.例如jqGrid Pluging使用它.将由jqGrid创建的网格包含图标.

在写了关于使用Font Awesome图标而不是一些jQuery UI图标的答案后,我经常问我同样的问题:为什么jQuery UI CSS框架有光栅图标而不是基于矢量的图标？在我看来,有一个jQuery UI CSS Framework的Icon部分的另一个实现是非常实际的.在这种情况下,人们可以直接替换jQuery UI主题并拥有以更好的方式实现的图标.

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

同

人们会看到差异很明显.

当前版本的Web浏览器(包括旧IE7)支持至少一种格式为WOFF,EOT,TTF,OTF或SVG的基于矢量的Web字体.这些字体是W3C工作草案文档"CSS Fonts Module Level 3"的一部分(参见http://www.w3.org/TR/css3-fonts/#src-desc).

那么为什么不用Web字体替代品替换jQuery UI的当前PNG图标呢？有提供已经有很多免费的开源字体(见这里,这里,这里,这里等等)的大多数(但不是全部)图标,其中一个需要.

使用Web字体的其他好处,我看到将简化jQuery UI主题的创建.如果我比较基本主题内部使用的图像ui-icons_XXX_256x240.png,或者如果我将其与另一个主题的相应图像进行比较,那么我会看到图像中使用的颜色是唯一的区别.在使用矢量字体的情况下,人们可以只指定color,background-color或使用linear-gradient或radial-gradientCSS样式来改变颜色或产生漂亮的颜色效果:

我看到许多使用矢量图标的优势,但我到目前为止还没有找到一个可以放置矢量图标的功能请求的好地方.我发布了功能请求和这一个,但我认为我们这里有越来越多的常见jQuery UI Framework问题.

在发布了支持IE 6/7/8 的jQuery 2.0之后,现在不考虑用基于矢量的Web字体替换基于栅格的PNG图标吗？

可能我会错过基于使用向量的Web字体的一些重要缺点？例如非常糟糕的表现(我直到现在才看到)或其他一些东西？创建所有需要的图标太复杂了吗？还有其他一些问题吗？

我决定提出这个问题,引起别人对我所看到的问题的关注.我担心,如果没有来自社区的相应反馈,我的功能请求将没有任何后果.

哪种方式最适合放置此类功能请求？我必须补充一点,创建字体或图片并不是我自己很好的主题.所以我不能自己参与实施.抱歉.

欢迎提出有关该主题的任何建议或意见!

Answer 1

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

为什么 jQuery UI 框架有光栅图标而不是矢量图标

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

创建所有需要的图标是否太复杂？还有其他问题吗？

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