为网页添加高清SVG ICON解决方案（上）

设计达人 2015-11-06 1 阅读

随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。

1.多倍图片

目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍，devicePixelRatio= 3就做三倍，有些人可能会直接做3倍的图片，这样就可以同时兼容devicePixelRatio = 2 ，但是这样其实对于devicePixelRatio = 1和devicePixelRatio = 2的用户他们就会浪费带宽去加载devicePixelRatio = 3的图片，所以为了提升用户体验，一般我们会分开做几套图片，根据用用户的devicePixelRatio判断让他们加载对应的图片。

2.iconfont字体图标

在很多国外的响应式站点里一般会采用iconfont，因为可以直接通过font-size和color属性来控制icon的大小和颜色，非常方便，而且由于iconfont本身就是字体文件，会矢量适配各种不同devicePixelRatio，但是在PC上当图标小于等于16px时，或者复杂度高的图标会出现比较严重锯齿，图标无法展示清晰，特别在chrome下的表现尤为严重。正因为如此这个技术在推进过程中遇到许多困难，因为在很多场景下图标确实会较小甚至小于16px，而且有些16px的图标如果复杂度较高，iconfont实现出来的icon会经常出现看不清的情况，而且国内PC用户是占最多的，所以iconfont的这种表现效果很多用户和设计师无法接受。

为什么iconfont会出现锯齿？

这个问题其实并不是iconfont的错，但很多人都觉得是它的问题，关于锯齿问题，我们先来了解下浏览器的字体渲染机制，阿里有篇文章《 字体图标制作详解 》里有一部分关于早期字体渲染机制的说明，内容如下：

（从左到右依次）理想的渲染状态、黑白渲染、灰度渲染、次像素渲染
上图左侧第一张是我们认为一种比较理想的渲染效果，但是通过刚才我们介绍栅格我们可以了解到这种状态是不可能的，因为第一代黑白渲染和第二代灰度渲染是不可能做到显示半格像素或一个像素中显示弧度的。
黑白渲染和灰度渲染在渲染图形遇到半格像素或则弧度的时候，他们会有各自不同的处理方式；
举个例子：
如上图红点处像素，我们理解他是有弧度的，且不占满一个像素；各个渲染方式的处理办法如下：
黑白渲染
黑白渲染相对来说比较粗暴，直接通过四舍五入的形式把这里要描绘的图形不显示了；（黑白渲染的形式主要应用于打印机渲染，但是打印机本身的精度非常高，所以打印出来的图形还是很细腻的）
灰度渲染
灰度渲染显得就智能一些了，他通过灰度降级的方式来表达，如果占不到一个像素那就根据他占的面积来降低这个像素的灰度；占的面积越小灰度就越低；
次像素渲染
次像素渲染是第三代渲染方式，相对来说比较高级，他从从左至右将一个像素分成三份；用不同的色彩值来显示图形，这样图形看起来就更加细腻；

现代浏览器字体渲染技术

目前mac系统采用的就是次像素渲染技术，但是现代的window下的高级浏览器例如：IE9+ 、chrome、FF等浏览器采用的是 DirectWrite 或 GDI 这种更高级的字体渲染技术，这里我简单介绍下这两种新的字体渲染技术：

上图从左至右分别用的是：灰度渲染、次像素渲染和 DirectWrite 或 GDI 实现的效果，在FF官方博客中有一篇文章对这两个新的渲染技术做了简单的一个解释，他们两个都是采用的LCD的像素红色、绿色、蓝色来进行像素填充，右侧的文字被放大后我们看到了字体栅格被不同色块填充，其实人眼对于亮度差异非常的敏感，当这些颜色用在像素级别里面我们的眼睛往往认为字形比单纯灰度消除锯齿的效果更好。

在Windows下的Firefox 4中采用的就是GDI这个技术进行字体渲染的，但是到了Firefox 4+之后的版本开始使用了DirectWrite这个技术，官方解释是说DirectWrite支持硬件加速，而且API也更加现代，而GDI API存在许多缺陷和问题。

关于DirectWrite和GDI他们之前的差异这里不作太多描述，在文章最后有相关文章链接，有兴趣的同学可以查看下。上面讲了字体渲染的历史，我们现在来看看目前Windows系统下的浏览器各自都是采用的都是什么字体渲染机制：

Chrome目前依旧是使用GDI，而FF和IE9+已经是采用了DirectWrite，这就是为什么iconfont在Chrome下锯齿会比其他浏览器严重的原因，可能GDI确实像FF官方说的存在许多缺陷，不知为何Chrome至今还在继续使用这个技术。

上面说了这么多关于字体渲染机制原理，在这里能得出一个结论： 不管目前使用什么字体渲染技术，字体显示效果始终是会出现锯齿的。在Retina屏幕上，一个像素被拆成了4个像素，由于它的密度非常高，肉眼根本是看不出锯齿的，所以现在MAC系统下的FF和Chrome都还是用的次像素渲染这项技术。既然iconfont他是一个字体，就难逃出现锯齿的命运，特别在Chrome下就是更加的糟糕了，目前确实通过前端代码也是无法改变这个缺陷。

iconfont由于这个严重的锯齿缺陷导致一些大型的站点很多时候并不会考虑大规模使用它，例如QQ空间，腾讯云这些站点早期也都尝试过iconfont方案，但最后都放弃了，为了能给用户更好的感官体验。像淘宝虽然目前有许多地方都用了iconfont但也只是局部使用，并非全站使用。

SVG技术