关于FONT-ICON在网页设计中的运用

在IUNI商城和IUNI Town的项目开发中,我在网页中使用字体ICON方面做了一些尝试,通过与图片对比,发现兼容效果非常好。

FONT-ICON在CSS3中被普遍使用,但实际上css2中就已经支持了这个font-face属性,通过自定义字体,可以实现很多图标效果。

为什么舍弃png24的图标使用ICON呢,主要优点如下:

  1. 字体ICON均是矢量图标,通过设置字体大小 可以任意无损放大缩小,在Retina屏幕上有天然优势 ,同时原来需要设计不同大小的图标成为历史;
  2. 字体ICON通过代码编写,几乎可以做到兼容所有浏览器,避免IE6以下浏览器不兼容png24格式的天生bug;
  3. 用轻量级代码还原UI,字体ICON大大减少雪碧图的拼接工作,提高效率;
  4. 对比一张具有同样icons的雪碧图和字体文件,字体文件的体积大大缩小,可以减少http的请求(另外可以通过base64编码能置于样式表内,从而做到没有http请求);
  5. 字体图标可以通过CSS样式轻松改变颜色,背景,边框,阴影,透明度等等,变换出很多适合需要的样式。

当然有一些缺点也要说明:

  1. 样式不如图片丰富。但是,我们有很多场景是用纯色icon,特别是在Windows 8这种Metro UI开始越来越多的时候。
  2. 文字渐变在Android平台上无法显示,在充满未知的将来一切或许都会后得到解决。
  3. 重构成本相应提高。需要掌握FONT制作软件(除了PS之外还需要略懂AI,CD,Fontcreator) 。

根据上面的缺点,我们的解决办法是:

  1. 不能使用字体的ICON(主要是三色以上的icon以及渐变的icon)降级继续采用spirite方式加载;
  2. 经过测试在Android平台上的浏览器中打开不会受到影响,可能原生App中使用会有一定的兼容问题;
  3. 重构提高自身的素质,逐渐掌握字体ICON的制作方法,我将一些常用的ICON做了一个字体库的部署,提供给我们这边的重构\前端同学使用,后续会通过分享,教大家如何制作字体。

在设计ICON图标的时候,尽量保留矢量图,以确保能快速制作FONT-ICON。

可以通过访问开发机环境的 http://www.iuni.com/html/font.shtml 来查看字体ICON实现方法

注意事项
  1. 火狐浏览器会遇到字体文件跨域问题,需要服务器做相应的设置
  2. 字体文件有可能会下载失败的情况,虽然这种情况可能比较少,但是也要考虑下载失败的情况下的替代方案
  3. 设计字体时最好使用矢量绘图工具以保证图片不会出现锯齿
  4. 在某些浏览器下字体比较小的时候出现锯齿,可以使用 -webkit-text-stroke-width: 0.2px;来弱化边缘锯齿
  5. 在chrome下被加粗可以使用 -webkit-font-smoothing: antialiased; 处理兼容性

以下可以解决跨域问题

1.把文件移动到同个域名下。当然我们把静态文件移动到其他域名下肯定是有特殊原因的,所以这不是个好的解决方法。(cdn缓存,所以这种办法大型网站不可取)

2.把字体文件进行BASE64编码。我们在img src属性里经常可以见到许多BASE64编码的图片,在font-face下也是可以把字体文件进行BASE64编码的,这样字体文件就被以编码的形式潜入到css文件中了。但是问题是我们为了浏览器兼容常常会准备多个格式的字体,原来只要加载其中一个字体就行了,而现在我们就需要把所有格式的字体文件全部编码进css文件中,造成css文件体积一下增大数倍!带宽是金,因此这个也不是一个很好的解决方法,除非你的字体文件体积本身比较小。

3.添加“Access-Control-Allow-Origin”响应头信息。这个是最好的解决方法了,给字体文件的http相应头信息里添加Access-Control-Allow-Origin:*,这样字体文件就能被跨域调用了。

比如在nginx平台通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址——在Nginx的conf目录下修改nginx.conf或者vhost下对应的domain conf,添加以下代码

location ~* \.(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

发表评论

记录工作生活点滴。

返回
顶部