CSS 字体属性

CSS 字体属性

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

一、font-family的定义和用法

font-family 规定元素的字体系列

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值

有两种类型的字体系列名称：

指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。

通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”

😊提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择

👀注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路

二、font-size 属性设置文本的大小

font-size 值可以是绝对或相对大小

绝对尺寸：
将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：
设置相对于周围元素的大小
允许用户在浏览器中更改文本大小
注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）

三、 font-style 属性主要用于指定斜体文本

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

四、font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小

五、font-weight： 定义字体的粗细

属性值	解释
normal	默认值。定义标准的字符。400
bold	定义粗体字符。700
bolder	定义更粗的字符。
lighter	定义更细的字符。
100-900	注意这个数字后面不跟单位
inherit	规定应该从父元素继承字体的粗细。

六、字体属性可以把以上文字样式综合来写，这样可以更节约代码：

        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: '微软雅黑'; */
            /* 复合属性：简写的方式 */
            font:italic 700 16px/20px '微软雅黑';
        }

使用 font 属性时，必须按照上面的语法格式顺序书写，不能更换顺序，并且各个属性以空格隔开

不需要设置的属性可以省略（取默认值），但是必须保留 font-size 和font-family 属性，否则 font 属性将不起作用，如：font:20px ‘黑体’;