【CSS系列】第四章 · CSS字体属性

news2024/12/24 2:45:38

写在前面

Hello大家好，我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

写在前面

1. CSS字体属性

1.1 字体大小

1.2 字体族

1.3 字体风格

1.4 字体粗细

1.5 字体复合写法

结语

【往期回顾】

【CSS系列】第一章 · CSS基础

【CSS系列】第二章 · CSS选择器

【CSS系列】第三章 · CSS三大特性和颜色的表示

【其他系列】

【HTML系列】

【Java基础系列】（已更新完）

1. CSS字体属性

1.1 字体大小

属性名： font-size
作用：控制字体的大小。

语法：
div {
    font-size: 40px;
}
注意点：

Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。
不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

代码演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_字体大小</title>
    <style>
        .xiaobai1 {
            font-size: 40px;
        }
        .xiaobai2 {
            font-size: 30px;
        }
        .xiaobai3 {
            font-size: 20px;
        }
        .xiaobai4 {
            font-size: 12px;
        }
        .xiaobai5 {
            font-size: 3px;
        }
        .xiaobai7 {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <div class="xiaobai4">麟-小白4</div>
    <div class="xiaobai5">麟-小白5</div>
    <div>麟-小白6</div>
    <div class="xiaobai7">麟-小白7</div>
</body>
</html>
1.2 字体族

属性名： font-family
作用：控制字体类型。

语法：
div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif
}
注意：

使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
如果字体名包含空格，必须使用引号包裹起来。
可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。
windows 系统中，默认的字体就是微软雅黑。

代码演示：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>02_字体族</title>
    <style>
        .xiaobai1 {
            font-size: 100px;
            font-family: "微软雅黑";
        }

        .xiaobai2 {
            font-size: 100px;
            font-family: "楷体";
        }

        .xiaobai3 {
            font-size: 100px;
            font-family: "宋体";
        }

        .xiaobai4 {
            font-size: 100px;
            font-family: "华文彩云";
        }

        .xiaobai5 {
            font-size: 100px;
            font-family: "翩翩体-简", "华文彩云", "华文琥珀", "微软雅黑";
        }

        .xiaobai6 {
            font-size: 100px;
            font-family: "HanziPen SC", "STCaiyun", "STHupo", "Microsoft YaHei", "sans-serif";
        }
    </style>
</head>

<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <div class="xiaobai4">麟-小白4</div>
    <div class="xiaobai5">麟-小白5</div>
    <div class="xiaobai6">麟-小白6</div>
</body>

</html>
1.3 字体风格

属性名： font-style
作用：控制字体是否为斜体。

常用值：

normal ：正常（默认值）
italic ：斜体（使用字体自带的斜体效果）
oblique ：斜体（强制倾斜产生的斜体效果）
实现斜体时，更推荐使用 italic 。

语法：
div {
    font-style: italic;
}
代码演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_字体风格</title>
    <style>
        .xiaobai1 {
            font-size: 100px;
            font-style: normal;
        }
        .xiaobai2 {
            font-size: 100px;
            font-style: italic;
        }
        .xiaobai3 {
            font-size: 100px;
            font-style: oblique;
        }
        em {
            font-size: 100px;
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <em>麟-小白4</em>
</body>
</html>
1.4 字体粗细

属性名： font-weight
作用：控制字体的粗细。

常用值：

关键词
lighter ：细
normal ：正常
bold ：粗
bolder ：很粗（多数字体不支持）
数值：
100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。
100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于bold 。

语法：
div {
    font-weight: bold;
}
div {
    font-weight: 600;
}
代码演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_字体粗细</title>
    <style>
        div {
            font-size: 100px;
        }
        .xiaobai1 {
            font-weight: lighter;
        }
        .xiaobai2 {
            font-weight: normal;
        }
        .xiaobai3 {
            font-weight: bold;
        }
        .xiaobai4 {
            font-weight: bolder;
        }
        .xiaobai5 {
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <div class="xiaobai4">麟-小白4</div>
    <div class="xiaobai5">麟-小白5</div>
</body>
</html>
1.5 字体复合写法

属性名： font ，可以把上述字体样式合并成一个属性。
作用：将上述所有字体相关的属性复合在一起编写。

编写规则：

字体大小、字体族必须都写上。
字体族必须是最后一位、字体大小必须是倒数第二位。
各个属性间用空格隔开。
实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性。

代码演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_字体复合属性</title>
    <style>
        .xiaobai {
            font: bold italic 100px "华文琥珀",sans-serif;
        }
    </style>
</head>
<body>
    <div class="xiaobai">麟-小白</div>
</body>
</html>