CSS设计指南笔记：字体篇_字体根据body宽度-CSDN博客

本文链接：https://blog.csdn.net/weixin_39987434/article/details/88234507

以下是与字体样式相关的6 个属性：

 font-family
 font-size
 font-style
 font-weight
 font-variant
 font（简写属性）

font-family 用于设定元素中的文本使用什么字体。

用字体栈指定本地字体

在指定文本的字体时，需要多列出几种后备字体，以防第一种字体无效。这个字体的列表也叫字体栈。，给font-family 字体栈的最后一项指定一个通用字体类非常重要，通用字体类有以下5种：

 serif，也就是衬线字体，在每个字符笔画的末端会有一些装饰线；

 sans-serif，也就是无衬线字体，字符笔画的末端没有装饰线；
 monospace，也就是等宽字体，顾名思义，就是每个字符的宽度相等（也称代码体）；
 cursive，也就是草书体或手写体（在本章后面排版The Hound of the Baskervilles，
 fantasy，不能归入其他类别的字体（一般都是奇形怪状的字体）。

font-size

1.绝对字体大小

修改body 元素的字体大小，不会影响页面中以绝对单位控制的元素，但没有设定字体大小的元素则会与body 的字体大小成比例变化。设定绝对字体大小时，也可以使用关键字值，比如x-small、medium、x-large，等等。其中，medium 等于基准大小。

2.相对字体大小

使用百分比、em 或rem（根元素的字体大小）设定字体大小要复杂一些。如果你给某个元素设定了相对字体大小，则该元素的字体大小要相对于最近的“被设定过字体大小的”祖先元素来确定。

<body>
<p>This is <strong>very important!</strong></p>
</body>
和下面的CSS
p {font-size:.75em;}
strong {font-size:.75em;}

tips:
如果你想使用em，但又需要设定具体的像素大小，可以把body 的font-size 设定为62.5%。这样，就等于把基准大小从16 像素改为10 像素（16×62.5%=10）。然后，em 与像素的对应关系就十分明确了，比如1em 等于10 像素，1.5em 等于15 像素，2em 等于20 像素，等等。

p 元素的文本为12 像素（body 的16 像素基准大小×.75＝12），折合成点单位是9 点。strong 是p 的子元素，它的文本是多大呢？相对大小会逐层复合，strong 的大小应该是16 像素×.75×.75＝9 像素。