day17---2.24

一、字体相关的样式

                    color 用来设置字体颜色(前景色)

                    font-size 用来设置字体大小

                        单位：

                            em 相当于当前元素的一个font-size

                            rem 相当于根元素的一个font-size

                    font-family 字体族(字体的格式)

                        可选值：

                            serif 衬线字体

                            sans-serif 非衬线字体

                            monospace  等宽字体 确保每一个字母宽度一样

                                指定字体的类别，浏览器会自动使用该类别下的字体

                            font-family 可以同时指定多个字体，多个字体间使用,隔开，字体生效时优先使用第一个，第一个无法使用时则使用第二个，以此类推

二、图标字体(iconfont)

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

            font-awesome使用步骤

                1、下载   https://fontawesome.dashgame.com/

                2、解压

                3、将CSS和webfont移动到项目中

                4、将all.css引入到网页中

                5、使用图标字体

                    -直接使用类名来使用图标字体

                        class="fas fa-bell"

                        class="fab fa-accessible-icon"

三、通过伪元素设置图标字体

                    1、找到要设置图标的元素通过before或者after选中

                    2、在conten中设置字体的编码

                    3、设置字体的样式

                        fab

                        font-family: 'Font Awesome 5 Brands'

                        

                        fas

                        font-family: 'Font Awesome 5 Free';

                        font-weight: 900;

四、行高(line-height)

                    行高指的是文字占有的实际高度，可以通过line-height来设置行高

                    行高可以直接指定一个大小，也可以直接为行高设置一个整数

                    如果是一个整数值，行高将会是字体的指定的倍数

                    行高还经常用来设置文字的行间距

                            行间距 = 行高 - 字体大小

                字体框

                    字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度 

                    行高会在字体框的上下平均分配

                将行高设置为和高度一样的值，可以使单行文字在元素中垂直居中，高度值可以省略

五、文本样式

               1、text-align 文本的水平对齐

                    可选值

                        left 左侧对齐

                        right 右侧对齐

                        center 居中对齐

                        juestify 两端对齐

                2、vertical-align设置元素垂直对齐的方式

                      可选值

                           baseline 默认值 基线对齐

                           top 顶部对齐，子元素顶部和父元素顶部对齐

                           bottom 底部对齐

                           middle 居中对齐

                3、text-decoration  设置文本修饰

                       可选值

                             none 默认值 什么修饰都没有

                             underline 下划线

                             line-through 删除线

                             overline 上划线

                4、white-space用来设置网页如何处理空白

                         可选值

                              normal 正常

                              nowrap 不换行

                              pre 保留空白