SVG图标对比图标字体的5大优点
作者:admin 时间:2022-11-28 23:24:15 浏览:在网页设计中,如果你需要一些栏目小图标,那么你可以使用图标字体,如之前介绍过的,FontAwesome,也可以使用SVG图标。本文将对比一下SVG图标和图标字体,SVG图标特有的5大优点。
在对比之前,我们先了解一下图标字体和SVG图标。
FontAwesome图标字体
Font Awesome是最常用的图标字体,有关FontAwesome字体的介绍及使用,可看看我写的几篇文章。
- Font Awesome content代码汇总,共246个
- Font Awesome图标在IE浏览器不显示的解决方法
- IIS7.5安装配置Font Awesome图标字体的方法
- IIS6.0安装配置FontAwesome图标字体运行环境
Font Awesome有哪些图标?Font Awesome包含300多种常见小图标,如小箭头之类的icon,如下图所示(只截取部分)。
Font Awesome图标
SVG图标
有关SVG图标的介绍,可以看看如下文章。
逾千个SVG常用矢量图标,随手可得。
下面说说SVG图标对比图标字体的5大优点。
一、SVG图标是矢量
矢量图标有很大的优势:在不损失质量的情况下可以上下调整大小,在视网膜显示器上格外清晰,文件体积小。
图标字体 | SVG图标 |
---|---|
浏览器认为它是文本,所以图标是抗锯齿的。可能导致图标不如您预期的那么清晰。 | 直线向上矢量 |
在最近的一个个人示例中,当将一些图标从字体改成用 SVG 替换时,一些字体图标明显不如SVG图标清晰。
二、SVG可能是多色图标
内联 SVG 的最大优势可能是多色图标。
下表是两者的CSS控制。
图标字体 | SVG图标 |
---|---|
可以通过 CSS 控制大小、颜色、阴影、旋转等。 | 拥有与字体相同的 CSS 控制,但更好,因为可以 1) 控制多部分图标的各个部分,以及 2) 使用 SVG 特定的 CSS,如笔划属性。 |
三、定位
图标字体 | SVG图标 |
---|---|
定位字体图标比较困难,图标是通过伪元素插入的,它取决于line-height, vertical-align, letter-spacing, word-spacing, 字体字形的设计方式(它周围自然有空间吗?它有字距调整信息吗?)。然后伪元素display类型会影响这些属性是否有效。 | SVG 就是它的大小。 |
四、图标字体可能会加载失败
图标字体 | SVG图标 |
---|---|
图标字体可能会失败,因为 1) 它在没有正确的 CORS 标头的情况下跨域加载,而 Firefox 不喜欢这样。 2) 由于某些原因,字体文件无法加载(网络打嗝、服务器故障等)。 3) 有一些奇怪的 Chrome 错误,它会转储 @font-face 并显示后备字体。 4)有的浏览器不支持 @font-face。 | 内联 SVG 就在文档中。如果浏览器支持它,它会显示它。 |
五、SVG使用更方便
图标字体 | SVG图标 |
---|---|
创建自己的图标字体从来都不是一件容易的事,所有大家都是使用第三方创建的图标字体。而使用预先创建的图标字体从来都不是特别负责(太多未使用的图标)。 另外,使用图标字体需要配置Web服务器支持某种映射脚本,并且使用第三方字体需要安装一堆相关的文件,这对于技术菜鸟来说是一件困难的事。 | 使用SVG图标更容易,因为如果需要,你可以手动完成所有工作。或者使用某些工具导出任何形式的SVG,如此文介绍的。 |
参考文章:逾千个SVG/PNG常用矢量图标(含HTML代码)免费下载
总结
本文介绍了SVG图标对比图标字体的5大优点,当然,并不是说一定要使用SVG而抛弃图标字体,每人应根据项目需要或习惯来选择合适的方式。
相关文章
- 站长推荐