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

Posted 2023-02-22

【中文标题】在 jQuery UI CSS 框架中使用矢量图标作为 Web 字体而不是 PNG

【英文标题】：usage of vector icons as web fonts instead of PNG in jQuery UI CSS Framework

【发布时间】：2013-04-12 17:18:22

【问题描述】：

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

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 显示器的时代（平板电脑和智能手机的盛会）。很多人在 Web 浏览器中使用 100% 以上的缩放设置作为标准设置。如果比较 与 人们会非常清楚地看到差异。

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

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

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

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

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

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

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

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

欢迎您对该主题提出任何建议或意见！

【参考方案1】：

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

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

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

创建所有需要的图标是否过于复杂？有没有其他的 有问题吗？

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

【讨论】：

感谢您的回答，但我不明白您对“至少三种颜色”的要求是什么意思。 W3 standard 处于工作草案阶段，不同的网络浏览器现在允许使用 至少一种 字体格式。如果一个人定义了 jQurey UI 类的 CSS，如 ui-icon-trash 或 ui-icon-seek-next，使用回退到 PNG 的字体（或像 <!--[if IE 7]> 这样的条件 CSS），那么我认为没有问题。如果我使用这样的 CSS，我只会看到优点。如果下一个版本的 CSS 将使用 SVG 而不是 WOFF，TTF 对我来说没关系。

我的意思是使用字体来暴露图标是一种 hack。此方法将替换为适当的方法。

从使用带有图标的 CSS 的用户的角度来看，我现在需要从 jQuery UI CSS 中放置类“ui-icon ui-icon-triangle-1-n”来获得光栅图标。如果我在理智的<span> 上添加类“icon-sort-up”，我将改为使用光栅图标。所以我的问题是：为什么不使用“ui-icon”和“ui-icon-triangle-1-n”定义的CSS，但使用“icon-sort-up”的定义和小图标位置？在 cae 中，我可以在 html 页面上使用 旧代码，但我将有一些矢量图标的实现，而不是旧的光栅图标。

为什么使用图标是一种黑客行为？查看 UNICODE 标准。其中包含大量用于数学、物理、图形等的符号。同样，jQuery UI 框架定义了一组图标，使用 jQuery UI 创建网站的人可以使用这些图标。为什么图标应该实现为光栅位图？

这里是正确实现图标的示例： Bingo！