前端HTML+CSS学习第三天

1.项目自身提供字体（注意版权）
@font-face{
/* 指定字体名字，可自己定义 /
font-family: ‘myFont’;
src: url(’./字体/ZCOOLXiaoWei-Regular.ttf’) format(“truetype”);
}
主体中：font-family:myFont
2.图标字体（注意版权）
在行内元素中

若fas无法显示，可替换为，反之亦然
3. / 使用伪元素在每一行前方添加一个图标 /
li::before{
/ f56b来自在Zeal中搜索fas对应图标最右侧编码 /
content: ‘\f2a0’;
/ 在./fontawesome/css/all.css中查看字体有Font Awesome 5 Brands和Font Awesome 5 Free /
/ font-family: Font Awesome 5 Brands; */
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
}
4.

<span class = "fas fa-cat"></span>
<!-- 图标表示方式2 &#x图标编码-->
<span class="fas">&#xf1b0；</span>

5.阿里图标的使用
在https://www.iconfont.cn/页面将图标加入购物车，进入我的项目，下载至本地，解压。
将文件尽数移动到项目内部，引入文件中的iconfont.css文件,
打开解压文件中的demo_index.html,在图标下侧查看图标编码
使用图标

     i.iconfont{
        font-size: 100px;
    }(在样式中)
    
<i class="iconfont">&#xe63f; </i>
<!-- 另一用法 icon-icon-test2位于demo_index.html页面中的Font class类别下-->
<i class="iconfont icon-icon-test2"></i>

/* 使用伪元素添加图标 /
p::before{
/ 编码就是实体中的编码 */
content: ‘\e63e’;
font-family: ‘iconfont’;
font-size: 100px;
}