开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情
文章概览
- 元素的层级
- 字体族
- 图标字体
元素的层级
如果要设置元素的层级，首先是要开启定位元素，可以通过z-index属性来进行层级设置，z-index需要一个整数作为参数，值越大元素的层级越高，从而优先显示。但也有一种情况，当两个元素的层级相同时，就优先显示靠下的元素；另外，祖先元素无论层级有多高，都不会覆盖后代元素。
字体族
有时候需要设置字体的样式，传统方法是使用font-face来将服务器中的字体直接提供给用户使用。
样式
- color：设置字体颜色。
- font-size：设置字体大小，其中单位em是当前元素的一个font-size，rem是根元素的一个font-size。
- font-family字体的格式，可以通过serif（衬线字体）、sans-serif（非衬线字体）、monospace（等宽字体）来设置字体。font-family也可以同时设置多个字体，如果前面的字体不能生效就会顺位使用下一个字体。
图标字体
除了上述的字体外，网页还有一种常见字体，即图标字体，这些图标是可以依靠引入图片来达到显示图标的效果的，但是这种方法有一个非常明显的缺点，即受到图片大小的影响会使引入图标效率低下。因此可以考虑另一种更为简便的方式，即将图标设置为字体，然后通过font-face的形式来引入，从而让网页像显示字体一样显示图标。
这需要用到一个工具fontawesome，首先需要到官方网站下载，解压后将其css、webfont文件移动到项目目录下，然后就可以使用类名来引用图标字体了。
