技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

SVG图标对比图标字体的5大优点

作者:admin    时间:2022-11-28 23:24:15    浏览:

在网页设计中,如果你需要一些栏目小图标,那么你可以使用图标字体,如之前介绍过的,FontAwesome,也可以使用SVG图标。本文将对比一下SVG图标和图标字体,SVG图标特有的5大优点。

在对比之前,我们先了解一下图标字体和SVG图标。

FontAwesome图标字体

Font Awesome是最常用的图标字体,有关FontAwesome字体的介绍及使用,可看看我写的几篇文章。

Font Awesome有哪些图标?Font Awesome包含300多种常见小图标,如小箭头之类的icon,如下图所示(只截取部分)。

Font Awesome图标

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而抛弃图标字体,每人应根据项目需要或习惯来选择合适的方式。

相关文章

标签: SVG  图标字体  SVG图标  
x
  • 站长推荐
/* 左侧显示文章内容目录 */