字体 图标字体 行高 文本样式（css）

字体、图标字体、行高、文本样式（css）

字体相关的样式

color用来设置字体颜色

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

/* font-foce 可以将服务器中的字体直接提供给用户去使用 问题：1.加载速度2.版权3.字体格式*/@font-face {/* 指定字体的名字 */ font-family: "myfont";/* 服务器中字体的路径 */ src: url("");}

图标字体（iconfont）

使用图标时，可以将图标设置为字体，通过 font-face 的形式来使用图标，然后通过使用字体的形式来使用图标

font awesome使用步骤

下载 font awesome（阿里的字体库）解压将 css 和 webfonts 移动到项目中将 all.css 引入到网页中使用图标字体

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

class= "fas fa-bell"

class ="fab fa-accessible-icon"

通过伪元素来设置图标字体

找到要设置图标的元素通过 before 或 after 选中在 content 中设置字体的编码设置字体的样式

-fab:

font-family: 'Font Awesome 5 Brands';

-fas

font-family: 'Font Awesome 5 Free';

font-weight: 900;

通过实体来使用图标字体

&#x图标的编码;

<span class="fas">&#xf0f3</span>

行高（line height）

行高指的是文字占有的实际高度可以通过line-height来设置 行高可以指定一个大小（px em）也可以直接为行高设置一个整数（如果是整数的话，行高将会是字体的指定的倍数） 行高经常还用来设置文字的行间距行间距 = 行高 - 字体大小；

字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度行高会在字体框的上下平均分配

字体的简写属性

font 可以设置字体相关的所有属性；

font: bold italic 50px/2 微软雅黑, ‘Times New Roman', Times, serif;

语法： font：字体大小/行高 字体族；行高 可以省略不写，如果不写视为使用默认值

font-weight自重 字体的加粗

normal默认值 不加粗bold加粗

font-style字体的风格

normal正常的italic斜体

文本的样式

/* 单行省略号 */.box{width: 200px; white-space: nowrap; overflow: hidden;/* 显示不换行省略号 */ text-overflow: ellipsis;}