前端day8-字体和文本样式

最新推荐文章于 2025-01-13 12:20:12 发布
原创最新推荐文章于 2025-01-13 12:20:12 发布 · 225 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#前端
前端专栏收录该内容
9 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        /* 调整字体 */
        .size {
            font-size: 70px;
        }

        /* 字体粗细 */
        /* 正常：normal 或 400 */
        /* 加粗：bold 或 700 */
        .weight {
            font-weight: 100;
        }

        /* 字体倾斜 */
        /* 正常：normal */
        /* 倾斜：italic */
        .italic {
            font-style: italic;
        }

        /* 字体系列 */
        .songti {
            font-family: 宋体;
        }

        /* 样式层叠问题-覆盖性，选择最后一个 */
        .more {
            color: red;
            color: blue;
        }

        /* font属性连写 */
        .allfont1 {
            /* font: style weight size 字体; */
            font: italic 700 66px 宋体;
        }
        .allfont2 {
            /* font: style weight size 字体; */
            font: italic 700 66px 宋体;
            /* 单独修改只能放后面 */
            font-style: normal;
        }
        .allfont3 {
            /* font: style weight size 字体; */
            /* 只能省略前两个 */
            font: 66px 宋体;
            
        }

        /* 文本缩进 */
        .indent {
            /* em:一个字的大小 */
            text-indent: 2em;
        }

        /* 内容水平对齐方式 */
        .align {
            /* text-align: right; */
            /* text-align: left; */
            text-align: center;
        }

        /* 全局居中 */
        body {
            text-align: center;
        }

        /* 文本修饰 */
        /* 下划线 */
        .under {
            text-decoration: underline;
        }
        /* 删除线 */
        .linet {
            text-decoration: line-through;
        }
        /* 上划线 */
        .overl {
            text-decoration: overline;
        }
        /* 无装饰线 */
        .non {
            text-decoration: none;
        }

        /* 调整行高 */
        .hei {
            /* line-height: 50px; */
            /* 当前字号的倍数 */
            line-height: 3;
        }
        .allfont4 {
            /* font: style weight size/line-height 字体; */
            font: italic 700 66px/1.5 宋体;
        }

    </style>
</head>
<body>
    
    <!-- 默认字体字号16 -->
    <p>前端</p>

    <!-- 调整字号 -->
    <div class="size">调整字号</div>

    <!-- 字体粗细 -->
    <div class="weight">你好</div>

    <!-- 字体倾斜 -->
    <div class="italic">世界</div>

    <!-- 字体系列 -->
    <!-- 默认微软雅黑 -->
    <div>微软雅黑</div>
    <div class="songti">宋体</div>

    <!-- 样式的层叠问题 -->
    <div class="more">层叠问题</div>

    <!-- font属性连写--复合属性 -->
    <div class="allfont1">font属性连写1</div>
    <div class="allfont2">font属性连写2</div>
    <div class="allfont3">font属性连写3</div>

    <!-- 文本缩进 -->
    <p class="indent">在刚刚结束的巴黎奥运会上，一个不寻常的场景吸引了世界的目光：乌克兰女子高跳运动员玛胡奇克，在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议，而且标志着一个重大胜利的前奏。结果正如预期，金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>

    <!-- 内容水平对齐方式 -->
    <p class="align">在刚刚结束的巴黎奥运会上，一个不寻常的场景吸引了世界的目光：乌克兰女子高跳运动员玛胡奇克，在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议，而且标志着一个重大胜利的前奏。结果正如预期，金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>

    <hr>

    <img src="image/i1.png" alt="无法显示" class="img">

    <!-- 文本修饰 -->
    <div class="under">下划线</div>
    <div class="linet">删除线</div>
    <br>
    <div class="overl">上划线</div>
    <div class="non">无装饰线</div>

    <!-- 行高规定 -->
    <p class="hei">在刚刚结束的巴黎奥运会上，一个不寻常的场景吸引了世界的目光：乌克兰女子高跳运动员玛胡奇克，在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议，而且标志着一个重大胜利的前奏。结果正如预期，金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>
    <p class="allfont4">在刚刚结束的巴黎奥运会上，一个不寻常的场景吸引了世界的目光：乌克兰女子高跳运动员玛胡奇克，在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议，而且标志着一个重大胜利的前奏。结果正如预期，金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>



</body>
</html>