CSS——字体

今天我来分享下网页中的另一大主角——字体，在CSS中是如何被定义的。

字体概述

在CSS中用于文本的属性通常可以分为两类

1. 字体样式：作用于字体的属性，直接应用于文本，也就是字体粗细及样式
2. 文本布局：作用于文本布局的属性，例如文本之间的间距与文本对齐方式。

字体种类

如果想在文本设置不同的字体，那么可以通过font-family属性，这个属性可以可以为我指定的元素设置一个字体。如果指定的字体不可用，那么浏览器会使用默认字体代替。

默认字体

例如：

p {
   
  font-family: arial;
}
p1 {
   
  font-family: cursive;
}
p2 {
   
  font-family: serif;
}

<p>cat</p>
<p1>cat</p1>
<p2>cat</p2>

字体大小

字体大小通过font-size属性来设置

1. px(像素)：将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的
2. em：1em 等于我们设计的当前元素的父元素上设置的字体大小
3. rem：这个单位的效果和 em 差不多，除了 1rem 等于 HTML 中的根元素的字体大小（不支持IE8及以下版本）

例如：

p {
   
  font-size: 10px;
}
p1 {
   
  font-size: 2.6em;
}
p2 {
   
  font-size: 2.6rem;
}

<p>cat</p>
<p1>cat</p1>
<p2>cat</p2>

字体样式，粗细，转换，装饰 样式

font-style属性用来设置文本的样式

1. normal：将文本设置为普通字体
2. italic：将文本设置为斜体
3. oblique：将文本设置为斜体字体的模拟版本

例如：

p {
   
  font-size: 30px;
  font-style : normal
}
p1