CSS：字体和文本样式

最新推荐文章于 2025-05-09 10:35:31 发布

GanGuaGua

最新推荐文章于 2025-05-09 10:35:31 发布

阅读量535

点赞数 18

文章标签： css 前端

本文链接：https://blog.csdn.net/Visual_progress/article/details/147785518

版权

字体样式

字体大小font-size

在CSS中我们常使用font-size来定义字体大小

字体大小的单位为px

代码演示

<!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>
        .ziti{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="ziti">Hello,World</div>
</body>
</html>

演示结果

字体粗细font-weight

在CSS中，我们使用font-weight来定义字体的粗细，字体粗细在100单位到900单位之间，在编写时，不需要加px

属性值：

属性值	描述
`normal`	默认值，不加粗
`bold`	加粗
100 - 900	用数字来定义粗细，其中400等同于normal，700等同于bold

代码演示

<!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>
        .ziti{
            font-weight:700;
        }
    </style>
</head>
<body>
    <div class="ziti">Hello,World</div>
</body>
</html>

演示结果

字体风格font-style

在CSS中，我们使用font-style来定义字体的风格

属性值	描述
`normal`	默认值，显示标准的字体样式
`italic`	显示斜体的字体样式

代码演示

<!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>
        .ziti{
            font-style:italic;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="ziti">Hello,World</div>
</body>
</html>

演示结果

字体类型font-family

font-family可以一次性定义很多字体类型

font-family: "Microsoft Yahei","宋体";

为了适应浏览器的配置，font-family可以定义许多字体，如果第一个字体用不了，那就选择第二个，第三个.....

代码演示

<!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>
        .ziti{
            font-family: "Microsoft Yahei","宋体";
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="ziti">Hello,World</div>
</body>
</html>

演示结果

样式连写font

在定义字体样式时，我们可以将以上四种属性全部放在font中

font: style weight size family

在书写时，必须有四个属性，而且四个属性的位置是像上面那样排列的

代码演示

<!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>
        .ziti{
            font: italic 700 50px "宋体";
        }
    </style>
</head>
<body>
    <div class="ziti">Hello,World</div>
</body>
</html>

演示结果

文本样式

文本颜色color

color定义文本颜色有四种方式

表示方式	属性值
关键字	`red`,`green`,`blue`等，直接指定颜色
rbg	`rgb(255,255,255)` 或 `rgb(100%,100%,100%)`
rbga	`rgba(255,255,255,0.5)`
十六进制形式	`#ffaabb`

我们就讲解rbga的方式，因为它多了一个参数，多出来的那个参数是用来定义颜色透明度的

演示代码

<!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>
        .yanse{
            color: rgba(200, 200,150, 0.7)
        }
    </style>
</head>
<body>
    <div class="yanse">Hello,World</div>
</body>
</html>

演示结果

这里的颜色明显看出透明度低了

文本缩进text-indent

text-indent用于指定一行文本的缩进

text-intent:2px

text-intent:2em

px是绝对单位

em是每个字体的单位

演示代码

<!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>
        .px{
            text-indent:2px;
        }
        .em{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>文本缩进两个字体单位</div>
    <div class="px">文本缩进两个字体单位</div>
    <div class="em">文本缩进两个字体单位</div>
</body>
</html>

演示结果

这里我们可以看到绝对单位和字体单位的区别

text-align

text-align属性用来指明文本对齐的方式

属性值

属性值	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐

代码演示

<!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>
        .right{
            text-align: right;
        }
        .left{
            text-align: left;
        }
        .mid{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="left">文本左边对齐</div>
    <div class="mid">文本中间对齐</div>
    <div class="right">文本右边对其</div>
</body>
</html>

演示结果

文本修饰text-decoration

文本修饰可以给文本添加删除键，下划线，上划线

属性值

属性值	描述
none	没有修饰（默认值）
underline	下划线（a标签的默认值）
overline	上划线
line-through	删除线

代码演示

<!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>
        .down{
            text-decoration:underline;
        }
        .up{
            text-decoration: overline;
        }
        .del{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="up">文本上划线</div>
    <div class="down">文本下划线</div>
    <div class="del">文本删除线</div>
</body>
</html>

演示结果