前面我们介绍了好多关于文字的属性,因为都是描述文字是什么样式的,所以我们也可以把它们写在一起做一条属性,就是 font,这种把许多调属性综合成为一条去写的方法,被称为复合属性或者快捷属性。

先来看一个例子:

p {
  font: italic 2em "Open Sans", sans-serif;
}

那么看内容,我们大概也可以猜到,它等效于下面的写法:

p {
  font-style: italic;
  font-size: 2em;
  font-family: "Open Sans", sans-serif;
}

这样写占的篇幅会比较小,文件体积相应的也能小一些,也算是比较方便阅读吧。当然,如果你想要查找某个特定属性的时候,并不如下面的写法方便。在新手期,我建议大家采用下面的写法,但是要能够读懂上面的写法。

那么这种复合属性,是不是我们只要把涉及到的属性的值写进去就行了呢?那么首先注意,它是使用空格进行分隔。然后这些属性的顺序还是要遵循一定规则的:

  • 除了某些特殊情况,在复合属性 font 中必须同时设置 font-sizefont-family
  • font-stylefont-weight 必须在 font-size 前面;
  • line-height 必须紧跟在 font-size 后面,并且在 line-height 加上 /
  • font-family 必不可少,而且要放在最后;
  • color 不能放在里面。

如果你能认真遵守以上规则,那么你就可以成功的少写几个字符,我们来演示一下:

p {
  font: italic bold 24px/1.2 serif;
}

那么就是这个样子。然后要说的是,关于文字,还有一些其他属性,但是我们在中文中极少用到,所以在这里并没有讲。如果以后看到这个复合属性被写得非常长,里面有些内容自己不认识,也不要太过惊讶。

关于复合属性,文字的复合属性,因为规则略显复杂,所以很多时候我们更愿意选择分开去写。但是后面我们会遇到很多规则比较简单,十分好用的复合属性,甚至于我们都快以为那才是它的本体。

关于文字的基本样式,我们就聊出来了这么多东西,CSS 复杂么?其实不算是复杂,只是细致。想一想,我们在 Word 里面写文档,也都要对这些内容进行设置。现在只不过是换成了用代码去描述。既然是手写代码,就要求你知道,我们应该如何去描述。虽然现在的编辑器可以很智能地进行提示,可你也要知道每一个属性的值代表什么意思。

不过当我们翻山越岭走到现在,回头看一看发现也不过如此。所以呢,我们要读阅读教程,自己动手写一写,用一段时间,再回来看一看教程。某一天就忽然拨云见日,一下子理解了,通透了。

那么关于文字本身的样式,我们就学得差不多了,下一章开始,我们研究一些和文字有关的样式。

【本章助记卡片:卡片 for 第三十七章