css文本样式1

最新推荐文章于 2024-07-25 08:14:42 发布

this_is_art_of_code

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量344

点赞数 1

分类专栏： css 文章标签：字体 css

本文链接：https://blog.csdn.net/qq_28596151/article/details/72972623

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css的文本字体

css的文本设置可以根据我们实际的项目需要对对应的区域的字体进行大小等设置。

一、文本的属性名的总汇

1.1：font-size 设置文本字体的大小
1.2：font-variant 设置英文字体是否转化为小型大写
1.3：font-style 设置文本字体是否倾斜
1.4：font-weight 设置文本字体是否加粗
1.5：font-family 设置font字体
1.6：font 设置字体样式复合写法
1.7：@font-face 设置web字体

二、字体设置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本样式</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>我是p标签</p>
    <div>我是div标签</div>
</body>
</html>

2.1：font-size：设置文本字体的大小

p{
    font-size:50px;
}
div{
    font-size:30px;
}

font-size属性对应的主要有以下三种方式：
第一种：
xx-small < x-small < small < medium < large < x-large < xx-large
以上就是从左到右字体依次变大并且是固定值。

.p1{
    font-size:xx-small;
}
.p2{
    font-size:x-small;
}
.p3{
    font-size:small;
}
.p4{
    font-size:medium;
}
.p5{
    font-size:large;
}
.p6{
    font-size:x-large;
}
.p7{
    font-size:xx-large;
}

第二种 font-size的值为:smaller或者larger
含义：设置字体相对于父元素字体的大小.
第三种：数字+px 使用 CSS 像素长度设置字体大小
比如：font-size:30px;
这种给字体设置大小的方式比较常用。
第四种：数字+% 使用相对于父元素字体的百分比大小
比如：font-size:50%;
注意：上面的设置相对于父元素字体的百分比大小的是子元素相对父元素。处在body中的元素父元素就是body

2.2：font-variant 设置英文字体是否转化为小型大写

normal 表示如果以小型大写状态，让它恢复小
small-caps 让小写字母以小型大写字母显示。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本样式</title>
    <style>
        .p1{
            font-variant: normal;
        }
        .p2{
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <p class="p1">hello welcome to my home</p>
    <p class="p2">hello welcome to my home</p>
    <p class="p3">HELLO WELCOME TO MY HOME</p>
</body>
</html>

解释：p1是小写字母，样式设置为正常。类p1不会有什么变化。
p2设置样式为小型大写字母。p3没有进行样式设置，就是大型的大写字母。效果图对比如下：
这里写图片描述

2.3 font-style 设置字体是否倾斜

font-style的属性的属性值有一下三种：
1：normal 表示让倾斜恢复到正常状态
2：italic 表示使用倾斜
3：oblique 表示让文字倾斜。区别在没有使用倾斜时使用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本样式</title>
    <style>
        p{
            font-style:italic;
        }
        .p1{
            font-style:normal;
        }
    </style>
</head>
<body>
    <p class="p1">欢迎回来 hello welcome to my home</p>
    <p class="p2">欢迎回来 hello welcome to my home</p>
    <p class="p3">欢迎回来 HELLO WELCOME TO MY HOME</p>
</body>
</html>

p2，p3，倾斜，然后p1正常。效果图如下：
这里写图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本样式</title>
    <style>
        p{
            font-size:30px;
            font-style:normal;
        }
        .p1{
            font-style:oblique;
        }
    </style>
</head>
<body>
    <p class="p1">欢迎回来 hello welcome to my home</p>
    <p class="p2">欢迎回来 hello welcome to my home</p>
    <p class="p3">欢迎回来 HELLO WELCOME TO MY HOME</p>
</body>
</html>

p2，p3正常，然后p1是倾斜的。效果如下图：
这里写图片描述
有兴趣的朋友可以是一下同时设置三种值的情况。

2.4 font-weight：加粗

我们简单点理解就是对字体的加粗效果。该属性的属性值有：
1：normal 正常字体
2：bold 加粗效果的字体
3：bolder 比加粗在粗一点
4：lighter 比正常更细点
5：100~900之间的数字：600以及600以后会有加粗效果。在浏览器支持的情况下会随着值的增大字体加粗效果会越来越明显。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本样式</title>
    <style>
        .p1{
            font-weight:normal;
        }
        .p2{
            font-weight:bold;
        }
        .p3{
            font-weight:bolder;
        }
        .p4{
            font-weight:lighter;
        }
        .p5{
            font-weight:300;
        }
        .p6{
            font-weight:700;
        }
    </style>
</head>
<body>
    <p class="p1">欢迎回来 hello welcome to my home</p>
    <p class="p2">欢迎回来 hello welcome to my home</p>
    <p class="p3">欢迎回来 hello welcome to my home</p>
    <p class="p4">欢迎回来 hello welcome to my home</p>
    <p class="p5">欢迎回来 hello welcome to my home</p>
    <p class="p6">欢迎回来 hello welcome to my home</p>
</body>
</html>

效果图如下：
这里写图片描述
朋友可以根据自己的习惯采用自己喜欢的方式进行对字体加粗的设置。我本人比较喜欢直接设置为bold.

2.5 font-family 字体书写名称

比如书写字体采用宋体等。比如下面设置p标签的字体为楷体。

p{
    font-family:楷体;
}

你还可以为字体设置备用字体，比如

p{
    font-family:楷体 微软雅黑 仿宋;
}

上面设置如果你的电脑没有楷体会采用微软雅黑，如果微软雅黑也没有会采用仿宋，如果仿宋也没有会采用电脑或者浏览器自己默认的字体。

2.6 font 进行一次多样式字体设置

直接使用font属性来对字体进行组合式的样式设置。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本样式</title>
    <style>
        .p1{
            font:30px 楷体;
        }
    </style>
</head>
<body>
    <p class="p1">欢迎回来 hello welcome to my home</p>
</body>
</html>

使用font对指定标签内容进行字体大小以及字体名称的设置，效果图如下：
这里写图片描述

我在这里需要注明：在使用font这字体标签的时候，字体样式的设置顺序需要将字体大小还有字体名称最好放在最后面，以防止出现设置的字体样式没有效果展示的现象出现。

this_is_art_of_code

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css文本样式1

css的文本字体css的文本设置可以根据我们实际的项目需要对对应的区域的字体进行大小等设置。一、文本的属性名的总汇1.1：font-size 设置文本字体的大小 1.2：font-variant 设置英文字体是否转化为小型大写 1.3：font-style 设置文本字体是否倾斜 1.4：font-weight 设置文本字体是否加粗 1.5：font-fam
复制链接

扫一扫

专栏目录