P8-图标字体-font-awesome-伪类-阿里图标字体icnfont-字体-行高-文本样式

图标字体

font-awesome图标字体

新版本的话需要将css文件夹和webfonts文件夹放在一个文件夹中，此例中将两者放在fa文件夹中。
图标字体关于新版本和旧版本的区别：

新：
<i class="fas fa-id-badge" title="xxx" style="font-size: 100px"></i>
参数1：class 表示类；参数2：title 表示图标的名字；参数3：style 表示图标的大小
旧：
<i class="fa fa-id-badge s1" title="xxx" style="font-size: 100px"></i>

两者的区别主要在图标字体的名字上，两个相同的图标，新版采用fas fa-id-badge的形式，旧版采用fa fa-id-badge s1

通过伪类来使用图标字体

通过::before伪类来使用图标字体。

<style>
	.类名::before{
		content:'';
		}
</style>

属性介绍

属性名	说明
content	内容从font-awesome文件中找，每个图标后的字母，且必须有反斜杠，否则会直接显示字母
font-family	字体必须和css文档中的字体一样

案例场景：实现在每一句古诗前面加一个图标。

阿里图标字体icofont

对于网页设计者来说，通常不下载使用。
使用iconfont图库的方式介绍如下：
登录网站iconfont

图标的使用

• 通过图标下面的代码（实体）进行调用。实体代码 = 

<span class="iconfont" style="font-size: 100px">&#xe603;</span>

注意： class必须是iconfont

• 通过font class类来进行调用。

<span class="iconfont icon-youhailaji" style="font-size:100px"></span>

• 通过伪类进行调用。content写图标的编码（&#xe603）x后面的部分需要在斜杠\，font-family写iconfont。

    <style>
        p::before{
            content: '\e603';
            font-family: iconfont;
            font-size: 100px;
        }
    </style>

字体

基本属性

• 设置字体颜色 color：red；
• 设置字体的大小 font-size：100px；
• 设置字体族 font-family: 华文彩云,微软雅黑;
  可以设置多个字体，多个字体有优先级，前面的优先级高于后面的。

字体单位

• em
  CSS中的一个单位，1em=1 font-size（字体大小）

<style>
	.p1{
		width: 1em;
 		height: 1em;
 		表示元素的宽高是一个字体大小
	}
</style>

• rem
  css中的一个单位，1rem=HTML的1 font-size（html默认的字体大小是16px）

<style>
	.p1{
		width: 1rem;
 		height: 1rem;
 		表示元素的宽高都是16px
	}
</style>

行间距

浏览器显示两行之间的距离应该是10px，因为默认字体在行高中是居中的，则一行中文字上是5px，下是5px，所以两行之间是（5+5px）
行间距 = 行高 - 字体

设置字体样式font

具体说明	字重	字体样式	字体变形	字体大小	字体类型
属性名	font-weight	font-style	font-variant	font-size	font-family
可选值	100-900之间的数 值越大字体越粗 注意：200比一定比100粗，也可能和100一样 字体是否加粗，一般情况下通过bold设置，有参数bold则说明加粗，没有则说明不加粗。	normal正常 italic斜体	samll-caps小型大写字母	某某px	'微软雅黑’等

font简写设置
font 字体简写属性，可以同时设置字体相关的所有样式。

 <style>
 	.p1{
 		font: bold italic small-caps 40px '微软雅黑';
 		}
 </style>

后面的两个必须是字体大小和字体族，并且必须写；
而前面的三个，写不写无所谓并且顺序也无所谓。
font的简写格式： font:[加粗 斜体 变形] 大小/行高 字体族;

行高line-height

通过line-height来设置行高

要点

• 文本在网页中显示时，CSS会为每一个文本行都设置一个文本框，以容纳这些文字
• 行高可以直接设置一个整数，则行高等于字体大小的倍数（默认行高是1.33）
• 在文字框中，文字并不是贴着行的底部排列，它是沿着行框的基线（base-line）排列的。
• 文字基本是在行高中居中的。

文本样式

text-align设置文本的水平对齐方式

参数	说明
left	默认值，靠左对齐
right	靠右对齐
center	居中对齐
justify	两边对齐

vertical-align设置文本的垂直对齐方式

参数	说明
baseline	基线，沿基线对齐
top	和父元素的顶部对齐
bottom	和父元素的底部对齐
super	上标
sub	下标
middle	居中

也可以直接设置数值或者百分数。

text-decoration设置文本修饰

参数	说明
underline	下划线
line-through	删除线
overline	上划线
none	没有线

可以类似这样指定text-decoration：位置 类型 颜色；（三者可以换位置书写）位置表示的就是text-decoration的参数。

text-indent首行缩进

text-indent: 2em ；
设置首行缩进两个字符，em表示字的大小，是当前元素的字体大小

white-space处理空白内容

参数	说明
normal	默认值，自动换行
nowarp	不换行
pre	保留文本格式

text-overflow 处理溢出的文本

ellipsis 使用省略号来表示溢出的内容
实现溢出内容不显示，显示省略号效果

<style>
	.px{
		 white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         }
</style>

letter-spacing 字母间的距离

word-spacing 单词间的距离

案例

图片img在div中，图片和边框之间会出现一个缝隙，默认情况下图片的对齐方式是和文字的基线对齐的，文字的基线一般在边框的底部上面一点的位置。

解决方式：

• font-size: 0;
  (副作用是当和图片同处于一个框中有文字出现时，则可能会不显示)
• 通过给图片设置vertical-align: bottom;垂直对齐方式