HTML基础学习-14-font字体属性设置

最新推荐文章于 2024-04-22 13:50:02 发布

豆皮青椒

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量810

点赞数

CC 4.0 BY-SA版权

文章标签： html font-css

本文链接：https://blog.youkuaiyun.com/u011523180/article/details/73065414

本文详细介绍了HTML中font属性的各种设置方法，包括字体大小、样式、加粗及倾斜等，并通过实例展示了不同属性值的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML基础学习-14-font字体属性设置

<!DOCTYPE  html>
<!--
    font-size: 大小设定  百分比设定(是在父元素基础上)   smaller  larger 比父元素的大还是小  inherit继承父元素

    font-family 定义字体样式，可以使用,隔开， 在没有前一个时候使用后一个   一般用英文 如微软雅黑英文是  Microsoft YaHei
    font-weight 字体加粗  normal正常400  bold粗700  bolder更粗 lighter更细
                        100~900的取值范围  必须是整数
    font-style  normal正常   italic斜体  oblique倾斜 inherit继承
    font-variant   normal small-caps小型大写字母显示文本  inherit
-->
<head>
    <title>font 属性设置</title>
    <meta charset="utf-8">
    <style type="text/css">
         body{
            font-size:40px;
            font-style:italic;
         }
         h1,h2{
            font-size:100%;
         }
         h2{
           font-size:200%
         }
         .ha{
            font-family:'微软雅黑';
            font-size:smaller
            font-weight:lighter;
            }
            .hb{
              font-size:larger;
              font-weight:bolder
            }
            .fa{
                font-style:normal;
            }
            .fb{
                font-style:italic;
            }
            .fc{
                font-style:oblique;
                }
            .fd{
                font-style:inherit;
            }
            .pa{
                font-variant:normal;
            }
            .pb{
                font-variant:small-caps;
            }
            .pc{
                font-variant:inherit;
                }



    </style>
</head>

<body>
    <p>
      字体类型1
    </p>
<h1 class="ha">
    字体1
</h1>
<h2 class="hb">
    字体2
</h2>

<em class="fa">
    字体1 font-style</em>
    <br>
            <em class="fb">字体2 font-style</em>
            <br>
            <em class="fc">字体3 font-style</em>
            <br>
            <em class="fd">字体4 font-style</em>

                <br>
            <p class="pa">
                    abnormal1
            </p>
            <br>
            <p class="pb">
                    abnormal2
            </p>
            <br>
            <p class="pc">
                    abnormal3
            </p>
</body>

</html>