css3中@font-face

来源：互联网发布：主机所在域的域名编辑：程序博客网时间：2024/06/16 08:31

@font-face的语法规则

@font-face{    font-family："iconfont"  <!-- 名字可以自定义 -->    <!-- 注意文件的后缀 -->    <!-- ie9及其以上 -->    src: url("font/iconfont.eot");      <!-- ie6~8 -->    src: url("font/iconfont.eot?#iefix") format("embedded-opentype"),     <!-- Modern Browsers -->    url('font/iconfont.woff') format('woff'),    <!--Safari, Android, iOS-->    url('font/iconfont.ttf') format('truetype'),    <!-- Legacy iOS   -->    url('font/iconfont.svg#box') format('svg')}

字体下载：阿里妈妈

注意的是，下载的时候我们要先添加了自己的购物车中，然后统一下载，同时一定要注意拿到字体的标识符号，不然没有作用

实例

<style>        @font-face {            font-family: 'box';            src: url("font/iconfont.eot");            src: url("font/iconfont.eot?#iefix") format("embedded-opentype"),            url('font/iconfont.woff') format('woff'),            url('font/iconfont.ttf') format('truetype'),            url('font/iconfont.svg#box') format('svg')        }        .box {            font-family: "box";            font-size: 20px;        }<!-- 注意这个编码\e614-->        .box:before {            content: "\e614";        } </style></head><body>   <div class="box">   </div></body>

这里写图片描述

阅读全文

0 0