三、CSS字体属性本文已参与「新人创作礼」活动，一起开启掘金创作之路。 CSS Fonts（字体）属性用于定义字体系

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、文字样式（如斜体）。

一、字体系列

CSS使用font-family属性定义文本的字体系列。

p { font-family: "微软雅黑":}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body{font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Scans GB';}

在开发中，直接给 body标签指定字体格式，一般标签都是放在body标签中的，则所有的标签都会使用这种字体。

当 font-family: Arial,"Microsoft Yahei", "微软雅黑"; 中存在多种字体时，优先使用第一种字体，如果用户浏览器中没有，则使用第二种，以此类推。若都没有，则使用浏览器中的默认字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        h2 {
            font-family: "微软雅黑";
        }
        p {
            font-family: '仿宋',Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈，</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>精心，坦然，攻克一个又一个，</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是pink老师最终的嘱托。</p>
</body>
</html>

二、字体大小

CSS使用 font-size 属性定义字体大小。

p {
    font-size: 20px;
}

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的大小，不要默认大小
可以给 body 指定整个页面文字的大小

标题标签h比较特殊，需要单独指定大小

三、字体粗细

CSS使用 font-weight 属性设置文字的粗细，可以查阅CSS中文手册

语法：

font-weight : normal | bold | bolder | lighter | number

参数：

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置

bold : 粗体。相当于number为700。也相当于b对象的作用

bolder : IE5+　特粗体

lighter : IE5+　细体

number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold 注意这个数字后面不跟单位

学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

四、文字样式

CSS使用 font-style 属性设置文本的风格

p {
    font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style:normal;
italic	浏览器会显示斜体的字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-style: italic;
        }
        em {
            /* 让倾斜的字体不倾斜 就是赶紧脉动回来 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>同学，上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

五、复合属性写法

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

        body {
            /* 复合属性：简写的方式 */
            font: font-style font-weight font-size/line-height font-family;
        }

例如：

        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 '黑体';

六、字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px像素，一定要带上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold ，不加粗是 normal 或者 400，记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体属性连写	1.字体连写是有顺序的，不能随意换位置2.其中字号和字体必须同时出现

字体复合属性如何写？里面有什么注意细节？

如何让加粗的文字不加粗显示，如何让倾斜的文字不倾斜显示？