1. 字体相关的样式

我们前面讲过字体的两个属性

• color用来设置字体颜色

• font-size字体的大小

  • em 相当于当前元素的一个font-size
  • rem 相对于根元素的一个font-size

    2. font-family（字体分类）

    **font-family** 字体族（字体的格式）

• serif 衬线字体（字的开始和结尾 带个小勾）
  

• sans-serif 非衬线字体 （字横平竖直）
• monospace 等宽字体（每个字母的宽度相等）
  
• cursive 手写体
  
• fantasy 梦幻字体
  

上述字体是字体的分类，我们经常使用的一些字体，如微软雅黑、黑体、楷体、宋体、Consolas等，才是具体的某种字体（自己写的代码决定分类，浏览器决定字体，所以不同的浏览器会出现不同的字体，就涉及到浏览器兼容问题）；
指定字体的类别后，浏览器会自动使用该类别下的字体 font-family
font-family可以同时指定多个字体，多个字体间使用逗，隔开字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推；

font-family: 'Courier New', Courier, monospace

3. 几种字体

手写体

Indie Flower

Ink Free

Nanum Pen

MV Boli

Segoe Print

Shadows Into

艺术体

Barrio

Julius Sans One

Lobster

Monoton

Poiret One

乱码字体

MT Extra

Symbol

Webdings

Wingdings

中文字体

方正粗黑宋简体

微软雅

黑体

楷体

宋体

仿宋

4. @font-face 联网字体

我们除了可以使用系统自带的字体样式外，
还可以在服务器端自定义字体位置
@font-face可以将服务器中的字体直接提供给用户下载去使用
（用户需要联网访问这个字体的下载地址，这个字体的地址就是在我pc端存储的本地地址）

@font-face {
    /* 自己指定字体 名字 */
    font-family: 'myFont1';
    /* 服务器中字体 路径 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf')
        format('truetype');/* 指定字体格式，一般不写，保险问题 */
}
p {
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}

问题

1. 加载速度：受网络速度影响，可能会出现字体闪烁一下变成最终的字体
2. 版权：有些字体是商用收费的，需要注意
3. 字体格式：字体格式也有很多种（woff、otf、ttf这个兼容性最好），未必兼容，可能需要指定多个

5. 图标字体（iconfont）

字体与图片的区别：

• 图片放大以后容易失真，字体不会；
• 图片内存大，字体需要内存很小；

• 图片无法调节样式和颜色，字体可以；

  图标字体简介

  在网页中经常需要使用一些小型图标，可以通过图片来引入图标。但是图片大小本身比较大，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过@font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标

  fontawesome的字体库

  有三种引入方式：

• 通过类 :重点是类格式** class="fab fa-js;**

• 通过伪元素：**::before、::after；**
• 通过实体 ：**&#x图标编码;**

  fontawesome

  官方网站：https://fontawesome.com/ 下载解压完毕之后，直接将css和webfonts移动到项目中即可使用

1.通过类class设置

格式：重点是类格式 class="fab fa-js

/*引入all.css*/
<link rel="stylesheet" href="/font/fontawesome/css/all.css">
<style>
  /*添加颜色处理*/
    i{
        color: green;
    }
    /*引用的成形图案的名称*/    
    .fa-venus-mars,
    .fa-mars-double {
        color: red;
    }
    .fa-html5 {
        color: #E34D22;
    }
    .fa-css3 {
        color: blue;
    }
    .fa-js { 
        color: #D1B514;
    }
</style>
/*总的设置*/
<i class="fas fa-bell" style="font-size: 50px; color: green;"></i>
/*从zeal里面粘出来 fa-bell， 前面不是fas就是fab,  后边通过style设置图标字体的大小和颜色*/
/*css里面是标签fab、fas和样式fa-lg的合成库， webfont是🔔等成形图案的合成库*/
<!-- 大小 -->
<i class="fab fa-weixin fa-lg"></i>
/*fab类别标签 和 fa-lg大小 来自css,   
  fa-weixin来自webfont(由于是二进制文件无法显示，一般从zeal手册查询)*/
<i class="fab fa-weixin fa-2x"></i>
<i class="fab fa-weixin fa-3x"></i>
<br>
<!-- 边框 -->
<i class="fab fa-weixin fa-2x fa-border"></i>
<br>
<!-- 旋转 -->
<i class="fab fa-weixin fa-2x  fa-rotate-90 "></i>
<!-- 水平对称 -->
<i class="fab fa-weixin fa-2x fa-flip-horizontal "></i>
<!-- 垂直对称 -->
<i class="fab fa-weixin fa-2x fa-flip-vertical "></i>
<br>
<!-- 动画 -->
<i class="fa fa-venus-mars fa-3x fa-spin"></i>
<i class="fa fa-mars-double  fa-3x fa-pulse"></i>
<br>
<!-- 列表 -->
<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
  /*fa-li 首行缩进   fa是标签 */
</ul>
<br><br><br>
<!-- 组合 -->
<span class="fa-stack fa-lg">
    <i class="fab fa-html5 fa-stack-1x fa-10x"></i>
    <i class="fab fa-css3 fa-stack-1x fa-4x"></i>
    <i class="fab fa-js fa-stack-1x fa-2x"></i>
</span>

其中fas/fab是免费的，其他是收费的

2. 通过伪元素::设置（适合批量操作）

实际上就是把实体class中设置的 内容和样式大小 批量操作到了css的style的样式中

1. 找到要设置图标的元素通过::before或::after选中
2. 在content中设置字体的编码

3. 设置字体的样式

   • fab：font-family: 'Font Awesome 5 Brands';

   • fas：font-family: 'Font Awesome 5 Free'; font-weight：900; ```html

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam deserunt tempore fugit quos eaque, ipsa rerum suscipit iure cumque aspernatur esse cupiditate nihil quas nulla odit? Sequi accusantium labore maiores.

hhhhhhhhhh

山东

     <!-- 右侧菜单 -->
      <ul class="shortcut">
        <li >
             <a href="#">你好，请登录</a> 
             <!-- 直接在标签里加入类 -->
             <a class="highlight"  href="#">免费注册</a> 
        </li>
        <!-- 京东这是用 标签做的分割线 -->
        <li class="linege"></li>
        <li ><a href="#">我的订单</a> </li>
        <li class="linege"></li>
        <li >
            <a href="#">我的京东</a>
            <!-- 向下的小三角 --> 
            <i class="fas fa-angle-down"></i>
        </li>
        <li class="linege"></li>
        <li ><a href="#">京东会员</a> </li>
        <li class="linege"></li>
        <li >
            <a class="highlight" href="#">企业采购</a>
            <i class="fas fa-angle-down "></i>
        </li>
        <li class="linege"></li>
        <li>
        <span>客户服务</span>
            <i class="fas fa-angle-down"></i>
        </li>   
        <li class="linege"></li>   
        <li>    
            <span>网站导航</span>
            <i class="fas fa-angle-down"></i>
        </li>
        <li class="linege"></li>
        <li >
            <span> 手机京东</span>
        </li>
    </ul>
</div>

```

导航条的下拉框