css 字体族 详细讲解

慢慢是一个很好的词 慢慢遇见 慢慢成长 慢慢喜欢 慢慢温柔 所以我们要一起慢慢来 慢慢看世界 慢慢变老

字体族

说到字体族就要为大家讲讲 图标字体 和 文本的水平垂直对齐方式

一.图标字体

首先来讲解图标字体：

1.本质是字体，但是我们可以改变其属性。
2.就是将图片打包成字体导入网页，这样可以减少网页请求。
3.具有矢量性，即使放大也可以清晰观看。
4.是移动端设备必须的。

了解了字体图标，下面来讲讲字体图标的使用方法：

1.在使用图标时可以将图标直接设置为字体然后通过 font-face 的形式对字体进行引入
2.然后图标字体的使用我们推荐 fontawesome

使用步骤1：

		1.下载 fontaswesome.com
        2.解压
        3.将css 和 wefonts 移动到项目中，放在同一目录下
        4.将all.css 引入到网页中
        5.使用图标字体
            -直接通过类名来使用图标字体
                class="fas 图标名称"
                class="fad 图标名称"

如下实例：
<i class="fas fa-snowboarding" style="color: aqua; font-size: 50px;"></i>
在使用时一定记得先导入项目文件，然后可以通过名字导入想要的字体，既然上面说了图标字体就是图片，那么我们就可以对图标字体进行设置大小，颜色，透明度，等等

使用步骤2：

当然我们还可以通过css代码来设置图标字体，但是这种方法比较麻烦但是更灵活。如下：

p::before{
            content: '\f082';
            font-family: 'Font Awesome 5 Brands';
        }

我们可以直接在content中输入图标的编码。当然font-family中的值也是指定的可以在下载的图标字体中找到。

二.文本的水平垂直对齐方式

下面来讲解文本的水平垂直对齐方式。
水平对齐：

 使用text-align 设置文本的水平对齐
               可选值：
                    left 向左
                    right 向右
                    center 居中
                    justify 两端对齐  

垂直对齐：

vertical-align: 设置元素垂直对齐
                可选值：
                    baseline 默认值 基线对齐 
                    top 顶部对齐
                    bottom 底部对齐
                    middle 居中对齐

附加内容：

1.设置文本修饰：

text-decoration 设置文本修饰
            可选值：
                none 无 可去除下划线
                overline 上划线
                underline 下划线
                line-htrough 删除线 

2.设置文本如何处理空白：

white-space 设置文本如何处理空白
            normal 正常
            mowrap 不换行
            pre 保留空白