在用户界面元素中使用图标很有帮助。除元素标签外，图标还可以帮助用户向用户增强用户元素的意图。但是我不得不说，在浏览网络时，我注意到一些图标错位。即使图标的对齐正确，图标也通常在元素更改的印刷样式时响应良好。
我注意到了几个现实世界的例子，我想分享我对如何改善它们的想法。我希望这些技术能够帮助其他人建立用户界面元素，以更好地适应印刷变化并维护设计的原始目标。
我在流行的媒体网站上找到了这个消息传递示例。图标的位置看起来不太糟糕。但是，当更改字体大小和线条高的某些元素样式属性时，它开始解开。
我们希望图标的顶部边缘处于蓝色虚线，但我们经常在红色虚线上找到图标的顶部边缘。
您是否曾经在文本旁边插入一个图标，但它不会与文本的顶部保持一致？您可以将图标移至位置，例如位置：相对；顶部：0.2EM。这效果足够好，但是如果将来的印刷样式变化，您的图标看起来可能不对。
我们可以更可靠地定位图标。让我们使用元素的基线距离（从一线基线到下一行基线的距离）来解决此问题。
基线距离为字体大小 *线高。
我们将其存储在CSS自定义属性中：
- baselinedistance：calc（var（-fontsize） * var（ - lineHeight））;
然后，我们可以使用（基线距离 - 字体大小） / 2的结果向下移动图标。
- iConOffset：calc（（var（ - baseLinedistance） - var（-fontsize）） / 2）;
字体大小为1REM（16px）和1.5的线路高度，我们的图标将移动4像素。
我发现的第二个示例是无序的列表。它通过伪元素之前的A ::使用Web字体（Awesome）为其图标。关于有序和无序列表的造型，有很多很棒的文章，因此我不会详细介绍相对较新的:: Marker Pseudo-Element等。 Web字体通常可以根据所使用的图标与图标对齐方式合作。
因为我们还将在解决方案中使用伪元素，所以我们将利用绝对定位。此示例的图标大小比其相邻副本（约2倍）大一点。因此，我们将改变计算图标最高位置的方式。我们图标的中心应垂直与第一行的中心对齐。
从基线距离计算开始：
- baselinedistance：calc（var（-fontsize） * var（ - lineHeight））;
使用（基线距离 - 图标大小） / 2的结果向下移动图标。
- iConOffset：calc（（（var（ - baseLinedistance） - var（-IconSize）） / 2）;
因此，使用1REM（16px）的字体大小，1.6的线路高度和图标大小为2倍，副本（32px），我们的图标将获得-3.2像素的最高值。
较大的字体大小为2REM（32px），线条高为1.2和64px图标，我们的图标将获得-12.8像素的最高值。
对于用户界面图标，我们有很多选项和技术。我们有SVG，Web字体，静态图像，:: Marker和List-Style-Type。人们甚至可以使用背景色和剪贴仪来获得一些有趣的图标结果。执行一些简单的计算可以帮助以更优雅的方式对齐和扩展图标，从而实现更具防弹性的实现。
另请参阅：先前关于将图标与文本结盟的讨论。
以上是通过印刷对准和比例改进UI元素的图标的详细内容。更多信息请关注PHP中文网其他相关文章！
