首页 > 代码库 > 2015-01-07 FontIcon

2015-01-07 FontIcon

fontIcon

今天要写的界面需要一个删除的图标.打算点击的时候 旋转和改变颜色 ,懒得找图片素材就用了font-Icon

http://iconfont.cn/ 阿里的字体图标, 想要编辑的话,需要保存到图标应用项目, 项目里可以直接生出css链接, 确实很方便.

开始打算把字体写到css里(Jingle 就是这么做的) 

研究结果:

@font-face{

font-family:"custom";

src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEA.. ) format(‘truetype‘);

}

将字体文件.ttf 转成base64,位的编码就可以使用; (ie8以上才支持base64编码)

使用时 ,如果字体编码是5位, 在safari 和移动端显示会有问题. 解决办法: 自定义为4位; 

分析一下这样做的好处, 减少服务器请求, 放在css里面很容易做到缓存效果,大部分应用都是基于这个考虑。

不好 就是麻烦, css文件变大.  后面我没有采用这种模式, 直接用了 阿里生成的css链接.

Jingle中字体的配置

.icon{
font-family: ‘Jingle‘;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;//设置字体的抗锯齿或者说光滑度的属性
/* reset */
display: inline;
width: auto;
height: auto;
line-height: inherit;;
vertical-align: baseline;//垂直对齐方式。
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin: 0 3px;
}

.icon:before {//这里放的图标
text-decoration: inherit;
display: inline-block;
speak: none;//听觉啥啥啥的
}

解决完 图标就开始处理动画效果

transition:从一个样式到另一个样式

-webkit-transition: -webkit-transform 1s, .. , ..;

//兼容性问题

transition: transform 1s;
-ms-transition: -ms-transform 1s; /* IE 9 */
-moz-transition: -moz-transform 1s; /* Firefox */
-webkit-transition: -webkit-transform 1s; /* Safari 和 Chrome */
-o-transition: -o-transform 1s;

 

transform: 翻转旋转 等

 @keyframes custom //动画, 执行完 还原到 最初设置的样式

一整天就这些事情, 效率好低. 主要还是做事马虎, 目的不够明确.

移动设备页面需要用到的消息头

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

2015-01-07 FontIcon