1、引入谷歌字体
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。
Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。
因此，下一步，我们将引入和使用Google字体。
引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签之前。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：
font-family: FAMILY_NAME, GENERIC_NAME;.
GENERIC_NAME是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。
2、理解绝对单位与相对单位
像素px是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。
单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，in和mm分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
相对单位长度，就像em和rem，它们会依赖其他长度的值。就好像em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。
注意：
有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。
3、创建一个自定义的 CSS 变量
创建一个 CSS 变量，你只需要在变量名前添加两个破折号，并为其赋值，例子如下：
--penguin-skin: gray;
这样会创建一个--penguin-skin变量并赋值为gray（灰色）。
现在，其他元素可通过该变量来设置为gray（灰色）。
4、使用一个自定义的 CSS 变量
创建变量后，CSS 属性可以通过引用变量名来使用它的值。
background: var(--penguin-skin);
因为引用了--penguin-skin变量的值，使用了这个样式的元素背景颜色会是灰色。
注意：如果变量名不匹配，样式不会生效。
5、给 CSS 变量附加回退值
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，那么你可以这样写：
background: var(--penguin-skin, black);
这样，当你的变量有问题的时候，它会设置你的背景颜色为黑色。
6、层级 CSS 变量
你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。
因为层叠的效果，CSS 变量通常会定义在:root元素里。
就像html是body的容器一样，你也可以认为:root元素是你整个 HTML 文档的容器。
在:root创建的变量，在整个网页里面都能生效。
