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

文章目录

图标字体font-awesome图标字体通过伪类来使用图标字体阿里图标字体icofont字体基本属性字体单位行间距设置字体样式font行高line-height文本样式text-align设置文本的水平对齐方式vertical-align设置文本的垂直对齐方式text-decoration设置文本修饰text-indent首行缩进white-space处理空白内容text-overflow 处理溢出的文本letter-spacing 字母间的距离word-spacing 单词间的距离案例

图标字体

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>

属性介绍

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

阿里图标字体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简写设置

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

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

后面的两个必须是字体大小和字体族，并且必须写；

而前面的三个，写不写无所谓并且顺序也无所谓。

font的简写格式：font:[加粗 斜体 变形] 大小/行高 字体族;

行高line-height

通过line-height来设置行高

要点

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

文本样式

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

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

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

text-decoration设置文本修饰

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

text-indent首行缩进

text-indent: 2em ；

设置首行缩进两个字符，em表示字的大小，是当前元素的字体大小

white-space处理空白内容

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;垂直对齐方式