教程:做套自己的icon font

Part 1: Why Icon Fonts?

Just because Icon Fonts are Awesome!

来谈个历史问题——
做兼容移动设备的网页时,retina屏幕的存在导致了我们经常要为一个logo做两套图
一套原始尺寸,另一套两倍尺寸,并且还要进行media query。

如果此时我们的logo可以随意放大缩小并且轮廓清晰的话就好了。
当然我们也可以用canvas或svg画个logo上去,但如果页面上有很多这类icon的话,这么做会累死人的……
随着扁平化设计的流行,我们的logo、icon似乎不需要设计的那么立体化了:没有渐变没有阴影,只是单纯的纯色图形
还记得以前在MS Word里用Wingdings字体打小图形的日子吗?
——纯色的、可缩放、轮廓清晰。
——没错,从很早以前开始,字体就可以满足我们这个需求了。

其实Github去年就开始用icon font来做网站的icon了。
并且,github也公开了他们的octicons,供大家使用。
bootstrap开发到3.0时,也把所有的图片icon换成了icon font
再到国内,技术龙头阿里巴巴下的一淘也公开了内部的UX图标字体库
再根据我对淘宝的观察,他们确实也有一套自己的icon font,但是至今没有公开。

所以说,Icon Fonts已经是大势所趋了!

Continue reading “教程:做套自己的icon font”

国内双核浏览器兼容模式和极速模式

最近正在进行的新项目中,正好可以重新构建站点的前端。
旧项目的layout本想采用boilerplate,后来因为有人提出在双核浏览器“兼容模式”下,
IE hack class无效,便修正了IE hack class的位置,从<html>移到了<body>里。

Continue reading “国内双核浏览器兼容模式和极速模式”