CSS字体

字体族

1.部分属性

• color：设置字体颜色
• font-size：设置字体大小
• font-family：设置字体族（字体的格式）

例如：font-family:"华文彩云"

font-family可选值：

1. serif：衬线字体
2. sans-serif：非衬线字体
3. monospace：等宽字体

以上可选值指定字体的类别，浏览器会自动使用该类别下的字体。字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

例如：

font-family：'Courier New','Courier',monospace;

如果Courier New没有则使用Courier，Courier没有则使用monospace

• font-face属性

font-face可以将服务器中的字体直接提供给用户使用

例如：

@font-face{

font-family: 'myfont';/*指定字体的名字（起名，与下面的font-family不同）*/
src: url('../example/1.ttf');/*指定路径*/
}

font-face两个问题

1.加载速度慢
2.版权问题

图标字体

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

fontawesome使用方式

1. 将CSS和webfonts移动到项目中
2. 将all.css引入到网页中

引入格式

<link rel="stylesheet" href="../fontawesome/css/all.css">

3. 使用图标字体

直接通过类名来使用图标字体，有些是fas，有些是fab。并且图标可以改变大小、颜色等样式。

使用方法如下;

行高

行高指的是文字占有的实际高度

用法：通过line-height来设置行高，行高可以直接指定一个大小，也可以直接为行高设置一个整数，如果是一个整数的话，行高将是字体的指定倍数，默认行高是1.33倍

例如：

行高的特点：

• 行高会在字体框的上下平均分配
• 行高经常用来设置文字的行间距
• 行间距=行高-字体大小
  
  

字体的简写属性

font可以设置字体相关的所有属性

语法
font：字体风格 字体粗细 字体大小/行高 字体族

注意：行高可以省略不写 ，如果不写，则使用默认值；字体风格与字体粗细也可以不写，也可以互换位置。
例如：

font: 50px 'Courier New', Courier, monospace;
font: 50px/2 'Courier New', Courier, monospace;
font: bold italic 50px/2 'Courier New', Courier, monospace;

bold表示加粗，italic表示斜体，其中bold和italic顺序可以互换
也可以单独设置

 font-weight:bold;
 font-style:italic;