CSS个人学习笔记（day 2）_font属性值的书写顺序为,____,____,____,____,____。(1)

本文链接：https://blog.csdn.net/2401_84976733/article/details/138895774

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

谷歌浏览器默认文字大小是16px
单位需要设置，否则没效果

3.1.2 字体样式- 字体粗细

属性名：font-weight

取值：

1. 关键字：

正常 normal

加粗 bold

**2. 纯数字：**100-900的整百数

正常 400

加粗 700

<title>Document</title>
    <style>
        /* 加粗 */
        div {
            font-weight: 700;
        }

        /* 变细 */
        h1 {
            font-weight: 400;
        }
    </style>
</head>

<body>
    <div>这是div</div>
    <h1>一段标题</h1>
</body>

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多

3.1.3 字体样式- 字体倾斜

属性名：font-style

取值：

1. 正常(默认值)：normal

2. 倾斜：italic

<title>Document</title>
    <style>
        div {
            /* 倾斜效果 */
            font-style: italic;
        }

        em {
            /* 正常的，不倾斜 */
            font-style: normal;
        }
    </style>
</head>

<body>
    <div>div文字</div>
    <em>em</em>
</body>

3.1.4 字体样式- 字体系列

属性名： font-family

**常见取值：**具体字体1、具体字体2…字体系列

1. 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…

2. 字体系列：sans-self、serif、monospace等…

**渲染规则：**1. 从左往右按顺序查找，如果电脑中未安装字体，则显示下一个字体

2. 如果都不支持，此时会根据操作系统,显示最后字体系列的默认字体

   系统       默认字体
 windows     微软雅黑
  macOS        苹方

注意点：

如果字体名称中存在多个单词,推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时,尽量使用系统常见自带字体,保证不同用户浏览器网页都可以正确显示

3.1.5 字体样式- 常见字体系列（了解）

无衬线字体 (sans-serif)

**1. 特点：**文字笔画粗细均匀,并且首尾无装饰

**2. 场景：**网页中大多采用无衬线字体

**3. 常见该系列字体：**黑体、Arial

衬线字体 (serif)

**1. 特点：**文字笔画粗细不均，并且首尾有笔锋装饰

2. 场景： 报刊书籍中应用广泛

**3. 常见该系列字体：**宋体、Times New Roman

等宽实体 (monospace)

1. 特点： 每个字母或文字的宽度相等

**2. 场景：**一般用于程序代码缩写，有利于代码的阅读和缩写

3. 常见系列字体： Consolas、fira code

3.1.6 字体样式- 层叠性

**样式层叠性：**如果给同一个标签设置了相同的属性，此时样式层叠(覆盖)，写在最下面的会生效

**CSS层叠样式表：**所谓的层叠及叠加的意思，表示样式可以一层一层的层叠覆盖

<title>Document</title>


![img](https://img-blog.csdnimg.cn/img_convert/3121a4c1e0a9ec2d7bf5c57e7610bc04.png)
![img](https://img-blog.csdnimg.cn/img_convert/240fb105fcf3800341238776a7362f73.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**


**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**