@font-face 用字体画图标
2014-12-10 17:33
260 查看
HTML
CSS
SHOW
字体图标下载网站:Icomoon
<body> <!-- ul.layout>li*5>a[href=#]>i.icon --> <!-- Sublime Text 快捷拼写 --> <ul class="layout"> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li class="last-child"><a href="#"><i class="icon"></i></a></li> <div class="clear"></div> </ul> </body>
CSS
<style> * {margin:0; padding:0;} body { background-color: #fc0; padding-top: 50px;} ul li { list-style: none;} a { text-decoration: none;} .clear { clear:both;} .layout { width:604px; margin:0 auto;} .layout li { display: block; float: left; border-right: 1px solid #930808; } .layout li.last-child { border-right: none;} .layout li a { display: block; width: 120px; height:120px; line-height: 120px; text-align: center; background-color: #f00;} .layout li a i { color:#fc0;} .layout li a:hover i { color:#fff;} @font-face { font-family: "icomoon"; src:url('fonts/icomoon.eot?-9731bi'); /*↑兼容IE9兼容模式打开IE8及其以下浏览器可以显示;*/ /*↓兼容IE9可以显示;*/ src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("fonts/icomoon.woff") format("woff"), url("fonts/icomoon.ttf") format("truetype"), url("fonts/icomoon.svg") format("svg"); /*EOT { 微软开发用于嵌入网页中的字体,IE专用字体; } **WOFF { Web字体中最佳格式,被W3C推荐; } **TTF { 由Microsoft和Apple联合开发的一套字体标准,是Mac OS和Win操作系统中最常见的的一种字体; } **SVG { 用于SVG字体渲染的一种格式,是由W3C制定的开放标准的图形格式; } */ font-weight: normal; font-style: normal; } .icon { font-family: "icomoon"; font-style: normal; font-weight: normal; font-size: 90px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*抗锯齿属性*/ } </style>
SHOW
字体图标下载网站:Icomoon
相关文章推荐
- css 使用@font-face 嵌入自定义字体或字体图标方法笔记
- font-face字体图标制作和使用
- font-face 移动端字体图标不显示的Bug
- css3中的@font-face制作图标字体icofont
- font-face引用字体跨域导致font awesome图标无法正常显示
- 利用CSS3 @font-face使用图标字体
- [转] css自定义字体font-face的兼容和使用
- Font-Awesome 强大的字体图标
- CSS3使用自定义字体(font-face)
- 如何在photoshop等图像编辑软件中使用Font Awesome字体图标
- CSS3 @font-face 显示特殊字体
- mac上小程序使用iconfont字体图标
- 【转】CSS3的自定义字体@font-face:如何将icon变成字体?
- .woff字体上传后无效的解决方案,同时包含:@font-face 未能完成opentype嵌入权限检查。权限必须是可安装的解决方案
- 使用CSS3的 @font-face 显示自定义字体
- iconfont字体图标和各种CSS小图标
- Css远程字体 font-face
- iconfont字体图标的使用
- webpack 加载 iconfont字体图标