后端开发教程 - Java、Spring Boot 实战 - msg200.com
Web 图标系统——深入指南
图标是网络上常用的元素。它们通用、易于识别、极具吸引力、能够吸引注意力，并且（如果使用得当）能够提供出色的用户体验。
在网络上实现图标时，我们有很多选择：
- 图标精灵表
- 图标字体
- 内联 SVG
- SVG 作为图像元素
其中一些如今已较为常用，例如 SVG 元素和图标字体。在本文中，我们将深入探讨在 Web 上实现图标的每种方法，并看看哪种方法在性能、可访问性、样式选项和浏览器支持方面表现最佳。
图标精灵表
我们将多个较小的图像（图标）文件合并成一个较大的文件，从而创建了一个图标精灵表background-image。我们需要使用 CSS ，background-size并background-position显示精灵表中的图像。
我们可以使用 SVG 精灵图集来确保图标在各种显示器（普通屏幕和视网膜屏幕）上都能完美显示，并结合 PNG 精灵图集作为旧版浏览器的后备方案。我们可以使用Modernizr之类的 JavaScript 库来检测用户浏览器是否支持 SVG，并在不支持 SVG 时提供 PNG 后备方案。
让我们创建一个可访问的图标：
<span aria-hidden="true" class="icon icon--email"></span>
<span class="hidden--visually">Send me an Email</span>>
Spritesheet CSS 示例（可以生成或手动添加）：
.icon {
background-image: url('../images/spritesheet.svg');
background-repeat: no-repeat;
display: inline-block;
width: 64px;
height: 64px;
}
.no-svg .icon {
background-image: url('../images/spritesheet.png');
}
.icon--email {
width: 64px;
height: 64px;
background-position: 0px 0px;
}
如果您对 CSS 类以及如何隐藏内容感到好奇hidden--visually，我在之前的一篇文章中对此进行了更详细的解释。
让我们回顾一下使用图标精灵表的优缺点。
优点：
- 添加图标的过程可以轻松实现自动化
- 图像优化技术可以减少精灵表文件的大小
- 适用于所有显示器（使用 SVG 精灵表时）
- 出色的浏览器支持（使用 PNG 后备时）
- 减少请求数量（不使用 HTTP/2 时很有用）
缺点：
- 无法立即访问。需要手动添加 HTML 元素来实现访问功能。
- 糟糕的造型选择
- 图标的所有变体都需要作为单独的元素添加到精灵表中
- 如果多人同时添加新图标，可能会发生冲突
- 使用 HTTP/2 没有性能优势
工具：
- Sprite Cow - 在线精灵表图像和 CSS 生成器
- PostCSS-lazysprite - PostCSS 插件，用于自动生成精灵表图像和 CSS
- gulp-svg-sprite - Gulp 插件，用于自动生成精灵表图像和 CSS
图标字体
我们不必将图标图片文件合并成一个图片文件，而是可以生成包含图标的字体文件。浏览器会将它们视为文本，并且可以轻松地使用文本样式进行自定义。
有很多工具可以让你轻松管理图标字体文件和 CSS 文件的生成。生成的 CSS 文件可能如下所示：
/* Define font icon font family */
@font-face {
font-family: 'myIconFont';
src: url('/path/to/myIconFont.ttf?r9c57c') format('truetype'),
url('/path/to/myIconFont.woff?r9c57c') format('woff'),
url('/path/to/myIconFont.svg?r9c57c#myIconFont') format('svg');
font-weight: normal;
font-style: normal;
}
/* Define icon class that sets font family and shared font styles */
.icon {
font-family: 'myIconFont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Define individual icon class that inserts the icon as a character in pseudo-element */
.icon--email::before {
content: '\e900';
}
我们可以使用类似的标记来创建一个可访问的图标：
<span aria-hidden="true" class="icon icon--email"></span>
<span class="hidden--visually">Send me an Email</span>>
让我们回顾一下使用字体图标的利弊。
优点：
- 良好的优化选项
- 可使用各种工具轻松编辑和生成
- 出色的浏览器支持
- 使用起来非常简单方便
缺点：
- 字体抗锯齿可能会导致图标渲染问题
- 字体文件下载和加载时不显示任何内容
- 如果用户使用特定的字体或样式覆盖，则可以轻松覆盖
- 无法开箱即用。需要手动添加辅助功能。
工具：
- icomoon - 管理和生成图标字体文件和 CSS
- fontello - 管理和生成图标字体文件和 CSS
- icon-font-generator - 用于从 SVG 图标生成图标字体的 NPM 插件
内联 SVG 图标
我们无需引入文件（精灵图或图标字体）并使用 CSS 将图标添加到标记中，而是可以直接将 SVG 数据插入 HTML 文档，浏览器将解析并显示该 SVG 元素。内联 SVG 元素高度可定制，因为我们甚至可以为单个 SVG 元素设置样式。
让我们看一下使用内联 SVG 的可访问图标是什么样子的：
<svg labelledby="titleId descId" role="group">
<title id="titleId">Example title</title>
<desc id="descId">Long description explaining this example</desc>
<!-- SVG icon code -->
</svg>
我们使用labelledby="titleId descId"和SVG 元素title，desc使元素能够被辅助设备访问。另外需要注意的是，role="presentation"应该用于辅助设备应该忽略的 SVG 元素图形部分。
让我们回顾一下使用内联 SVG 图标的优缺点。
优点：
- 加载 HTML 文档，无需额外加载时间
- 无需额外的 HTTP 请求
- 良好的可访问性支持，无需额外的 HTML 元素
- 在各种屏幕上看起来都很棒
- 样式选项方面最佳（甚至可以在
<svg>元素内设置样式）
缺点：
- 使 HTML 文档标记复杂化（取决于所使用的框架）
- 难以管理和维护（取决于所使用的框架）
- 图标未缓存
- 一些较旧（且较少使用）的浏览器不受支持
注意：
有些框架可以简化图标的管理和维护。例如，Webpack可以在生产版本中将所有图标转换import MyIcon from "/path/to/myIcon.svg"为内联 SVG。因此，对于开发环境来说，我们可以使用更简单的标记，以便于维护。
图像元素中的 SVG
我们可以将图标保存为单独的文件，并使用<img>HTML 元素将其包含在标记中，而无需在 HTML 中使用完整的 SVG 标记。这使得我们的标记简单易维护，文件大小也更小。我们还可以为图标使用元素原生的可访问性功能。
让我们使用这种方法创建一个可访问的图标：
<img src="email.svg" alt="Send me an email">
我们可以使用以下方法为旧版浏览器实现 PNG 回退srcset：
<img src="email.png" alt="Send me an email" srcset="email.svg">
支持 SVG 元素的浏览器srcset也会自动加载 SVG 图像。不支持 SVG 的浏览器则会使用 PNG 格式进行加载。
让我们回顾一下在图像元素中使用 SVG 的优缺点。
优点：
- 简单标记
- 内置带有
alt标签的简单辅助功能选项 - 良好的浏览器支持（如果使用 PNG 后备）
- 图像文件大小可以优化
- 图像文件可以被缓存（一旦下载）
缺点：
- 糟糕的造型选择
- 图标的每个变体（例如不同的颜色）都应该放在单独的文件中
- 每个图标都需要服务器请求（如果没有缓存）
奖励：图像优化
我已经提到了如何通过优化图片文件大小来缩短下载和加载时间。如果您想了解更多关于图片文件大小优化的知识，请查看这篇文章。
社区民意调查
在网页上设计图标时，你最喜欢的选择是什么？请在下面的 Twitter 投票中提交你的投票，让我知道你的想法。
这些文章都是咖啡带来的灵感。所以，如果你喜欢我的文章，觉得它有用，不妨请我喝杯咖啡！我会非常感激的。
感谢您花时间阅读这篇文章。如果您觉得它有用，请点赞 ❤️ 或 🦄，分享并评论。
文章来源：https://dev.to/adrianbdesigns/icon-workflow-for-the-web-an-in-deep-guide-26hj