字体
Color是前景色，除了文字还包括边框
em
- 跟字体大小有关，1em等于当前元素的字体大小，会根据当前文字大小去改变，也就是1个font-size，没设置的时候也会继承字体大小，em会用于和字体相关的样式，简单来说1em就等于一个字的大小
- image.png
rem
- rem跟em类似，r表示root
- 1rem等于根元素的一个font-size，参照物是HTML根元素
- font-size，用来指定字体大小
- font-family用来指定使用的字体
字体分类
以下几种并不是一个具体的字体，而是一类字体
-
Serif
-
衬陷字体，表示不好好写字
image.png
-
-
sans-serif
-
非衬陷字体，横平竖直的
image.png
-
-
Monospace
- 等宽字体，每个字都是等宽的
当我们使用字体分类，浏览器会自动选择具体字体使用，不同的浏览器可能不一样
如果我们设置的字体用户字体库里没有，浏览器会使用默认字体，所以使用字体时通常不使用奇怪的字体，因为用户电脑里不一定有，最常用的就是微软雅黑
用英文字体名安全些，font-family：’’microsoft yahei’’，如果使用的字体名中间有空格时，可以使用引号
font-family，用来指定字体族,该样式可以同时制定多个字体
这是系统提示的字体，系统会按照顺序使用，支持哪个用哪个
- image.png
-
一般最后一个字体都是sans-serif或serif
image.png
font简写属性
可以设置所有字体相关样式
- 书写语法
字体族必须是最后一个属性
字体大小必须是倒数第二个
这两个属性必须写
其他属性写不写，顺序都无所谓
语法
font：50px 'Microsoft yahei'， arial，helvetica，sans-serif;font：字体大小 字体族
这个属性一般都是设置在body元素上，好处就是所有的元素都继承这个样式
行高
- 文字在显示时是存在行框的
- 这个行框看不见，但是却真实存在
- image.png
- 这个行框看不见，但是却真实存在
- 这是一个行高
image.png
文字默认会在行高当中垂直居中
image.png
如果希望一段文字在父元素中垂直居中，可以将行高设置为和父元素高度一样的值（height=line-height）
这种居中只适用于单行文字
行高也可以设置为一个整数，表示行高是字体大小的倍数
行间距=行高-字体大小
font 字体的简写属性
- 语法：字体大小/行高 字体族；
image.png
font-weight设置字体加粗效果- normal默认值
- bold加粗 100-900九个值指定文字粗细的级别
- 不同字体粗细实际上是由计算机中不同字体决定的，但是通常计算机中不会安装这么多不同粗细的字体，所以100-900并不是所有的值都会发生变化，值大不一定粗
font-style设置字体斜体
- font-sty1e设置字体的斜体
normal默认值正常显示
italic 表示斜体
font简写属性,可以同时设置所有的字体相关的样式
书写语法:
1、字体族必须是最后一个属性
2.字体大小必须是倒数第二个
3、这两个属性必须写
4、其他属性写不写,顺序都无所谓
字体大小和字体族有要求，其他的都没有要求
一个字体是否可用，主要看用户的计算机中是否安装了该字体，有一些特殊情况，在网页中使用一些特殊字体，而这些字体用户并没有安装，此时我们可以在服务器用户提供字体，用户浏览器会自动根据需要从服务器中下载使用，如果用户没有，需要通过font-face 来设置服务器的字体
通过@font-face可以使用户使用服务器的字体
font-family为字体定义一个名字
字体路径
让这两者关联
先让字体名和服务器关联，然后box1想用什么字体就用什么字体
虽然可用通过font-face来使用特殊字体，但在开发中要尽量避免使用
- font-face字体在服务器，用户使用需要先从服务器下载会影响用户的体验
- 大部分的字体都有版权问题，如果随意的使用一些字体会涉及到侵权
每一个字体本质上是一个图（矢量图）- 矢量图的大小和颜色可以任意改变，不会失真
网页中很多这样的小图标
字体本身存在有很多优点，可以随意放大，可以任意改变颜色
- 如果可以将网页中的小图标都制作为一个字体文件，这样我们就可以以使用字体的方式去创建这些小图标了
- 这种技术我们成为图标字体（iconfont）
图标字体一般是由设计人员做，也可以直接使用网上的一些图标字体库（是字体就有版权，有版权的别用）
图标字体库fontawesome使用方法
1.下载图标字体库
2.解压
3.在项目目录下创建一个文件夹
4.将解压后的css和webfonts复制到iconfont目录中
5.在当前页面中引入all.css
6.在页面中创建一个元素，并添加两个class
，分别是fas和fa-frog
图标用法
什么叫库
库里面都是人家写好的代码，拿过来就可以直接使用过了
webfont就是一个个的字体
all.css在开发的时候用
all.min.css在生产环境中使用
两者效果是一样的
[图片上传中...(image.png-dd0363-1585635951124-0)]
这就是fa涉及的样式
fas就是在应用上设置这个字体
fa-frog指定具体要用哪个图标
免费的字体格式有两种
fas（solid）实体的图形
fab（brand）品牌相关的图形
前面不是fas就是fab，后面根据需要写
使用方式：
1.通过class来使用（这种常用）
2.直接写编码，直接通过实体来表示，&#x编码；
3.可以通过伪元素去使用图标字体
（content:"\编码"）
这些都是十六进制的编码
\用来转义特殊字符
不同字体设置不同格式
这样也能出来
也可以直接参考里面提供的demoHTML文件
这种是伪类的写法
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
这两个应该是处理浏览器兼容问题的
创建苏宁左右翻页箭头
在head里面引入图标字体库
设置翻页箭头样式，宽高，颜色，开启绝对定位
两个都设置垂直居中
top，bottom，margin：auto 0
单独设置一个右箭头
right：0
设置透明颜色
箭头设白色
水平垂直方向居中
设置hover改变背景颜色和字体颜色
两个箭头默认是不显示的
display：none
移入的时候要出来
outer绑定一个hover
图标字体（iconfont）
- 就是让我们可用使用字体的形式去使用小图标
- 优点：
1.使用方便
2.图片可用任意放大缩小改变颜色 - 缺点：
图标字体只能单色的
text-indent 首航缩进
一个字16，两个就32像素
缩进两个也可以这样写
它可以是正值可以是负值
如果是负值就往反方向缩进
可以通过text-indent ：-9999px；来隐藏文字
这种方式经常用到希望被搜索引擎看到不希望被用户看到的文字
一般logo用h1标签
这里只有图标没有字
会放个字，希望搜索引擎能抓到这个东西
text-decoration，文本修饰
可选值：
- none啥都没有
- underline下划线
- line-through删除线
- overline 上划线
text-align:文本水平对齐
可选值
- left 左对齐
- right 右对齐
- center 居中对齐 （两端都不齐）
- justify 两端对齐 （把中间的间距调大了）
