css基本样式之字体样式

最新推荐文章于 2024-04-30 06:47:19 发布

SSS4362

最新推荐文章于 2024-04-30 06:47:19 发布

阅读量1k

点赞数 3

分类专栏： java web基础知识文章标签： css 前端字体样式

本文链接：https://blog.csdn.net/SSS4362/article/details/125415871

版权

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css基本样式之字体样式

1.代表字体样式的单词

font,字体样式前面都加上font-

2.设置字体大小

2.1 语法

语法: font-size:像素值;

与font标签(html中)里面的size属性不同,这里的font-size设置有多大,字体就有多大

font标签里面的size属性最大只能为7

注意:font-size不能同时设置多个像素值,如font-size:10px,20px;这种情况

其中font-size中的值越小代表字体越小,值越大代表字体越大

2.2 不加font-size的效果

在这里插入图片描述

2.3 加font-size的效果

在这里插入图片描述

2.4 源代码

<!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>font-size的应用</title>
    <style type="text/css">
         p{
            font-size:100px;
         }
    </style>
	</head>
	<body>
     	<p>富强</p>
	</body>
</html>

3.设置字体的风格

3.1语法

语法: font-family:"字体1","字体2"...."字体n";
多个字体之间用逗号隔开
默认为微软雅黑

注意:网页会按照字体风格的书写顺序来去电脑里面找是否拥有该字体,若没找到,就继续往后面找,找到了就把该字体风格进行渲染出来。

那么,就来了一个问题,如何判断电脑里面有哪几种字体呢?

我们以windows系统为例子

第一步打开记事本文件
在这里插入图片描述

此时就进入了第二步所在的界面

第二步找到记事本格式里面的字体栏
在这里插入图片描述

点击字体栏后就进入了第三步操作的字体界面

第三步在字体界面中,一般所有的字体都为在字体栏那里(上下移动)

若未找到,就要点击显示更多字体,去那里找才行
在这里插入图片描述

3.2 不加font-family的效果

在这里插入图片描述

3.3 加font-family的效果

在这里插入图片描述

3.4 源代码

<!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>font-family的应用</title>
    <style type="text/css">
         p{
            font-family: "楷体";
         }
    </style>
</head>
<body>
     <p>富强</p>
</body>
</html>

4.设置字体的粗细

4.1 语法

font-weight:单词或数字(100-900);
当为单词时,常见有normal(400),bold(700)，bolder(900)三种
其括号后面代表与单词等价的数字,如400就先当与先单词normal
默认情况为normal

4.2 不加font-weight的效果

在这里插入图片描述

4.3 加font-weight的效果

在这里插入图片描述

4.4 源代码

<!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>font-family的应用</title>
    <style type="text/css">
         p{
            font-weight: bolder;
         }
    </style>
</head>
<body>
     <p>富强</p>
</body>
</html>

5.设置字体垂直方向上的样式(倾斜什么的)

5.1 语法

font-style: italic;
/* 显示的效果应该字体变成斜体了 
normal(默认,正常),oblique(倾斜),italic(斜体),
*/

5.2 不加font-style的效果
在这里插入图片描述

5.3 加font-style的效果
在这里插入图片描述

5.4 源代码

<!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>font-family的应用</title>
    <style type="text/css">
         p{
           font-style:italic;
         }
    </style>
</head>
<body>
     <p>富强</p>
</body>
</html>

6.合并格式的书写

语法: font: font-style font-weight font-size/line-height "font-family"
当line-height等于套着的那个盒子的高度时,垂直居中

6.1 源代码

<!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>font合并格式的应用</title>
    <style type="text/css">
         p{
           font:italic bolder 10px/30px "楷体","微软雅黑";
           background-color: gray;
           width: 100px;
           height: 30px;
           color: red;
         }
    </style>
</head>
<body>
     <p>富强</p>
</body>
</html>