CSS 字体属性 font-family size weight style

最新推荐文章于 2022-10-07 10:02:43 发布

CodeDoraemon

最新推荐文章于 2022-10-07 10:02:43 发布

阅读量588

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_40417070/article/details/113246188

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

title: CSS 字体属性

1. Font-family

在这里插入图片描述

1.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //各种字体之间需要使用逗号，空格拆开
        //尽量使用默认字体
    </script>

    <style>
        h2 {
            font-family: '宋体';
        }
        p {
            font-family: '微软雅黑', 'Times New Roman', Times, serif;
        }

        body {
            font-family: '微软雅黑';
        }
    </style>
</head>
<body>
    <h2>123123123</h2>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
</body>
</html>

1.2 运行结果

在这里插入图片描述

2. font-size

在这里插入图片描述

2.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //各种字体之间需要使用逗号，空格拆开
        //尽量使用默认字体
    </script>

    <style>

        /*标题标签比较特殊 一般需要单独给大小*/
        h2 {
            font-family: '宋体';
            font-size: 18px;
        }
        p {
            font-family: '微软雅黑', 'Times New Roman', Times, serif;
        }

        body {
            /*设置默认的字体*/
            font-family: '微软雅黑';

            /*设置大小为谷歌浏览器的默认大小 16px*/
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
</body>
</html>

2.2 运行结果

在这里插入图片描述

3. font-weight

给文字进行大小，粗细，和文字样式的修改
在这里插入图片描述

3.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //各种字体之间需要使用逗号，空格拆开
        //尽量使用默认字体
    </script>

    <style>

        /*标题标签比较特殊 一般需要单独给大小*/
        h2 {
            font-family: '宋体';
            font-size: 18px;

            /*font-weight  400 和 normal 是一个意思*/
            font-weight: 400;
            font-weight: normal;
        }
        p {
            font-family: '微软雅黑', 'Times New Roman', Times, serif;
        }

        body {
            /*设置默认的字体*/
            font-family: '微软雅黑';

            /*设置大小为谷歌浏览器的默认大小 16px*/
            font-size: 16px;
        }

        .bold {
            /*bole 表示的是字体加粗的意思*/
            /*700 不带单位 可以加粗*/
            /*实际开发更喜欢加上数字 进行加粗的操作 */
            font-weight: 700;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <p class="bold">456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
</body>
</html>

3.2 运行结果

在这里插入图片描述

4. font-style

在这里插入图片描述

4.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //各种字体之间需要使用逗号，空格拆开
        //尽量使用默认字体
    </script>

    <style>

        /*标题标签比较特殊 一般需要单独给大小*/
        h2 {
            font-family: '宋体';
            font-size: 18px;

            /*font-weight  400 和 normal 是一个意思*/
            font-weight: 400;
            font-weight: normal;
        }
        p {
            font-family: '微软雅黑', 'Times New Roman', Times, serif;
            
            /* 加上font-style 属性 */
            /*italic 可以使得文字变得倾斜*/
            font-style: italic;
        }

        body {
            /*设置默认的字体*/
            font-family: '微软雅黑';

            /*设置大小为谷歌浏览器的默认大小 16px*/
            font-size: 16px;
        }

        .bold {
            /*bole 表示的是字体加粗的意思*/
            /*700 不带单位 可以加粗*/
            /*实际开发更喜欢加上数字 进行加粗的操作 */
            font-weight: 700;
        }

        em {
            /*将倾斜的文字变得正常 开发时比较常用*/
            font-style: normal;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <p class="bold">456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
    <p>456456</p>
    <em>这是一个斜体</em>
</body>
</html>

4.2 运行结果

在这里插入图片描述

CodeDoraemon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 字体属性 font-family size weight style

title: CSS 字体属性1. Font-family1.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
复制链接

扫一扫