Web前端HTML5+CSS3知识点（10)css入门---字体

1. 字体族

1.字体相关的样式
color:设置字体的颜色
font-size：字体的大小，em（相当于当前元素的font-size），rem（相当于根元素的font-size）
font-family：指定字体族的、字体格式，可选值：serif（衬线字体）--带小勾小边、sans-serif（非衬线字体）、monospace（等宽字体）--每个字母宽度一直的。
指定字体的类别，浏览器会自动使用该类别下的字体。
font-family可以同时指定多个字体，多个字体间使用逗号隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个，依次类推，最后一个兜底。
@font-face可以直接将服务器中的字体提供给用户使用，里面包含两个值font-family（指定下载字体的名字）和src（服务器中字体的路径）。
使用font-face要注意两个问题：1.用户加载速度问题、影响服务器性能 2.版权问题，有些字体需要付费才能使用。

2 图标字体简介

icon-font
        在网页中经常需要使用一些图标，我们可以通过图片来引入图标，但是图片大小本身会比较大，并且非常的不灵活。
        所以在使用图标时，我们还可以将图标直接设置为字体，通过font-face的形式，来将字体进行引入，这样我们就可以通过字体的形式使用图标。
fontawesome 使用步骤：

• 下载 https://fontawesome.com/
• 解压
• 将css和webfonts移动到项目中
• 将all.css引入到网页中
• 使用图标字体：直接通过类名来使用图标字体，class=“fas fa-bell”， class=“fab fa-accessible-icon”。

3 图标字体的其他使用方式

通过伪元素设置图标字体
        找到要设置图标的元素通过before或after选中
在content中设置字体的编码
设置字体的样式
        fab： font-family: ‘Font Awesome 5 Brands’;
        fas: font-family: ‘Font Awesome 5 Free’; font-weight: 900;
2.国内的话建议使用阿里字体库，但须注意版权问题。

• 加购物车。
• 加入项目。
• 图标管理-项目管理-下载
• 引入iconfont.css
• 使用（4种）
  class=iconfont 指定码
  指定class方式
  通过伪元素
  在线使用。

3 行高

定义
         行高（line height）指的是文字占有的实际高度，如我们写在格子里写汉字（font-size实际的字体大小）
        可以通过line-height来设置行高，行高可以指定一个大小（px、em），也可以直接为行高设置一个整数。如果是一个整数的话，那行高将会是字体指定的倍数，默认的行高是根据浏览器和字体来的。
字体框：就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。行高会在字体框的上下平均分配。可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直。行高还经常用来设置文字的行间距。

4 字体的简写属性

font
font可以设置字体相关的所有属性
语法：font ： 字体大小 /行高 字体族 其中行高可以省略不写（是有一个默认值），如果不写会使用默认值
font-weight：

字重，字体的加粗效果 可选值：bold(加粗）、normal（一般体）、100-900（加粗的级别，一般电脑中不会设置这么多级别，所以没什么用处）
font-style：

字体的风格，可选值：normal（正常值）、italic（斜体）

5 文本的水平和垂直对齐

文本的水平对齐
         text-align，可选值：left(左侧对齐）、right(靠右对齐）、center（居中对齐）、justify（两端对齐）
文本的垂直对齐
        vertical-align：可选值：baseline(默认值) top（顶部边框对齐）middle（把子元素中线和x中线对齐），也可以直接指定对齐像素。
img的对齐
        当图片基于vertical-baseline对齐的时候，会出现底下有点小空隙，这种情况下可以把baseline改成其他的值，比如：top botttom都可以。

6 其他的文样式

text-docoration
        可选值：none（默认值）、underline（下划线）、line-through（删除线）、overline（上划线），比如去除超链接下划线。
white-space
        设置网页如何处理空白
        可选值：normal（正常），nowrap（不换行）、pre（保留空白）

配合：over-flow:hidden .txt-over-flow:ellisis (设置省略）
将一大串文字设置成一部分文字+省略号
        width:200px
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; //文字溢出部分变成省略号