您现在的位置：首页 >> 前端 >> 内容

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

时间：2017/6/15 9:23:00 点击：

　　核心提示：HTML基础学习-14-font字体属性设置!DOCTYPEhtml!--font-size: 大小设定百分比设定(是在父元素基础上) smallerlarger 比父元素的大还是小inherit继承...

<!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>