font-family

用 font-family 这个样式属性可以设置文字使用的字体。在网页文档链接的样式表里，用 body 标签的名字作为样式选择器，一组大括号，里面用 font-family 指定一个字体组合，vscode 会帮我们列出一些常用的字体组合，比如这个 Times New Roman，Times，serif。

意思就是如果系统里有 Times New Roman 就用这种字体，没有就找一个 Times 类型的字体，如果还没有就选择 serif 这种类型的字体。现在页面上显示的中文，应该是一种宋体字。serif 类型的字体是有衬线字体。

再换一种字体组合，Arial, Helvetica, sans-serif， 现在页面上中文像是一种黑体字，因为 sans-serif 是无衬线字体。

color

设置文字的颜色可以使用 color 这个样式属性，它的值是一种颜色，比如 blue。页面上的文字会变成蓝色，说明 body 的子元素继承了来自 body 元素的 color 这个样式。

font-weight

用 font-weight 可以设置文字的粗细程度，它的值可以是用整百表示的数字值，比如 100，300，600，900，注意并不是所有数字值都会起作用，主要是看文字使用的字体是否支持。

这里我们也可以是表示粗细程度的关键词，比如 bold 表示加粗，你会发现页面的段落文本会加粗显示，标题文字没有变化，是因为浏览器默认给标题文字的样式已经是加粗的了。

再把 font-weight 设置成 lighter，表示细体。段落文字现在会用细体字，但是标题文字没有变化。这是因为，在这个标题元素上面也用了 font-weight 样式属性，这个样式会覆盖掉来自它父辈的 font-weight 样式。

line-height

line-height 这个样式属性可以设置元素的行高，就是每行文字占用的高度。添加一个 line-height 样式属性，它的值可以是一个具体的值，也可以是一个倍数。先把它设置成 18px，这个 px 表示像素，是一种长度单位。

现在页面上的文字的行高会是 18 像素。下面我们再试一下行高倍数，把 line-height 设置成 1 ，意思是使用 1 倍的行高，这样这个行高具体的值取决于文字的大小，如果文字是 16 像素，那它的行高就会是 16 像素，如果是 32 像素，行高就是 32 像素。

可以检查一下页面上的标题文字，然后打开计算样式，观察一下元素的 line-height ，显示它的行高是 32 像素，因为这个标题文字的大小是 32 像素。再检查一下这个段落元素，显示行高是 16 像素，因为段落文字的大小是 16 像素。

我们再把这个 line-height 样式属性的值设置成 2，表示 2 倍行高。检查一下段落文字，在计算样式这里显示它的行高的具体的值是 32 像素，因为现在用的是 2 倍的行高，文字的大小如果是 16 像素，它的行高就会是 32 像素。

font-size

要设置文字的大小，用的是 font-size 这个样式属性，把它的值设置成 18 像素。页面上的段落文字比之前大了一些，现在它的大小会是 18 像素。

同时我们再观察一下它的行高，会变成 36 像素，因为我们在样式表设置使用 2 倍的行高，当文字是 18 像素的时候，它的行高就会是 18 × 2 ，也就是 36 像素。

text-align

设置文字的对齐方式可以使用 text-align 这个样式属性，它的值可以是 center，居中对齐，可以是 right ，表示右对齐，也可以是 left ，左对齐。