黑马H5C3笔记——CSS字体属性

目录

1.字体系列

 注意事项

 2.字体大小

注意事项

3.字体粗细 

注意事项

4.字体样式

5.font复合属性写法

注意事项

---

1.字体系列

        CSS使用font-family定义文字的字体系列

<style>
    p {
       /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
       font-family: 'Times New Roman', Times, serif;
    }
</style>

 注意事项

1. 各种字体之间必须用逗号隔开
2. 一般情况下，多个单词组成的字体要加引号
3. 尽量使用默认字体

 2.字体大小

        CSS使用font-size定义文字的字体大小

<style>
    body {
        font-size: 16px;
    }
    /* 标题标签比较特殊,需要单独指定文字大小 */
    h2 {
        font-size: 16px;
    }
</style>

注意事项

1. px（像素）是字体大小最常用的单位
2. 尽量设置一个明确的字体大小，不要使用默认大小，因为不同浏览器的默认字体大小可能不一样
3. 可以个body指定整个页面文字的大小

3.字体粗细 

        CSS使用font-weight属性设置字体粗细

<style>
    .bold {
        /* font-weight: bold; */
        /* 700的后面不要跟单位，等价于 bold 都是加粗的效果 */
        /* 实际开发中,尽量使用数字来表示加粗或者变细 */
        font-weight: 700;
    }

    h2 {
        font-weight: 400;
        /* font-weight: normal;    */
        }
</style>

属性值	描述
normal	默认值
bold	加粗
100-900	400等同于normal，700等同于bold，数字后面不跟单位

注意事项

1. 实际开发中尽量用数字表示粗细

 

4.字体样式

        CSS使用font-style属性设置字体样式

<style>
    p {
        font-style: italic;
    }

    em {
        /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
        font-style: normal;
    }
</style>

5.font复合属性写法

        CSS使用font属性定义字体的系列、大小、粗细和样式

<style>
    /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
    div {
        /* font-style: italic;
        font-weight: 700;
        font-size: 16px;
        font-family: 'Microsoft yahei'; */
        /* 复合属性: 简写的方式  节约代码 */
        /* font: font-style  font-weight  font-size/line-height  font-family; */
        /* font: italic 700 16px 'Microsoft yahei'; */
        font: 20px '黑体';
    }
</style>

注意事项

1. 使用font属性时，必须按照上面的属性顺序书写，不能更换顺序，各个属性值间以空格隔开
2. 不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性不起作用