css3中@font-face

最新推荐文章于 2023-06-04 20:44:28 发布

hubin_js

最新推荐文章于 2023-06-04 20:44:28 发布

阅读量281

点赞数

分类专栏： css2~3 文章标签： css3

本文链接：https://blog.csdn.net/hubin_js/article/details/74277329

版权

css2~3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

@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>

这里写图片描述

hubin_js

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3中@font-face

@font-face的语法规则@font-face{ font-family："iconfont"    src: url("font/iconfont.eot");  src: url("font/iconfont.eot
复制链接

扫一扫