当前位置：首页 > news >正文

CSS：字体和文本样式

news 来源：原创 2025/5/9 7:11:52

字体样式

字体大小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>

演示结果