零基础CSS入门教程(8)—

零基础CSS入门教程(8)——CSS设置字体

news2024/10/6 4:03:51

本章目录

- 1.任务目标
- 2.css设置字体
- 3.代码演示
- 4.小结

1.任务目标

我们前几个小结学习了，css的选择器，和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能

2.css设置字体

(1)font-size这个是设置字体大小，浏览器一般默认字体是16px
(2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold
(3)font-style是设置字体倾斜和html字体倾斜一样效果，倾斜写italic，不倾斜写normal
(4)font-family可以设置字体形式在后面加sans-serif是无衬线字体写这个墓地为了要是电脑没安装字体他就可以随机给你定义一个无衬线字体，还有serif有衬线字体和monosspace等宽字体

3.代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
div{
    /* font-size这个是设置字体大小，浏览器一般默认字体是16px   */
    font-size: 20px;
    /* font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold*/
    font-weight: 700;
    /*font-style是设置字体倾斜和html字体倾斜一样效果，倾斜写italic，不倾斜写normal*/
    font-style: italic;
    /*font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了要是电脑没安装字体他就可以随机给你定义一个无衬线字体，还有serif有衬线字体和monosspace等宽字体*/
    font-family: 宋体,黑体, sans-serif;
}
    </style>
</head>
<body>
    <div>你好啊</div>
</body>
</html>