【极速五分快三在哪玩】为网页添加高清SVG ICON解决方案(上)

  • 时间:
  • 浏览:0
  • 来源:彩神网快三官方-彩神大发快三

随着硬件快速的发展,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屏幕上,有另另十个 像素被拆成了有另另十个 像素,将会它的密度非常高,肉眼根本是看没了锯齿的,可是现在MAC系统下的FF和Chrome都还是用的次像素渲染这项技术。既然iconfont他是有另另十个 字体,就难逃总是出现锯齿的命运,有点痛 在Chrome下可是更加的糟糕了,目前实在通过前端代码也是无法改变一些匮乏。

iconfont将会一些严重的锯齿匮乏意味一些大型的站点可是前一天不须会考虑大规模使用它,类式QQ空间,腾讯云哪此站点早期也都尝试过iconfont方案,但最后都放弃了,为了能给用户更好的感官体验。像淘宝实在目前有一些地方都用了iconfont但也可是局部使用,不须全站使用。

SVG技术

哪此是SVG? SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的四种 图形格式。SVG是W3C制定的四种 新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,有可是是四种 和图像分辨率无关的矢量图形格式。简单的说他可是有另另十个 可伸缩矢量图形 (Scalable Vector Graphics),在浏览器中采用绘图技术。

接下来亲戚亲戚朋友来看看使用iconfont和使用SVG做出来的图标有哪此差异:

Chrome下效果

FF下效果

IE9下效果

上面的demo分别在不同浏览器下的效果,第一行用的是iconfont实现,下面三行都是用的SVG实现的图标,可是调用SVG时的办法不同:第一行是用inline SVG,将SVG直接写在html中来使用,第二行是用的img标签去调用SVG,第三行用样式的background来调用SVG文件。从Chrome和FF下的显示效果,亲戚亲戚朋友看到SVG画的ICON的质量实在是比iconfont要好,iconfont做的图标,我截图后放大后看到线的边缘发虚了,这是将会字体渲染的意味意味,在FF下也是发虚,可是不想到明显。在IE9+下的效果上亲戚亲戚朋友看到IE对SVG的支持性实在差的令人无法直视,IE10,IE11效果和IE9几乎一样(真的是坑爹)。

怎么才能 才能 绘制高质量ICON

在上面的demo中眼尖的同学应该可不可不可以看出在FF下,inline SVG图标有有另另十个 出难题了,然而Chrome却是正常的:

但左边那个图标却是正常的,相当不科学,将会是渲染难题理应左边的也发虚才对,有可是却不到右边的出难题了,定位了可是难题出在哪里,最后发现是画AI文件时出难题了,AI四种 不像PS那样,有网格辅助视觉画图,可是iconfont.cn出了有另另十个 AI模板,实在这套模板可是给AI画了一套辅助线,帮助设计师按照栅格画ICON,我前面的案例可是用的亲戚亲戚朋友提供的模板画的图标,第有另另十个 没难题,有可是第十个 出难题了。亲戚亲戚朋友这套AI模板实际导出后的画布大小是302px302px,有可是分成1616个格子,也可是每个格子实际分得62.625px*62.625px,实在在可是前一天貌似不想出难题的,有可是的demo中却出难题了,于是猜测:

是是是否是是绘制图标出难题了,不到按照四种 规范画法? 是是是否是是将会他的网格不到被整除意味的?

1、将会绘制一些锁型的图标时亲戚亲戚朋友留下了有另另十个 单数列,会不想将会原本意味了他总是出现锯齿,将会是,那难题就来了,将会一定要左右对称将会每次画图都是铺满所有格子,一些做法不太现实,将会可是图标是不一定都完全能铺满16*16的格子。

2、发现iconfont这套模板的网格一些难题,画布网格竟然有1px像素是留空的,也是说16格子实在是301/16=62.5625px,虽说画布是302px,我不知道这是是是否是是人工失误。

决心和视觉我所人们做一套AI模板,AI模板也是1616的网格,有可是每个网格将亲戚亲戚朋友的实际导出像素设置成1px,也可是整个画布是16px16px,原本的就不怕不想被整除了。有可是用新AI模板重新做了有另另十个 图标,进行测试,左右上下对称的做了有另另十个 ,不到左右对称的做了有另另十个 ,左右上下不到对称的也做了一份。,有可是导出效果查看:

按照这套模板做了图标后,FF下面有另另十个 图标都是完美的,不到总是出现虚边,有可是Chrome也同样是完好的,这是亲戚亲戚朋友希望看的的。也证实了上面的有另另十个 难题猜测是正确的。可是这套AI模板是完全可不可不可以满足不同场景图标绘制。

小结:

本文介绍了字体渲染机制,并分析iconfont总是出现锯齿的底层意味,再到怎么才能 才能 绘制高质量SVG ICON的步骤和输出了一套严谨的AI绘制图标模板。