【CSS】：字体与文本样式

Yui_

发布于 2025-02-02 21:22:09

5200

代码可运行

文章被收录于专栏：Yui编程知识Yui编程知识

运行总次数：0

代码可运行

1.字体属性

字体属性分为字体类别、字体大小、字体粗细、字体的样式。

1.1 设置字体类别

在我写论文时，总会被要求将字体设置为宋体，在CSS中也是可以为字体设置宋体。语法格式：

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>
        div{
            font-family: '宋体';
        }
    </style>
</head>
<body>
    <div>这是宋体</div>
    <p>这不是宋体</p>
</body>
</html>

注意：

字体可以使用中文，也可以使用英文。
多个字体间使用逗号分割，从左到右查找字体，如果都找不到，会使用默认字体。
使用常见的字体，防止兼容性不行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .font-family .one{
            font-family: 'Microsoft YaHei';
        }
        .font-family .two{
            font-family: '宋体';
        }
    </style>
    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>
</body>
</html>

1.2 设置字体大小

为了随心所欲的控制字体大小，我们需要学习以下控制字体大小的语法。

font-size: xxpx;/*xx表示未知的数字，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>
        .font-size .one{
            font-size: 30px;
        }
        .font-size .two{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="font-size">
        <div class="one">
            大大大
        </div>
        <div class="two">
            小小小
        </div>
    </div>
</body>
</html>

注意：

不同的浏览器默认字号是不同的，所以我们在处理字体大小是最好给一个明确的值。
注意单位为px。

1.3 设置字体粗细

语法格式：

font-weight: bold;
font-weight: 700;

在设置字体粗细时，可以使用数字来表示，也可以使用单词来表示。取值范围[100,900]

<!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>
        .font-weight .one{
            font-weight: 900;
        }
        .font-weight .two{
            font-weight: 100;
        }
    </style>
</head>
<body>
    <div class="font-weight">
        <div class="one">
            粗粗粗
        </div>
        <div class="two">
            细细细
        </div>
    </div>
</body>
</html>

1.4 设置字体样式

有时候我会要求字体变成粗，又有时我们又想要字体变倾斜这里的倾斜就是字体样式。语法：

font-style: italic;/*倾斜*/
font-style: normal;/*正常*/

<!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>
        .font-weight .one{
            font-style: normal;
        }
        .font-weight .two{
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="font-weight">
        <div class="one">
            我是直的
        </div>
        <div class="two">
            我是弯的（
        </div>
    </div>
</body>
</html>

2. 文本属性

文本有很多属性，比如文本的颜色、文本的对齐、文本的装饰、文本的缩进。下面就让我们开始文本属性的学习。

2.1 知识补充-认识RGB

众所周知，显示屏会显示颜色的都是由RGB三原色组成的，由它们构成我们看到的所有颜色。如果你不了解，接下来让我们认识RGB 什么是RGB 我们的显示屏是由非常多的像素组成的，每个像素可以被视为一个极小的点，这个点能反映一个具体的颜色。我们使用R(red),G(green),B(blue)的方式来表示颜色，这三种颜色按照不同的比例搭配们就可以混合出各种颜色，使用称为3原色。计算机中针对R\G\B三个的分量，分别使用一个字节表示（8个比特位，表示的范围是0-255，16进制表示00-FF）. 数值越大，表示该分量的颜色就越浓，255，255，255表示白色，0，0，0表示黑色。

2.2 设置文本颜色

设置文本颜色由3种格式：

直接写单词。
16进制写法
RGB方式

color:red;
color:#ff0000;
color:rgb(255,0,0);

<!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>
        .color{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="color">
        你能教教小菲怎么骂人吗？
        后面忘了。
    </div>
</body>
</html>

2.3 文本对齐

每次写论文，都有各种对齐格式要求，但是都是在word上完成的，这次使用CSS看看。语法：

text-align:[值];

center：居中对齐。
left：左对齐。
right：右对齐。

<!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>
        h1{
            color: red;
            text-align: center;
        }
        .text-align .one{
            text-align: center;
        }
        .text-align .two{
            text-align: left;
        }
        .text-align .three{
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>虚拟偶像推荐</h1>
    <div class="text-align">
        <div class="one">
            星瞳_Official
        </div>
        <div class="two">
            永雏塔菲
        </div>
        <div class="three">
            猫雷NyaRu_Official
        </div>
    </div>
</body>
</html>

2.4 文本装饰

常用的文本装饰有：下划线、上划线、删除线。

text-decoration:[值];

underline：下划线。
none：无。(可以取消链接的下划线)
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>
        .text-decorate .one {
        text-decoration: none;
        }
        .text-decorate .two {
        text-decoration: underline;
        }
        .text-decorate .three {
        text-decoration: overline;
        }
        .text-decorate .four {
        text-decoration: line-through;
        }
        </style>
</head>
<body>
    <div class="text-decorate">
        <div class="one">啥都没有</div>
        <div class="two">下划线</div>
        <div class="three">上划线</div>
        <div class="four">删除线</div>
    </div>
</body>
</html>

2.5 文本缩进

控制段落的首行缩进。

text-indent: [值];

单位可以使用px或者em。
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>
        .one {
            color: pink;
            text-indent: 2em;
        }
        .two {
            color: pink;
            text-indent: -2em;
        }
    </style>
</head>

<body>
    <div class="one">神仙颜值永雏塔菲💙人间理想永雏塔菲💙
        温柔体贴永雏塔菲💙治愈微笑永雏塔菲💙
        不可替代永雏塔菲💙深得我心永雏塔菲💙
        星辰皓月永雏塔菲🔵星光闪闪永雏塔菲🔵
        一见钟情永雏塔菲🔹宝藏女孩永雏塔菲🔹
        今生挚爱永雏塔菲🔷余生只爱永雏塔菲🔷有永雏塔菲的日常皆是奇迹他那湛蓝的双眸仿佛能装下星辰大海永雏塔菲我爱你虽然我们无法相见但是我相信总有一天我们会见面的你就是我的精神支柱我的世界没有你将会是一片黑暗是你带我走出的低谷期是你永雏塔菲让我对未来有了希望无论别人如何议论我我都还是喜欢你永雏塔菲我爱你😍😍😍😘😘😘🥰🥰🥰😭😭😭
    </div>
    <div class="two">神仙颜值永雏塔菲💙人间理想永雏塔菲💙
        温柔体贴永雏塔菲💙治愈微笑永雏塔菲💙
        不可替代永雏塔菲💙深得我心永雏塔菲💙
        星辰皓月永雏塔菲🔵星光闪闪永雏塔菲🔵
        一见钟情永雏塔菲🔹宝藏女孩永雏塔菲🔹
        今生挚爱永雏塔菲🔷余生只爱永雏塔菲🔷有永雏塔菲的日常皆是奇迹他那湛蓝的双眸仿佛能装下星辰大海永雏塔菲我爱你虽然我们无法相见但是我相信总有一天我们会见面的你就是我的精神支柱我的世界没有你将会是一片黑暗是你带我走出的低谷期是你永雏塔菲让我对未来有了希望无论别人如何议论我我都还是喜欢你永雏塔菲我爱你😍😍😍😘😘😘🥰🥰🥰😭😭😭
    </div>
</body>

</html>

2.6 设置行高

行高指的是上下文行之间的基线距离。 HTML中展示文字涉及到这几个基准线：

顶线
中线
基线
底线

语法：

line-height:[值];

注意：行高=上边距+下边距+字体大小。

上下边距是相同的，此处字体大小是16px，行高40px，上下边距分别是12px。

<!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>
        .line-height .one {
            line-height: 40px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="line-height">
        <div>
            上面行
        </div>
        <div class="one">
            中间行
        </div>
        <div>
            下面行
        </div>
    </div>
</body>

</html>

实现文字居中对齐,行高等于元素高度即可。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .line-height .two {
            height: 100px;
            line-height: 100px;
        }
    </style>
    <div class="line-height">
        <div class="two">
            文本垂直居中
        </div>
    </div>
</body>

</html>