CSS3系列 05 文本控制_font 1em 调节font weight-CSDN博客

本文链接：https://blog.csdn.net/weixin_43422005/article/details/118926144

本文详细介绍了CSS3中用于文本控制的各种属性，包括字体家族、自定义字体、字体粗细、字号大小、文本颜色、文本行高、文本倾斜、组合定义等。还探讨了文本样式、段落控制和排版模式，如字型设置、字母大小写、文本线条、文本阴影、空白处理、文本溢出、文本缩进、水平和垂直对齐、单词间距和字符间距。通过实例展示了各项属性的使用方法和效果。

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

基础设置

字体家族 font-family

使用font-family可定义多个字体，浏览器会按照从左至右的顺序进行查找这些字体。

为什么需要定义多个字体？原因是如果你只使用了一种字体而恰好用户的计算机中并没有该字体就会降低显示效果。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        :root {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    </style>
</head>

<body>
    <p>English display result</p>
    <div>中文显示结果</div>
</body>

</html>

渲染结果：

自定义字体 @font-face

我们可以自定义一些字体，但是在使用自定义字体时应该先导入字体文件。

注意，字体文件导入后应当进行format，告知浏览器字体文件所代指字体的格式。

如下表所示：

字体文件后缀	format
.otf	opentype
.woff	woff
.ttf	truetype
.eot	Embedded-opentype

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        /* 自定义一个字体*/
        @font-face {
        
            /* 字体名字：mineFont */
            font-family: "mineFont";
            
            /* 导入字体文件并格式化，可以多设置几个url，字体文件可以是网络的，也可以是本地的 */
            src: url("./ALLEGRO.ttf") format("truetype"),
                url("./ALLEGRO.ttf") format("truetype");
        }

        :root {
            /* 优先使用自定义字体 */
            font-family: 'mineFont', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    </style>
</head>

<body>
    <p>English display result</p>
    <div>中文显示结果</div>
</body>

</html>

渲染结果：

字体粗细 font-weight

使用font-weight可设置字体的粗细，它既可以指定数字（100-900），也可以指定单词。

它可设置的值如下表所示：

单词	数字
lighter（细）	100与lighter相同
normal（正常）	400与normal相同
bold（较粗）	700与bold相同
bolder（特粗）	900与bolder相同

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p:nth-of-type(1) {
            font-weight: 100;
        }

        p:nth-of-type(2) {
            font-weight: lighter;
        }

        p:nth-of-type(3) {
            font-weight: 400;
        }

        p:nth-of-type(4) {
            font-weight: normal;
        }

        p:nth-of-type(5) {
            font-weight: 700;
        }

        p:nth-of-type(6) {
            font-weight: bold;
        }

        p:nth-of-type(7) {
            font-weight: 900;
        }

        p:nth-of-type(8) {
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <p>100</p>
    <p>lighter（细）</p>
    <br>
    <p>400</p>
    <p>normal（正常）</p>
    <br>
    <p>700</p>
    <p>bold（较粗）</p>
    <br>
    <p>900</p>
    <p>bolder（特粗）</p>
</body>

</html>

渲染结果：

字号大小 font-size

使用font-weight可设置字号的大小，可以使用单词、px、%、em、rem进行设置。

它可指定单词如下表所示：

单词	描述
xx-small	最小
x-small	较小
small	小
medium	中等
large	大
x-large	较大
xx-large	最大

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        :root{
            font-size: 16px;
        }
        p:nth-child(1){
            font-size: xx-small;
        }

        p:nth-of-type(2) {
            font-size: x-small;
        }

        p:nth-of-type(3) {
            font-size: small;
        }

        p:nth-of-type(4) {
            font-size: medium;
        }

        p:nth-of-type(5) {
            font-size: large;
        }

        p:nth-of-type(6) {
            font-size: x-large;
        }

        p:nth-of-type(7) {
            font-size: xx-large;
        }
    </style>
</head>

<body>
    <p>字号设置: xx-small</p>
    <p>字号设置：x-small</p>
    <p>字号设置：small</p>
    <p>字号设置：medium</p>
    <p>字号设置：large</p>
    <p>字号设置：x-large</p>
    <p>字号设置：xx-large</p>
</body>

</html>

渲染结果：

文本颜色 color

使用color可设置文本的颜色，可以使用单词、rgb、rgba、#16进制色进行设置。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p:first-of-type {
            color: red;
        }

        p:nth-of-type(2) {
            color: rgb(255, 0, 0);
        }

        p:nth-of-type(3) {
            color: rgba(255, 0, 0, 0.5);
        }

        p:last-of-type {
            color: #ff0000;
        }
    </style>
</head>

<body>
    <p>文本颜色：red</p>
    <p>文本颜色：rgb(255, 0, 0)</p>
    <p>文本颜色：rgba(255, 0, 0, 0.5)</p>
    <p>文本颜色：#ff0000 </p>
</body>

</html>

渲染结果：

文本行高 line-height

当一段文本放在一个标签中，默认会以标签左上角为起始点进行文本渲染。

如果我们想让文本垂直居中于元素内，可以使用 line-height: element-height 的设置。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div {
            background-color: #ddd;
            color: #000;
            height: 10rem;
            width: 10rem;
        }

        div:last-of-type {
            line-height: 10rem;
        }

        p {
            font-style: italic;
            color: #bbb;
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <p>默认文本按照左上角为起始点</p>
    <div>this is a text</div>
    <p>将line-height设置为元素高度可令文本垂直居中</p>
    <div>this is a text</div>
</body>

</html>

渲染结果：

文本倾斜 font-style

使用font-style可令文本样式发生改变。

normal：正常
italic：倾斜

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p:first-of-type{
            font-style: normal;
        }
        p:last-of-type{
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>正常：normal</p>
    <p>倾斜：italic</p>
</body>

</html>

渲染结果：

组合定义 font

使用font可一次性定义上面的设置，语法如下：

div {
    font : 文本倾斜 倾斜方式 字号大小/文本行高 字体 "字体1", "字体2";
}

注意，文本颜色不能进入组合定义之中，除此之外还需要留意：

必须要指定字号的大小
必须要指定文本的行高

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p:first-of-type {
            font: italic bold 1em/1.5 'Courier New', Courier, monospace;
            color: red;
        }

        p:nth-of-type(2) {
            font: italic bold /1.5 'Courier New', Courier, monospace;
        }

        p:last-of-type{
            font: italic bold 1em/ 'Courier New', Courier, monospace;
        }
    </style>
</head>

<body>
    <p>倾斜：italic 粗细：bold 字号：1em/行高:1.5 字体：'Courier New', Courier, monospace 颜色：rgba(255,0,0,.5)</p>
    <p>失败，未定义字号大小</p>
    <p>失败，未定义文本行高</p>
</body>

</html>

渲染结果：

文本样式

字型设置 font-variant

使用font-variant可定义字型，让字型看起来不太一样。

它可设置的值如下表所示：

值	描述
normal	默认值，标准的字型
small-caps	浏览器会显示小型大写的字
inherit	从父元素继承font-variant的值

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p:first-of-type {
            font-variant: normal;
        }

        p:last-of-type {
            font-variant: small-caps;
        }
    </style>
</head>

<body>
    <p>默认值 normal</p>
    <p>小型大写 small-caps</p>
</body>

</html>

渲染结果：

字母大小写 text-transform

使用text-transform可对文本的字母做大小写转换。

它可设置的值如下表所示：

值	描述
capitalize	首字母大写
uppercase	全字母大写
lowercase	全字母小写

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p:first-of-type {
            text-transform: capitalize;
        }

        p:nth-of-type(2) {
            text-transform: uppercase;
        }

        p:last-of-type {
            text-transform: lowercase;
        }
    </style>
</head>

<body>
    <p>capitalize</p>
    <p>uppercase</p>
    <p>lowercase</p>
</body>

</html>

渲染结果：

文本线条 text-decoration

我们可以使用text-decoration来清除a标签自带的下划线。

它可设置的值如下表所示：

值	描述
none	无任何线条样式
underline	文本下的一条线
overline	文本上的一条线
line-through	文本中的一条线
blink	定义闪烁的文本
inherit	从父元素继承text-decoration的值

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        a:first-of-type{
            text-decoration: none;
        }

        p:first-of-type {
            text-decoration: underline;
        }

        p:nth-of-type(2) {
            text-decoration: overline;
        }

        p:last-of-type {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <p>underline</p>
    <p>overline</p>
    <p>line-through</p>
    <a href="#">清除a标签样式：none</a>
</body>

</html>

渲染结果：

文本阴影 text-shadow

使用text-shadow可对一段文本添加阴影效果。

设置参数顺序如下：

阴影颜色
水平偏移量
垂直偏移量
模糊度

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        h1{
            text-shadow: #ddd 15px 15px 6px;
            font-size: 3rem;
            font-style: italic;
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <h1>HELLO WORLD</h1>
</body>

</html>

渲染结果：

空白处理 white-space

由于浏览器的渲染特性，故出现多个空白时只会显示一个。

我们可以使用white-space来控制文本中的空白显示。

它可设置的值如下表所示：

值	描述
pre	原样显示，类似于pre标签
nowrap	不保留文本换行
pre-wrap	保留空白，保留换行
pre-line	合并空白，保留换行

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p:nth-of-type(1) {
            white-space: pre;
        }

        p:nth-of-type(2) {
            white-space: nowrap;
        }

        p:nth-of-type(3) {
            white-space: pre-wrap;
        }

        p:nth-of-type(4) {
            white-space: pre-line;
        }

        p {
            border: 1px solid black;
            width: 300px;
            height: 100px;
            padding: 10px;
        }

        mark {
            border-bottom: 1px solid black;
            border-top-left-radius: 30%;
            background-color: black;
            color: white;
            transform: translate(0, 1rem);
            padding: 5px;
        }
    </style>
</head>

<body>
    <mark>pre 原样显示</mark>
    <p>
        A B C
        D E F
    </p>
    <mark>nowrap 合并空白，禁止换行</mark>
    <p>
        A B C
        D E F
    </p>
    <mark>pre-wrap 保留空白，保留换行</mark>
    <p>
        A B C
        D E F
    </p>
    <mark>pre-wrap 合并空白，保留换行符</mark>
    <p>
        A B C
        D E F
    </p>
</body>

</html>

渲染结果：

文本溢出 text-overflow

一个有宽度的容器中，如果一个文本字数超过了容器宽度，是不会进行换行的，这样就会发生溢出。

如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p{
            width: 80px;
        }
    </style>
</head>

<body>
    <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>

</html>

我们可以使用 overflow-wrap: break-word 来让文本自动换行：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p{
            width: 80px;
            overflow-wrap: break-word;
        }
    </style>
</head>

<body>
    <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>

</html>

或者可以设置 overflow: hidden 以及 text-overflow: ellipsis 来让超出容器宽度的文本隐藏并使用 … 进行代替。

注意，overflow: hidden 必须设置在 text-overflow: ellipsis 的上面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p{
            width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>

</html>

渲染结果：

段落控制

文本缩进 text-indent

使用text-indent可进行文本缩进，单位可以是px、em或者rem。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p {
            border: 1px dotted #ddd;
            text-indent: 2rem;
            font-size: 2rem;
        }
    </style>
</head>

<body>
    <p>你好，世界</p>
</body>

</html>

渲染结果：

水平对齐 text-align

使用text-align可对文本在容器内部的水平对齐方式进行设定。

它可设置的值如下表所示：

值	描述
left	左对齐
right	右对齐
center	水平居中对齐

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div {
            background-color: #ddd;
            color: #000;
            width: 150px;
            height: 150px;
            display: inline-block;
        }
        div:nth-of-type(1){
            text-align: left;
        }
        div:nth-of-type(2){
            text-align: center;
        }
        div:nth-of-type(3){
            text-align: right;
        }
    </style>
</head>

<body>
    <div>left</div>
    <div>center</div>
    <div>right</div>
</body>

</html>

渲染结果：

若想文字水平+垂直居中，可指定 line-height: element-height 和 text-align: center：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div {
            background-color: #ddd;
            color: #000;
            width: 150px;
            height: 150px;
            display: inline-block;
        }
        div:nth-of-type(1){
            line-height: 150px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>center</div>
</body>

</html>

渲染结果：

垂直对齐 vertical-align

如果要在图片附近放上一段文本，那么你可以使用vertical-align定义该文本相较于图片的位置进行渲染。

vertical-align仅支持inline与inline-block标签，一般来说都是用图片和文字的垂直对齐方式，此外它还可以让表格单元格的内容进行垂直居中

它可设置的值如下表所示：

值	描述
top	文本相较于图片顶部进行对齐
middle	文本相较于图片中部进行对齐
bottom	文本相较于图片底部进行对齐
sub	图片垂直对齐文本的下标
super	图片垂直对齐文本的上标
text-top	图片与文本顶端对齐
text-bottom	图片与文本底端对其
%	使用 line-height 属性的百分比值来排列此元素，允许使用负值
inherit	从父元素继承vertical-align的值

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div {
            border: 1px dotted #ddd;
            padding: 1rem;
            font-size: 12px;
        }

        img {
            width: 100px;
        }

        body div:nth-of-type(1) img {
            vertical-align: top;
        }

        body div:nth-of-type(2) img {
            vertical-align: middle;
        }

        body div:nth-of-type(3) img {
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <div>
        <img src="./img-001.jpeg" alt="">top
    </div>
    <div>
        <img src="./img-001.jpeg" alt="">middle
    </div>
    <div>
        <img src="./img-001.jpeg" alt="">bottom
    </div>
</body>

</html>

渲染结果：

单词间距 word-spacing

使用word-spacing来控制单词与单词之间的间距，单位可以是px、em或者rem。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p {
            word-spacing: 1rem;
        }
    </style>
</head>

<body>
    <p>this is p element</p>
</body>

</html>

渲染结果：

字符间距 letter-spacing

使用letter-spacing来控制字符与字符之间的间距，单位可以是px、em或者rem。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p {
            letter-spacing: 1rem;
        }
    </style>
</head>

<body>
    <p>this is p element</p>
</body>

</html>

渲染结果：

排版模式 writing-mode

如果想对文本进行排版，可使用writing-mode。

它可设置的值如下表所示：

值	描述
horizontal-tb	水平方向、自上而下进行排版
vertical-rl	垂直方向、自右而左进行排版
vertical-lr	垂直方向，自左而右进行排版

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        p {
            writing-mode: vertical-rl;
            width: 8rem;
            height: 8rem;
            overflow-wrap: break-word;
        }
    </style>
</head>

<body>
    <p>日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑似银河落九天。</p>
</body>

</html>

渲染结果：