CSS-常用字体属性_css bold-CSDN博客

本文链接：https://blog.csdn.net/qq_53002037/article/details/130840765

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01字体大小</title>
    <style>
        /* 继承性可以让所有元素调成统一
        body {
            
        } */
        
        .rbk1 {
            font-size: 40px;
        }
        
        .rbk2 {
            font-size: 30px;
        }
        
        .rbk3 {
            font-size: 20px;
        }
        /* 浏览器能够接受最小的字体是12px */
        
        .rbk4 {
            font-size: 3px;
        }
    </style>
</head>

<body>
    <div class="rbk1">一杯热白开1.</div>
    <div class="rbk2">一杯热白开2.</div>
    <div class="rbk3">一杯热白开3.</div>
    <div class="rbk4">一杯热白开4.</div>
</body>

</html>

注意的是：
在这里插入图片描述

字体族：

font-Family
衬线字体：有棱有角的
非衬线字体：与衬线字体相反
可设置多个字体，按照从左往右的顺序逐个查找，找到就用，没有找到就使用后面的，通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）
推荐写字体英文名字，可自行查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02字体族</title>
    <style>
        .rbk1 {
            font-size: 40px;
            font-family: "Microsoft YaHei";
        }
        
        .rbk2 {
            font-size: 40px;
            font-family: "星夜温柔奶酪体";
        }
        
        .rbk3 {
            font-size: 40px;
            font-family: "楷体";
        }
        
        .rbk4 {
            font-size: 40px;
            font-family: "HanziPen", "STCaiyun","STHupo","Microsoft YaHei",sans-serif;
        }
    </style>
</head>

<body>
    <div class="rbk1">一杯热白开1.</div>
    <div class="rbk2">一杯热白开2.</div>
    <div class="rbk3">一杯热白开3.</div>
    <div class="rbk4">一杯热白开4.</div>
</body>

</html>

字体风格：

font-style
normally：正常（默认值）
italic：斜体（使用字体自带的斜体效果）更推荐
oblique：斜体（强制倾斜产生的斜体效果）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03字体风格</title>
    <style>
        /* 默认值是normally */
        
        .rbk1 {
            font-size: 40px;
            font-style: normally;
        }
        /* 斜体 */
        
        .rbk2 {
            font-size: 40px;
            font-style: italic;
        }
        /* 斜体 */
        
        .rbk3 {
            font-size: 40px;
            font-style: oblique;
        }
        
        em {
            font-size: 40px;
            font-style: normally;
        }
    </style>
</head>

<body>
    <div class="rbk1">一杯热白开1.</div>
    <div class="rbk2">一杯热白开2.</div>
    <div class="rbk3">一杯热白开3.</div>
    <!-- em直接是倾斜标签 -->
    <em>一杯热白开4.</em>
</body>

</html>

字体粗细：

font-weight
1.lighter：细
2.normally：正常
3. bold：粗
4. bolder：很粗（多数字体不支持）
5. 在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>04字体粗细</title>
    <style>
        div {
            font-size: 40px;
        }
        
        .rbk1 {
            font-weight: lighter;
        }
        
        .rbk2 {
            font-weight: normal;
        }
        
        .rbk3 {
            font-weight: bold;
        }
        
        .rbk4 {
            font-weight: bolder;
        }
        /* 数值在100-1000改变，主要看字体设置的粗细有几种 */
        
        .rbk5 {
            font: weight 400;
        }
    </style>
</head>

<body>
    <div class="rbk1">一杯热白开1.</div>
    <div class="rbk2">一杯热白开2.</div>
    <div class="rbk3">一杯热白开3.</div>
    <div class="rbk4">一杯热白开4.</div>
    <div class="rbk5">一杯热白开5.</div>
</body>

</html>

字体复合：

属性名：font 合并成一个属性
1.字体大小、字体族必须都写上
2.字体族必须是最后一位，字体大小必须是倒数第二位
3.各个属性间用空格隔开
只想设置某个属性的时候可以不使用字体复合，单独使用font-size等即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05字体复合属性</title>
    <style>
        .rbk {
            font: bold italic 100px "STHupo", "Microsoft YaHei", sans-serif;
        }
    </style>
</head>

<body>
    <div class="rbk">一杯热白开.</div>
</body>

</html>