Web前端--字体样式相关属性

敖月

于 2024-06-12 12:41:07 发布

阅读量232

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/Cloul/article/details/139623376

版权

代码里具体介绍了字体大小font-size，字体粗细font-weight，字体倾斜font-style，行高(文字高度+文字上下间距)line-height，字体系列font-family，font复合属性，文本缩进text-indent，文本对齐text-align(控制文本水平对齐方式)，图片水平对齐方式，文本修饰线，字体颜色

<!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>
        /* 谷歌浏览器文字默认大小16px */
        /* 字体大小font-size */
        p {
            /* font-size必须有单位，否则属性不生效 */
            font-size: 25px;
        }
        /* 字体粗细font-weight */
        h2 {
            font-weight: 400; /* 正常字体(去掉加粗) */
        }
        div {
            font-weight: 700; /* 加粗 */
        }
        /* 字体倾斜font-style */
        em {
            font-style: normal; /* 不倾斜 */
        }
        div {
            font-style: italic; /* 倾斜 */
        }
        /* 行高(文字高度+文字上下间距)line-height */
        p {
            line-height: 30px;
            /* line-height: 30; 行高属性值为数字，则行高为当前标签字体大小（Font-size属性值）的倍数*/
        }
        /* 画盒子 */
        .red {
            width: 100px; /* 宽度 */
            height: 50px;  /* 高度 */
            background-color: red; /* 背景色 */
        }
        /* 行高--文字垂直居中 */
        .blue {
            width: 200px; /* 宽度 */
            height: 200px;  /* 高度 */
            background-color:aqua; /* 背景色 */
            line-height: 200px;
            /* 文字居中只需行高和盒子高度一样(前提：单行文字) */
        }
        /* 字体系列font-family */
        h3 {
            font-family: 楷体;
            /* font-family: 楷体，Microsoft YaHei，sans-serif */
            /* font-family属性值可写多个，用逗号隔开，执行顺序从左向右 */
        }
        /* font复合属性 */
        /* 属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开 */
        h1 {
            font:italic 700 30px/2 楷体； /* 文字倾斜，加粗，大小30px,行高2倍，楷体 */
            /* 字号和字体必须写，否则font属性不生效 */
        }
        /* 文本缩进text-indent */
        p {
            /* 数字+px;数字+em(1em=当前标签的字号大小) */
            text-indent: 2em;
        }
        /* 文本对齐text-align(控制文本水平对齐方式) */
        h4 {
            /* left左对齐(默认),center居中对齐,right右对齐 */
            text-align: center;
            /* 居中的是文字内容，不是标签，h4标签仍然独占一行 */
        }
        /* 图片水平对齐方式 */
        h4 {
            text-align: center;
        }
        /* 文本修饰线 */
        h4 {
            /* none无(去掉修饰线),underline下划线,line-through删除线,overline上划线 */
            text-decoration: underline;
        }
        /* 字体颜色 */
        h4 {
            color: red;
        }
        h5 {
            /* rgb(红，绿，蓝) 分别取值*/
            color: rgb(46, 79, 128);
        }
        h6 {
            /* rgba(红，绿，蓝,透明度(0到1之间的数,0完全透明，1不透明)*/
            color: rgb(0, 0, 0,0.3);
            /* 十六进制表示法#RRGGBB(红，绿，蓝)0到f */
            background-color: #00ff00; /* 可简写为#0f0 */
        }
        
     
    </style>
</head>
<body>
    <p>测试字体大小</p>
    <h2>去掉h2自带的加粗</h2>
    <div>加粗</div>
    <em>去掉倾斜</em>
    <div>倾斜</div>
    <p>段落文字设置行高，段落文字设置行高，段落文字设置行高，段落文字设置行高，段落文字设置行高，段落文字设置行高段落文字设置行高，段落文字设置行高，段落文字设置行高，段落文字设置行高，段落文字设置行高，段落文字设置行高</p>
    <div class="red">div1</div>
    <div class="blue">div2</div>
    <h3>字体改为楷体</h3>
    <h1>font属性</h1>
    <p>文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进</p>
    <h4>居中对齐</h4>
    <h4>
        <img src="石心三人.jpg" alt="" width="100">
    </h4>
    <h4>文本修饰线</h4>
    <h5>rgb</h5>
    <h6>rgba</h6>
</body>
</html>

页面效果