图标字体（代码演示）

最新推荐文章于 2024-06-21 22:51:56 发布

原创最新推荐文章于 2024-06-21 22:51:56 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

8 篇文章

订阅专栏

			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>