谷歌 Web 开发最佳实践手册(2.1.3):完全避免图片

伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:有时候,最好的图片本身却并不是图片。在尽可能的情况下,请优先使用浏览器自带的特性来提供相同或者相似的功能。浏览器之前要产生视觉效果可能需要图片。这意味着浏览器现在可以不需要下载单个图片,也不需要努力阻止图片被放大。而图标可以使用Unicode或者特殊的图标字体生成。

本篇教程将介绍:

  1. 将文本放在标签中,而不是嵌进图片内
  2. 使用CSS替代图片
  3. 使用Unicode字符替代简单图标
  4. 使用图标字体替代复杂图标

概要

尽可能避免使用图片,而充分发挥浏览器的能力,使用Unicode字符替代图片,以及使用图标字体替换复杂图标。

将文本放在标签中,而不是嵌进图片内

在尽可能的情况下,文本就应该是文本,而不要嵌进图片中。不能像那些使用图片作为头条信息或者将电话、地址等联络信息写进图片的例子一样,这种做法妨碍人们去复制粘贴信息,让屏幕阅读器的可访问性变差,也不是响应式应有的做法。可取而代之的,是将文本放在标签中,使用Webfont完成你所需的样式。

使用CSS替代图片

现代浏览器能够使用CSS特性,创造之前需要使用图像来完成的样式。例如,复杂渐变可以使用 background 属性创建,阴影可以使用 box-shadow 创建,而圆角可以使用 border-radius 属性添加。

请记住使用这些技术要求一定的渲染周期,在移动设备上影响较大。如果过度使用,你将失去得到的任何好处,并且可能影响性能。

使用Unicode字符替代简单图标

许多字体都支持数量庞大的Unicode图示,这些图示可以用来替代图片。与图片不同,Unicode字体的放缩性很好,不管他们出现在屏幕上是大是小,他们看上去都会很好。

在普通字符集之外,Unicode还会包含数字形式的符号 (⅐)、箭头 (←)、数学运算符 (√)、几何形状(★)、控件图片(▶)、盲文符号 (⠏)、音符(♬)、希腊字母(Ω)、甚至还有国际象棋棋子(♞)。

使用Unicode字符就像使用命名HTML实体一样,使用 &#XXXX 的格式,这里的XXXX代表着Unicode字符码。例如:

You’re a super ★

使用图标字体替代复杂图标

对于更复杂的图标需求,图标字体通常更轻量,易于使用,通过单个HTTP请求就能获得。图标字体相对于图像有几个好处:

  • 图标字体是矢量图,而且可以无限缩放。
  • 对于颜色、阴影、透明度和动画的CSS效果更加直接。
  • 整套图标都可以包含在一套字体中。

thgehgerictheththon-fonts

查看完整示例

网上有成百上千的免费和付费图标字体,包括Font AwesomePictos 和 Glyphicons

请确保需要使用这些图标的时候,能够平衡额外的HTTP请求和文件大小。例如,如果你只需要少数的几个图标,那最好是使用一张图片或者一张Sprite图。

 

收藏 评论

关于作者:埃姆杰

(新浪微博:@埃姆杰) 个人主页 · 我的文章 · 1

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部