CSS字体

XiaoSaurus77

于 2023-10-25 16:00:00 发布

阅读量29

点赞数

分类专栏： CSS 前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_50149096/article/details/134025629

版权

CSS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

CSS字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小</title>
    <style>
        .container1 {
            font-size: 50px;
        }
        .container2 {
            font-size: 40px;
        }
        .container3 {
            font-size: 30px;
        }
        .container4 {
            font-size: 20px;
        }
        .container5 {
            font-size: 10px;
        }
        .container6 {
            font-size: 1px;
        }
        body {
            font-size: 20px;
        }
    </style>
</head>
<body>

    <div class="container1">1</div>
    <div class="container2">2</div>
    <div class="container3">3</div>
    <div class="container4">4</div>
    <div class="container5">5</div>
    <div class="container6">6</div>

</body>
</html>

字体族

属性名：font-family
语法：

  div {
      font-family: "Isotonic","NSimSun","KaiTi",sans-serif;
  }

注意：

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

示例代码：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体族</title>
    <style>
        body {
            font-size: 40px;
        }
        .container1 {
            font-family: "微软雅黑";
        }
        .container2 {
            font-family: "仿宋";
        }
        .container3 {
            font-family: "新宋体";
        }
        .container4 {
            font-family: "楷体";
        }
        .container5 {
            font-family: "Isotonic","NSimSun","KaiTi",sans-serif;
        }
    </style>
</head>
<body>
    <div class="container1">张三</div><br>
    <div class="container2">李四</div><br>
    <div class="container3">王五</div><br>
    <div class="container4">赵六</div><br>
    <div class="container5">孙七</div><br>
</body>
</html>

字体风格

属性名：font-style
常用值：
- normal：正常（默认值）
- italic：斜体（使用字体自带的斜体效果）
- oblique：斜体（强制倾斜产生的斜体效果）

实现斜体时，推荐使用italic
语法：

  div {
      font-style: italic;  
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体风格</title>
    <style>
        body {
            font-size: 40px;
        }
        .container1 {
            font-style: normal;
        }
        .container2 {
            font-style: italic;
        }
        .container3 {
            font-style: oblique;
        }
    </style>
</head>
<body>
    <div class="container1">张三</div>
    <div class="container2">李四</div>
    <div class="container3">王五</div>
</body>
</html>

字体粗细

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

div {
  font-weight: bold;
}
div {
  font-weight: 400;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体粗细</title>
    <style>
        body {
            font-size: 40px;
        }
        /* 粗 */
        .ruobing1 {
            font-weight: bold;
        }
        /* 正常 */
        .ruobing2 {
            font-weight: normal;
        }
        /* 细 */
        .ruobing3 {
            font-weight: lighter;
        }
        /* 很粗（多数字体不支持） */
        .ruobing4 {
            font-weight: bolder;
        }
        .ruobing5 {
            font-weight: 100;
        }
        .ruobing6 {
            font-weight: 300;
        }
        .ruobing7 {
            font-weight: 400;
        }
        .ruobing8 {
            font-weight: 500;
        }
        .ruobing9 {
            font-weight: 700;
        }
        .ruobing10 {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <div class="ruobing1">若冰说1</div>
    <div class="ruobing2">若冰说2</div>
    <div class="ruobing3">若冰说3</div>
    <hr>
    <div class="ruobing4">若冰说4</div>
    <hr>
    <div class="ruobing5">若冰说5</div>
    <div class="ruobing6">若冰说6</div>
    <div class="ruobing7">若冰说7</div>
    <div class="ruobing8">若冰说8</div>
    <div class="ruobing9">若冰说9</div>
    <div class="ruobing10">若冰说10</div>
</body>
</html>

字体复合属性
- 属性名：font（可以把上述字体样式合并成一个属性）
- 编写规则
  - 字体大小、字体族比必须都写上
  - 字体族必须是最后一位、字体大小必须是倒数第二位
  - 各个属性间用空格隔开
- 实际开发中更推荐使用复合写法，但这也不是绝对的，比如只想设置字体大小，直接使用 font-size