江苏龙网

  1. 首页 > 资讯 > 科技 > >

|小图标，大学问( 二 )


所以 ， 是否使用 Data URL 技术需要仔细权衡 ， 根据性能测量数据进行优化 。
现代：字体图标
随着视网膜屏幕的登场 ， 图标面临着新的严峻挑战 ， 那就是分辨率 。
通常来说 ， 图标文件的分辨率和屏幕的逻辑分辨率是一样的 ， 但是在视网膜屏下 ， 这个论断不再成立 。 如果视网膜屏的设备像素比（devicePixelRatio ， 简称 dpr）是 3 ， 那么图标就需要三个像素才能在视网膜屏下绘制出一个完美的逻辑像素 ， 否则就会有粗糙感 。
即使不考虑下载大小的问题 ， 也需要对原有工具链进行改造才行 。 那不如干脆试试另一种方案 。
近代的另一项发明派上了用场 ， 那就是“自定义字体” 。
这本来是为了解决让浏览器显示更好看的文字而创造的技术 ， 比如要想用一种用户机器上没有的字体显示艺术字 ， 我们只需要提供一个字体文件 ， 这些字体文件包含我们要用的那些文字的字体轮廓数据就可以了 。 这些轮廓数据是矢量数据 ， 用来表示每个字的“画法”：从 0,0 开始 ， 以 50%,10% 为控制点 ， 画一条贝塞尔曲线到 100%,30% 。 显然 ， 这种数据是不会受到屏幕分辨率影响的 ， 就像我们日常看到的文字一样 ， 无论把它放到多大 ， 它都是平滑而且不失真的 。 事实上 ， 这正是一切矢量绘图技术共同的优点 。 请记住它 ， 因为后面我们还会用到另一种矢量绘图技术 。
既然我们可以通过控制显示数据 ， 把字母 A 显示为手写体的 A ， 那么我们是不是也可以把它显示成一个看起来和 A 完全不一样的图标呢？比如……一座房子？当然可以 ， 事实上 ， 这正是字体图标的基本原理 。
除了支持平滑缩放的优势以外 ， 字体图标还有另一个优势 ， 那就是它本身就是文字 。 它会受到字号、前景色、行高等参数的控制 ， 和普通文字没有任何区别 。 而图标 ， 在实际应用中经常会和普通文字一起混排 ， 这些特点正是我们想要的 。
|小图标，大学问
本文插图

不过 ， 字体图标也有一些缺点 。
首要的缺点是单色 。 由于字体中只有矢量数据 ， 没有颜色数据 ， 因此 ， 字体图标必然是单色的 。 这在一些场景下是不够用的 。
其次是工具链复杂 。 虽然有一些工具可以帮你把一组 svg 文件拼合成一个字体文件 ， 但是它们对 svg 的格式有严格的要求 ， 不是任何一个 svg 都可以用的 。 你很难向 UX 解释什么样的图能用、什么样的图不能用 。 其次 ， 即使是可用的 svg ， 你也很难告诉工具每个图标的字体基线是哪个（通俗来说 ， 基线就是你这个图标的底部和字母 g 的底部对齐 ， 还是和字母 h 的底部对齐） 。
基于这些特点 ， 在普通的团队中使用自定义字体图标是相当困难的 。 不过好在还有不普通的团队 ， 比如 FontAwesome ， 他们专门制作、维护了一组免费图标贡献给开源社区 。 如果你需要的图标恰好是其中之一 ， 那么直接用就可以了 ， 你需要做的只是引入它的 css 之后 ， 在 html 中使用<i class=''fa fa-home''></i> 。
当代：svg 图标
FontAwesome 虽好 ， 但也不是万能的 。 它往往不足以融入 UX 的 Design System ， 而 UX 显然也不愿意削足适履 ， 为了图标而改变自己的整体设计 。
因此 ， 对开发团队更友好的方式仍然应该是高度可定制的、方便单个处理的 。 如果能直接使用 UX 提供给我们的 svg 文件显然是最理想的 。 问题在于 ， 该怎么用 。 这里面的门道可就多了 。
|小图标，大学问
本文插图

在这种场景下雪碧图和 Data URL 仍然是可用的 ， 因为它们只需要图片 ， 而不管图片的格式 ， svg 也是图片 ， 也有同样的优缺点 —— 但能支持视网膜屏 。


推荐阅读


上一篇：新机发布|金立祭出大招，新机重305克，网友：用来砸核桃吗？

下一篇：InfoQ|知“微”知彰，互联网企业的微服务5G创新有哪些从0到1？