CSS的字体样式

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

牛哄哄的柯南

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

阅读量4.2k

点赞数 11

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43883917/article/details/109346863

版权

CSS 专栏收录该内容

12 篇文章 5 订阅

订阅专栏

CSS的字体样式

字体样式

字体样式

属性名	含义	举例
font-family	设置字体类型	font-family:“隶书”
font-size	设置字体大小	font-size:12px
font-style	设置字体风格	font-style:italic
font-weight	设置字体的粗细	font-weight:bold
font	设置所有字体属性	font:italic bold 36px “宋体”

font-family属性

.p1{ font-family: "隶书";}
.p2{font-family: "黑体"; }
.p3{ font-family: "Arial Black"; }

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{ font-family: "隶书";}
			.p2{font-family: "黑体"; }
			.p3{ font-family: "Arial Black"; }
		</style>
		<title></title>
	</head>
	<body>
		<h1>不加修饰的一级标题</h1>
		<h1 class="p1">一级标题隶书</h1>
		<h1 class="p2">一级标题黑体</h1>
		<h1 class="p3">一级标题Arial Black</h1>
	</body>
</html>

效果截图：
在这里插入图片描述

font-size属性

单位：px（像素）

.p1{font-size: 10px; }

.p2{font-size: 20px;}

.p3{font-size: 30px;}

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font-size: 10px; }
			
			.p2{font-size: 20px;}
			
			.p3{font-size: 30px;}
		</style>
		<title></title>
	</head>
	<body>
		<h1>这是正常的一级标题</h1>
		<h1 class="p1">这是10px的一级标题</h1>
		<h1 class="p2">这是20px的一级标题</h1>
		<h1 class="p3">这是30px的一级标题</h1>
	</body>
</html>

效果截图：
在这里插入图片描述

font-style属性

normal、italic和oblique

.p1{font-style: normal; }
			
.p2{font-style: italic;}

.p3{font-style: oblique;}

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font-style: normal; }
			
			.p2{font-style: italic;}
			
			.p3{font-style: oblique;}
		</style>
		<title></title>
	</head>
	<body>
		<h1>这是正常的一级标题</h1>
		<h1 class="p1">这是normal的一级标题</h1>
		<h1 class="p2">这是italic的一级标题</h1>
		<h1 class="p3">这是oblique的一级标题</h1>
	</body>
</html>

效果截图：
在这里插入图片描述

font-weight属性

normal 默认值，定义标准的字体。
bold 粗体字体。

.p1{font-weight: normal; }
			
.p2{font-weight: bold ;}

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font-weight: normal; }
			
			.p2{font-weight: bold ;}
			
		</style>
		<title></title>
	</head>
	<body>
		<p>这是正常的字体</p>
		<p class="p1">这是normal的字体</p>
		<p class="p2">这是bold的字体</p>
	</body>
</html>

效果截图：
在这里插入图片描述

font属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

.p1{font:oblique bold 12px "楷体"; }

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font:oblique bold 12px "楷体"; }
			
			
			
		</style>
		<title></title>
	</head>
	<body>
		<p>这是正常的字体</p>
		<p class="p1">这是font:oblique bold 12px "楷体";的字体</p>
		
	</body>
</html>