利用图标字体实现在线地图上的地点标注与颜色渲染

前阵子做在线地图应用的时候，有个需求，就是地点标注出来要按区间分段渲染颜色。当然，可以用标签模拟正方形，三角形，再填充颜色，用css3还可以模拟一些圆形出来，但是一来要兼容万恶的IE6+，二来又得要好看。

然后我来谈谈我的解决方案吧，近几年移动端浏览器上流行的图标字体（icon font）就派上用场了，最重要是IE6都支持它。下图是使用图标字体后的地图渲染效果，是不是很不错呢？

使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：
1.自由的变化大小
2.自由的修改颜色
3.添加阴影效果
4.IE6也可以支持
5.支持图片图标的其它属性，例如，透明度和旋转等等
6.可以添加text-stroke和background-clip:text等属性，只要浏览器支持

如何获取图标字体呢？在这里我比较推荐IconMoon这个网站，使用它你可以通过上传SVG或者字体来生成你需要的icon字体，或者直接下载它已有的icon字体，iconMoon内置了相当多的实用图标，最方便的地方在于一旦选择你想要的图标字体下载之后，它已经帮你生成了兼容所有浏览器的css文件和字体文件了，甚至连demo页面都帮你生成了，如下图所示：

然后使用的时候只需要动态创建具有指定样式的span标签就行了

颜色怎么样，都由你来定~！

字体文件有如下这些：

最后再补充一点，在chrome上有一个小小的问题需要处理一下，因为chrome默认是读取woff字体文件，而它在渲染woff字体文件时会出现边缘锯齿的现象！

怎么解决这个问题呢？chrome对svg字体文件的渲染非常平滑，很完美。所以我们只要利用css3的hack方式来让chrome只读取svg字体文件就可以了~！

@font-face {
	font-family: 'icomoon';
	src:url('icomoon.eot?74r1vd');
	src:url('icomoon.eot?#iefix74r1vd') format('embedded-opentype'),
		url('icomoon.woff?74r1vd') format('woff'),
		url('icomoon.ttf?74r1vd') format('truetype'),
		url('icomoon.svg?74r1vd#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0){
	@font-face {
	font-family: 'icomoon';
	src:url('icomoon.svg?74r1vd#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	}
}

加上如下这段@media screen and (-webkit-min-device-pixel-ratio:0)的Css就行了，因为这段代码只有支持css3特性的浏览器能识别。

好了，该说的都说完啦，本人原创文章转载还请注明出处哦，谢谢各位！^_^~