iconfont、webfont的使用

最新推荐文章于 2022-02-16 16:31:25 发布

东都花神

最新推荐文章于 2022-02-16 16:31:25 发布

阅读量1.3k

点赞数

文章标签：图标字体 iconfont

本文链接：https://blog.csdn.net/qq_33988065/article/details/51722149

版权

代码：

一、iconfont demo

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8" />
        <title>IconFont</title>
        <style type="text/css">
            @font-face {
                font-family: "iconfont";
                src: url('font/iconfont.eot?t=1466407979');
                /* IE9*/
                src: url('font/iconfont.eot?t=1466407979#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('font/iconfont.woff?t=1466407979') format('woff'), /* chrome, firefox */
                url('font/iconfont.ttf?t=1466407979') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
                url('font/iconfont.svg?t=1466407979#iconfont') format('svg');
                /* iOS 4.1- */
            }

            .iconfont {
                font-family: "iconfont" !important;
                font-size: 66px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    </head>

    <body>
        <i class="icon iconfont">&#xe632;</i>

    </body>

</html>

demo下载

使用方法：
1、下载需要的图标字体并解压。
2、将下载的四个字体文件替换demo中的文件。
3、替换demo中的css，修改body中的类名即可。
注意点：font文件的引入，URL路径填写是否正确。

二、webfont使用demo

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            @font-face {
                font-family: 'webfont';
                src: url('//at.alicdn.com/t/gscufddwstmuc8fr.eot');
                /* IE9*/
                src: url('//at.alicdn.com/t/gscufddwstmuc8fr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('//at.alicdn.com/t/gscufddwstmuc8fr.woff') format('woff'), /* chrome、firefox */
                url('//at.alicdn.com/t/gscufddwstmuc8fr.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('//at.alicdn.com/t/gscufddwstmuc8fr.svg#思源黑体-极细') format('svg');
                /* iOS 4.1- */
            }

            .web-font {
                font-family: "webfont" !important;
                font-size: 60px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    </head>

    <body>

        <p class="web-font">人才皆以不问出身，但是不能没有标准。</p>

    </body>

</html>