图标字体在网页制作中的应用.pdfVIP

图标字体在网页制作中的应用 杨再兴 (南京师范大学机器学习与认知实验室，南京 210024) 摘 要：图标字体 (IconFont)即字体化的图标，是网页制作过程中为提高网页的加载速度和满足响应式布局而采 用的一种特殊的网页字体 (WebFont)。介绍了图标字体在网页制作中的优点和使用方法，特别是图标字体的编码 方式。为网页制作人员更规范地使用图标字体提供了依据，为响应式布局提供有益的借鉴和参考。 关键词：图标字体；网页制作；Unicode字符编码；响应式布局 l 图标字体的优点 开发的速度。 与传统网页的位图图标相 比．使用图标字体具有下述 (4)防屏蔽。现在多数手机浏览器为了节省用户的数据 优点： 流量、加快网页的加载速度，普遍提供了无图模式，在无图 (1)保真性，无损缩放。传统网页中使用的图片格式一 模式下．手机网页原本的布局方式被打破，网页中原本应显 般有JPEG、GIF和PNG3种格式，而这些格式的图像都属于 示图片的位置要么无任何 内容 ，要么被空空的盒子所 占据 ， 位图 (或称为点阵图)，位图图像的缺点就是放大后易失真， 严重影响了网页的显示效果，而字体却无需担心被浏览器屏 甚至出现锯齿边缘 。并且图形面积越大，文件的字节数越大。 蔽的危险。 由于图标字体使用的是矢量的字体 (文件格式如 1TrF、EOT、 为了对比两种不同的方式对 网页加载速度的影 响．专 WOFF、SVG等)，而这类字体的优点是字体实际尺寸可以任 门制作 了两版相同样式却实现方式不同的网页：一种使用 意缩放而不变形、变色。所以在使用时无需担心图标是否会 IconFont，另一种使用位图图标 。通过网页加载速度的对 失真 ．更不必像传统网页中为 了显示不 同大小的图标再准备 比 (表 1)．很明显能看出使用图标字体 的网页平均要 比传 多个分辨率不同样式却完全相同的图标。 统使用位 图的网页加载速度快了94．7ms，约为前者 的 1．77 (2)轻量性。一个图标字体文件 比一系列的图像所占用 倍。并且 ，在网页加载过程 中，网页中有几张图片就要发 的存储空间要小，而且图标越多优势越明显。图1为笔者从 送几次 HTFP请求来加载这些图片，而使用图标字体 ，只 IcoMoon在线图标字库中随机抽选了2O个图标以1TrF格式字 需请求一次。对于大型的网站，这种速度上的提升是相当可 体文件为例所统计的图标数量与所 占存储空间 (单位：B)rte) 观的 的关系。从图 1中可以看出，即使在包含 20个图标的字体文 表 1 IconFont页面与传统位图页面加载速度表格 (单位：ms) 件中。文件大小也不过 5KB，而即使一个很复杂的网站中一 l 测试 IconFont页面加载速度 (m) 传统位图页面加载速度 (ms) 般也不会用到这么多图标。一个字体文件中包含多个图标 ， 减少了H兀IP请求的次数，这无疑加快了客户端浏览器的加载 l 136 227 速度 ，又减小了web服务器的请求压力。 2 ll7 252 3 130 226