微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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

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

人们会看到差异很明显.

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

那么为什么不用Web字体替代品替换jQuery UI的当前PNG图标呢?有许多免费的开源字体已经提供(请参阅here,here,here,here等)最需要的(但不是全部)图标.

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

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

release of jQuery 2.0之后,对IE 6/7/8的支持下降是不是时候考虑用基于矢量的Web字体替换基于光栅的PNG图标了?

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

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

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

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

解决方法

字体不适合实现图标.看看路标 – 至少需要三种颜色.出于这种目的,字体将被SVG或类似格式替换,可以使用提示指令.

why jQuery UI framework has raster icons instead of vector

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

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

是的,在字体中创建所有图标并不是那么容易,在所有浏览器中都能很好地工作.但还有另一个问题.好的解决方案是以矢量格式实现谷歌的徽标,而不是栅格.正如你所看到的,这还没有发生.

原文地址:https://www.jb51.cc/jquery/177219.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐