@font-face
2015-10-10 15:22
281 查看
第一步:使用font-face声明字体
@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }
第二步:定义使用iconfont的样式
.iconfont{ font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。
在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。
icomoon
可以在线导入的SVG格式字体,并进行编辑,然后下载来使用。
相关文章推荐
- 【转】@font-face中#iefix的详解
- CSS3 @font-face 规则
- 嵌入Web字体 ---- @font-face
- CSS3下的@font-face规则
- Css3 @font-face 为自己的网页设置自定义字体
- 把vux中的@font-face为base64格式的字体信息解码成可用的字体文件
- @font-face
- 利用CSS的@font-face属性,在网页中嵌入字体
- 自定义网页字体 @font-face
- CSS3 @font-face
- CSS3的自定义字体@font-face:将图片ICON转为字体
- CSS3 @font-face
- font-face使用备忘
- 网页中导入特殊字体@font-face属性详解
- 【CSS3】---嵌入字体@font-face
- 【转】CSS3 @font-face
- @Font-face 的用法
- CSS3@font-face 使用与特别注意事项 (字体格式需woff)
- CSS学习-@font-face属性
- @font-face属性参数详细介绍