Css基础——Css字体属性

迪幻

已于 2024-03-01 14:31:28 修改

阅读量410

点赞数 12

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

于 2024-03-01 14:31:06 首次发布

本文链接：https://blog.csdn.net/qq_38965505/article/details/136378773

版权

css 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

21 篇文章 0 订阅

订阅专栏

1、font-family：定义文本的字体系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            font-family: "微软雅黑";
        }
        p{
            font-family: "宋体";
        }
    </style>
</head>
<body>
    <h2>迪幻的主页</h2>
    <p>姓名：迪幻</p>
    <p>性别：男</p>
    <p>专业：计算机科学与技术</p>
</body>
</html>

2、font-size定义字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h2>迪幻的主页</h2>
    <p>姓名：迪幻</p>
    <p>性别：男</p>
    <p>专业：计算机科学与技术</p>
</body>
</html>

3、font-weight设置字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <h2>迪幻的主页</h2>
    <p>姓名：迪幻</p>
    <p>性别：男</p>
    <p>专业：计算机科学与技术</p>
</body>
</html>

4、font-style设置字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>迪幻的主页</h2>
    <p>姓名：迪幻</p>
    <p>性别：男</p>
    <p>专业：计算机科学与技术</p>
</body>
</html>

5、字体的复合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font: italic 700 30px/50px '微软雅黑';
        }
    </style>
</head>
<body>
    <h2>迪幻的主页</h2>
    <p>姓名：迪幻</p>
    <p>性别：男</p>
    <p>专业：计算机科学与技术</p>
</body>
</html>