首页 > 代码库 > 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