Jun01

用系统字体实现简单iconfont

css-garden

现在很流行iconfont,几乎到处都能看到使用这项技术的网站,甚至一些根本不面向移动设备的网站都开始玩面包块导航,我个人觉得有些跟风了,明明PC端那么大的显示屏,偏偏让用户再点击或者移动上去才能看到菜单,多此一举。

貌似现在国内还是习惯于PC一个版本,手机再制作一个版本,甚至对苹果、安卓等平板再制作不同版本的网站,再部署一堆二级域名:www\m\wap\pad……

而我感觉国外已经不这么玩了,自适应已成为主流,比如cnn这样的大型资讯网站,为什么这么讲呢,因为Google AdSense之前是提倡移动端广告部署的,而现在主推的是自适应代码。毕竟以后发展,制约移动端的将不是带宽,而仍然集中在屏幕大小,当然目前国内的网费,移动端多图的话,访客受不了,另外很多人还在用IE8,甚至IE6,没办法推广html5、CSS3,不得不搞两套(多套)网站。

扯远了。刚制作一个自适应导航的时候,用到面包块图标,而整个网站几乎没有其他更多的图标,这个时候再加载一个iconfont,显得多余。于是我想利用大多数系统自带的字体来制作整个面包块按钮“≡”和关闭按钮”x”。

查找的过程中,发现Arial,Times New Roman这些常见字体均包括上述图标字符。

CSS如下,其他可以配合sidr实现,具体在这里就不介绍了。

#simple-menu:before{
	display:inline-block;
	font:bold  42px/1em "Times New Roman", Arial;
	vertical-align:text-bottom;
	content:"\2261";/*面包块按钮“≡”*/
	color:#666;}
.sidr-open #simple-menu:before{
	display:inline-block;
	font:bold  42px/1em "Times New Roman", Arial;
	vertical-align:text-bottom;
	content:"\00D7";/*关闭按钮"x"*/
	color:#666;}

Comments are closed.