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

最新推荐文章于 2025-03-08 16:14:31 发布

yoghurt&girl

最新推荐文章于 2025-03-08 16:14:31 发布

阅读量1.4w

点赞数 7

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

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

版权

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

25 篇文章

订阅专栏

本文主要介绍了HTML和CSS中的字体与文本属性。字体属性包括字体系列、大小、粗细、风格及复合属性；文本属性涵盖颜色、水平对齐方式、装饰、缩进、行高和字间间距等，还给出了相关案例演示和效果图。

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

一、字体属性

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>

效果图：