图标字体（代码演示）

来源：互联网发布：剪切歌曲软件编辑：程序博客网时间：2024/06/08 05:52

web字体

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        p{            font-size:30px;        }        /*  如果要在网页中使用web字体（用户电脑上没有这种字体），*/        /* 声明字体*/        /* 告诉浏览器 去哪找这个字体*/        @font-face {font-family: 'webfont';            src: url('font/webfont.eot'); /* IE9*/            src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */            url('font/webfont.woff') format('woff'), /* chrome、firefox */            url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/            url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */        }        /* 定义一个类名，谁加这类名，就会使用webfont字体*/        .webfont{            font-family: 'webfont';        }    </style></head><body>    <p class="webfont">此处是效果字体    <h1 class="webfont"></h1></body>yle:normal;

                                    图标字体

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        /*申明字体*/        @font-face {font-family: 'my-icon';            src: url('font/iconfont.eot'); /* IE9*/            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */            url('font/iconfont.woff') format('woff'), /* chrome、firefox */            url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/            url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */        }        .my-font{            font-family: "my-icon";        }        p,span,div{            font-size:60px;            color:green;        }    </style></head><body>    <p class="my-font">&#xe716;</p>    <span class="my-font">&#xe67c;</span>    <div class="my-font">&#xe655;</div></body></html>
伪元素图标字体
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        /*申明字体*/        @font-face {font-family: 'iconfont';            src: url('font/iconfont.eot'); /* IE9*/            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */            url('font/iconfont.woff') format('woff'), /* chrome、firefox */            url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/            url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */        }        p{            width: 200px;            border: 1px solid #000;            line-height: 60px;            font-size:30px;            margin:100px auto;            text-align: center;            position: relative;        }        .icon::before{            /*&#xe628;*/            content:"\e628";            /*position: absolute;*/            /*left:10px;*/            /*top:0px;*/            font-family: iconfont;            color:red;        }        span{            position: relative;        }    </style></head><body>    <p class="icon">扫码付款</p>    <span class="icon" >我是span</span>    <div class="icon">divvvvvvvvvvv</div></body></html>

1 0