HTML中字体属性、文本属性使用说明

最新推荐文章于 2024-06-19 12:02:13 发布

yoghurt&girl

最新推荐文章于 2024-06-19 12:02:13 发布

阅读量1.3w

点赞数 6

分类专栏： web前端开发文章标签： html css3 css

本文链接：https://blog.csdn.net/ywforever/article/details/125015148

版权

web前端开发专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、字体属性

font属性用于定义字体系列，字体大小、粗细和文字样式（斜体）

1、字体系列

font-family：定义文本字体，定义多个字体用逗号隔开，设置中英文字体时，注意先英后中

2、字体大小

font-size

3、字体粗细

font-weight：属性值有normal、bold、bolder、lighter、数字（100-900）

4、文本风格

font-style：属性值有normal、Italic...常用normal设置将文本恢复正常

5、字体复合属性

案列展示：

<style type="text/css">
        p {
            font-family: 'Courier New' '微软雅黑';
        }
        
        h1 {
            font-size: 18px;
        }
        
        h2 {
            font-weight: bold;
        }
        
        h3 {
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>测试</p>
    <h1>字体大小</h1>
    <h2>字体粗细样式</h2>
    <h3>字体样式</h3>
</body>

效果图：

总结

二、文本属性

1、文本颜色（color）

color：属性值可以是十六进制、rgb、颜色名

2、水平对齐方式（text-align）

设置元素内文本内容的水平对齐方式

常用属性值：center、left、right

3、装饰文本

text-decoration：规定添加到文本的修饰。可以添加下划线、删除线、上划线等

4、文本缩进（通常用于首行缩进）

text-indent：指定文本的第一行的缩进，长度可以为负值

5、行高

line-height：设置行间的距离，可以控制文字行与行之间的距离，行间距的组成：上间距、文字内容、下间距

单行文字垂直居中可以使用该属性，line-height的高等于盒子的高，若大于盒子高度，则文字偏下；若小于盒子高度，则文字偏下。

6、字间间距

letter-spacing：控制文本字与字的间距属性值px单位的数值。

案列演示：

<style type="text/css">
        h1 {
            color: red;
            text-align: center;
        }
        
        h5 {
            text-decoration: line-through;
        }
        
        p {
            text-indent: 2em;
            line-height: 10px;
        }
    </style>
</head>

<body>
    <h1>颜色和对齐方式</h1>
    <p>缩进的测试和设置行高，可能效果不明心啊因为的段落内容较少</p>
    <p>缩进的测试和设置行高，可能效果不明心啊因为的段落内容较少</p>
    <h5>文本装饰</h5>

效果图：

yoghurt&girl

关注

6
点赞
踩
52

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中字体属性、文本属性使用说明

一、字体属性font属性用于定义字体系列，字体大小、粗细和文字样式（斜体）1、字体系列font-family：定义文本字体，定义多个字体用逗号隔开，设置中英文字体时，注意先英后中2、字体大小font-size3、字体粗细font-weight：属性值有normal、bold、bolder、lighter、数字（100-900）4、文本风格font-style：属性值有normal、Italic...常用normal设置将文本恢复正常5、字体复
复制链接

扫一扫