• @font-face 用字体画图标
  • 莉莎 发表于 2015/6/10 13:19:00 | 分类标签: CSS3 @font-face 图标
  • HTML

    复制代码
     1 <body>
     2     <!-- ul.layout>li*5>a[href=#]>i.icon -->
     3     <!-- Sublime Text 快捷拼写 -->
     4     <ul class="layout">
     5         <li><a href="#"><i class="icon">&#xe601;</i></a></li>
     6         <li><a href="#"><i class="icon">&#xe600;</i></a></li>
     7         <li><a href="#"><i class="icon">&#xe602;</i></a></li>
     8         <li><a href="#"><i class="icon">&#xe603;</i></a></li>
     9         <li class="last-child"><a href="#"><i class="icon">&#xe604;</i></a></li>
    10         <div class="clear"></div>
    11     </ul>
    12 </body>
    复制代码

    CSS

    复制代码
     1 <style>
     2         * {margin:0; padding:0;}
     3         body { background-color: #fc0; padding-top: 50px;}
     4         ul li { list-style: none;}
     5         a { text-decoration: none;}
     6         .clear { clear:both;}
     7         .layout { width:604px; margin:0 auto;}
     8         .layout li { display: block; float: left; border-right: 1px solid #930808; }
     9         .layout li.last-child { border-right: none;}
    10         .layout li a { display: block; width: 120px; height:120px; line-height: 120px; text-align: center; background-color: #f00;}
    11         .layout li a i { color:#fc0;}
    12         .layout li a:hover i { color:#fff;}
    13         @font-face {
    14             font-family: "icomoon";
    15             src:url('fonts/icomoon.eot?-9731bi');
    16                 /*↑兼容IE9兼容模式打开IE8及其以下浏览器可以显示;*/
    17                 /*↓兼容IE9可以显示;*/
    18             src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),
    19                 url("fonts/icomoon.woff") format("woff"),
    20                 url("fonts/icomoon.ttf") format("truetype"),
    21                 url("fonts/icomoon.svg") format("svg");
    22             /*EOT { 微软开发用于嵌入网页中的字体,IE专用字体; }
    23             **WOFF { Web字体中最佳格式,被W3C推荐; }
    24             **TTF { 由Microsoft和Apple联合开发的一套字体标准,是Mac OS和Win操作系统中最常见的的一种字体; }
    25             **SVG { 用于SVG字体渲染的一种格式,是由W3C制定的开放标准的图形格式; }
    26             */
    27             font-weight: normal;
    28             font-style: normal;
    29         }
    30         .icon {
    31             font-family: "icomoon";
    32             font-style: normal;
    33             font-weight: normal;
    34             font-size: 90px;
    35             -webkit-font-smoothing: antialiased;
    36             -moz-osx-font-smoothing: grayscale;
    37             /*抗锯齿属性*/
    38         }
    39 </style>

    复制代码

    SHOW

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:莉莎
  • 加入时间:2014/6/1 14:46:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮