【前端学习之HTML&CSS进阶篇】- CSS第一篇 - @规则与web字体图标

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css。在前几节博客中我们学习到了HTML中多种多样的元素，本节内容开始，让我们进入CSS进阶部分的学习。

一、@规则

1. 概念

• 全称为at-rule: 又叫@规则、@语句、CSS语句、CSS指令

2. 用法

（1）import:

书写方法：@import “路径”;
用处：导入另外一个CSS文件;
例如，直接在HTML文件中利用link链接index.css;然后在index.css中书写@引入reset即可；

    @import "reset.css";

注意：此时打开文件的顺序为由index文件打开reset文件

（2）charset

• 使用方法：@charset "utf-8"; 注意“”此代码必须写到第一行

• 作用：告诉浏览器该CSS文件，使用的字符编码集是UTF-8；

二、web字体和图标

1. web字体

• 问题：用户电脑上没有安装相应字体；

    p{
    	/* 例如此时电脑里没有翩翩体 */
        font-family: "翩翩体-简", "Arail", "微软雅黑", "sans-serif";
    }

下图左侧是没有对应字体后的效果，会采用font-family后面的字体，右侧是将font放入文件夹内部的结构

• 做法：强制用户下载字体文件，使用font-face制作字体：

    /* 自己制作一个字体 */
    @font-face{
        font-family: "good night";
        src: url("./font/晚安体.ttf");
    }
    p{
        font-family: "good night";
    }

2. 字体图标

• 字体图标网站：iconfont.cn 一个前端图标领域强烈推荐的网站

1. 进入网站后，首先登录：
   

2. 登录完成后搜索图标并加入购物车
   

3. 在购物车界面选择项目(首次需要新建)
   

4. 三种使用图标的方法如下：

（1）在线方式：

• 选择font class，生成代码并复制(实际上是生成了一个CSS文件)
  

• 使用link链接，href处粘贴代码
  

• 想要使用某一个图标：复制该图标代码

• 使用i元素【推荐】，添加两个类样式，一个是iconfont、另一个则是复制代码

.icon-anemo{
            color: rgb(32, 228, 136);
        }

<i class="iconfont icon-anemo"></i>

重点：这个图标实际上不是图片，而是一种字体，可以修改颜色、大小等属性，且放大后不会模糊

（2）离线方式：

选择下载至本地，将除demo.css以及html文件外的文件复制到css目录下

使用link链接iconfont.css即可，其余操作相同；

（3）unicode方式：

• 类样式，直接复制一个at指令，远程读取字体文件

 <style>
    @font-face {
        font-family: 'iconfont';  /* Project id 3262259 */
        src: url('//at.alicdn.com/t/font_3262259_u0c0c3pnrb.woff2?t=1647776165276') format('woff2'),
        url('//at.alicdn.com/t/font_3262259_u0c0c3pnrb.woff?t=1647776165276') format('woff'),
        url('//at.alicdn.com/t/font_3262259_u0c0c3pnrb.ttf?t=1647776165276') format('truetype');
    }
    .iconfont{
        font-family: "iconfont"
    }
</style>

• 使用某一个图标时：

    <!-- unicode -->
    <i class="iconfont">
        <!-- 复制某个字体的代码 -->
        &#xe60f;
    </i>

图标效果如图：

总结

本文主要介绍了关于@规则和web字体图标的相关知识，其中@规则在一般情况下使用不多，了解两种情况即可，对于web字体，要掌握下载字体使用的方法；web图标则要掌握icon-font的使用途径。