【前端】CSS基础——字体Font（学习笔记）

W3C标准：
结构：HTML描述页面的结构
表现：CSS控制页面中元素的样式
行为：JavaScript相应用户操作

相关笔记：
HTML基础
CSS基本语法
CSS基础-layout
CSS基础-float
CSS基础——position

字体样式

• color 用来设置字体的颜色

• font-size 字体的大小
  相关单位：
  em 相对于当前元素的一个font-size
  rem 相对于根元素的一个font-size

• font-family 字体族（字体的格式）
  可选值：
  serif 衬线字体
  sans-serif 非衬线字体
  monospace 等宽字体
  可以同时指定多个字体，多个字体间用逗号隔开；
  如果一个字体由多个单词组成，用单引号；
  字体生效时，优先使用第一个，第一个无法使用则使用下一个。
  例：font-family: ‘Courier New’, Courier, monospace;

• font-face 可以将服务器中的字体直接提供给用户使用（少用）
  font-family：指定字体的名字
  src：
  - url服务器中字体的路径（为了避免格式不支持，可以添加多个路径，用逗号隔开）
  - format 指定格式（多此一举），为了避免出错，但一般不会
  问题：
  1、加载速度
  2、版权
  3、字体格式
  例：

@font-face{
      font-family: 'my font';
      src: url(./font/ZCOOLQingKeHuangYou-Regular.ttf) format("truetype");
      }

图标字体

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

font awesome 使用步骤（版权清晰，有免费有付费）
1、下载 http://fontawesome.com/
2、解压
3、将css和webfonts移动到项目中（必须放到同一个文件夹）
4、用link将all.css引入到网页中
5、使用图标字体

• 直接通过类名使用（一般有fas和fab两种，不行再尝试）
  例： class"fas fa-bell"
  class"fab fa-accessible-icon"

<i class="fas fa-bell" style="font-size: 80px; color: red;"></i>

• 通过伪元素设置（加编码）
  1、找到要设置图标的元素用before或after
  2、在content中设置字体的编码
  3、设置字体的样式
  - fab：
  font-family: ‘Font Awesome 5 Brands’;
  - fas：
  font-family: ‘Font Awesome 5 Free’;
  font-weight: 900;
  例：

li::before{
      content: '\f06a';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      color: tomato;
      margin-right: 10px;
      }

• 通过实体使用（加编码）
  格式：&#x图标编码;
  例：

<span class='fas'>&#xf7ba;</span>

阿里字体库iconfont 使用步骤（版权不清晰）
1、登录网站https://www.iconfont.cn/
2、选好加入购物车
3、添加至项目
4、打开项目，下载至本地
5、将文件夹放进来（除了demo.css和demo_index.html）
6、link调用css文件
(图标字体只能是黑白，彩色的只能用图片)

• 直接用 iconfont 里的css文件（加名称）
  例：

<i class="iconfont icon-youhailaji"></i>

• 通过伪元素设置（加编码）
  1、找到要设置图标的元素通过before或after选中
  2、在content中设置字体的编码
  3、设置字体的样式
  例：

p::before{
       content: '\e627';
       font-family: 'iconfont';
       font-size: 100px;
       }

• 通过实体使用（加编码）
  格式：&#x图标编码;
  例：

<i class="iconfont">&#xe622;</i>

（font awesome和iconfont在css里的用法其实是一样的，只是矢量图片获取方法不同）

行高（line height)

可以用来设置行间距和垂直居中

• 行高指的是文字占有的实际高度(默认是1.33)

• 通过line-height来设置行高
  1、直接指定一个大小（px em）
  2、直接设置一个整数（行高将是字体的指定倍数）

• 行高经常还用来设置文字的行间距
  行间距 = 行高 - 字体大小

• 字体框：字体存在的格子，设置font-size实际上就是在设置字体框的大小

• 行高会在字体框上下平均分配，可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。

字体的简写属性

• font 可以设置字体相关的所有属性
  语法：font: 字体大小/行高 字体族
  行高可以省略不写，如果不写使用默认值
  加粗和斜体可以加在前面，如果不写使用默认值
  字体大小的位置是倒数第二个、字体族的位置是倒数第一个（顺序不能变）

• font-weight 字重 字体的加粗
  可选值：
  normal 默认值 不加粗
  bold 加粗
  100-900 九个级别（没什么用）

• font-style 字体的风格
  可选值：
  normal 正常
  italic 斜体

例：font: bold italic 50px/2 微软雅黑;

文本的水平和垂直对齐

• text-align 文本的水平对齐
  可选值：
  left 左对齐
  right 右对齐
  center 居中对齐
  justify 两端对齐

• vertical-align 元素垂直对齐
  可选值：
  baseline 默认值 基线对齐
  top 顶部对齐
  bottom 底部对齐
  middle 居中对齐(与x的中间居中)
  (如果是图片，除了用baseline以外，其他都可以与下边框对齐)

其他文本样式

• text-decoration 设置文本修饰
  可选值：
  none 什么都没有
  underline 下划线
  line-through 删除线（在文字中间）
  overline 上划线
  （可以设置线的颜色和样式，但ie不能显示）
  例： text-decoration: underline red dotted;

• width-space 设置网页如何处理空白
  可选值：
  normal 正常（默认值）
  nowrap 不换行
  pre 保留空白（保留在这里的空格）
  例：（一行文字显示不完有省略号，四个缺一不可）
  .box2{
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

学习视频、笔记参考：https://www.bilibili.com/video/BV1XJ411X7Ud