css入门3 字体样式

最新推荐文章于 2024-05-04 13:53:08 发布

Lexi_Alexander

最新推荐文章于 2024-05-04 13:53:08 发布

阅读量162

点赞数 1

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

本文链接：https://blog.csdn.net/Lexi_Alexander/article/details/109004746

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css入门3 字体样式

1字体样式简介

字体样式属性

属性	说明
font-family	字体类型
font-size	字体大小
font-style	字体风格
color	字体颜色

除了字体颜色，其它字体属性都是以font前缀开头的，其中font是字体的意思

1.1字体类型：font-family

在css中，可以使用font-family属性定义字体类型
语法

font-family: 字体1,字体2,···,字体N;

举例：设置一种字体

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		<title>设置一种字体</title>
		<style type="text/css">
			#div1{font-family: Arial;}
			#div2{font-family: "times new roman";}
			#div3{font-family: "微软雅黑";}
		</style>
	</head>
	<body>
		<div id="div1">Arial</div>
		<div id="div2">Times New Roman</div>
		<div id="div3">微软雅黑</div>
	</body>
</html>

运行结果：
在这里插入图片描述

1.2字体大小：font-size

语法

font-size:参数值;

说明
font-size属性取值有两种，一种是“关键字”，如small，medium，large等，另一种方法是“像素值”，如10px、16px，20px等
px是什么
px全程pixel（像素）
举例：使用像素为单位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>font-size px使用</title>
<style type="text/css">
	#p1{font-size: 10px;}
	#p2{font-size: 16px;}
	#p3{font-size: 20px;}
</style>
</head>
<body>
	<p id="p1">字体大小为10px</p>
	<p id="p2">字体大小为16px</p>
	<p id="p3">字体大小为20px</p>
</body>
</html>

运行结果：
在这里插入图片描述

1.3字体粗细：font-weight

fontweight属性来定义字体粗细。
语法

font-weight:取值;

说明
font-weight取值有两种：一种是100~900的值，另一种是关键字，取值如图所示

属性值	说明
mormal	正常（默认值）
lighter	较细
bold	较粗
bolder	很粗

举例：font-weight取值为“数值”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>font-weight取值为值</title>
		<style type="text/css">
			#p1{font-weight: 100;}
			#p2{font-weight: 200;}
			#p3{font-weight: 500;}
			#p4{font-weight: 900;}
		</style>
	</head>
	<body>
		<p id="p1">字体粗细为100</p>
		<p id="p2">字体粗细为200</p>
		<p id="p3">字体粗细为500</p>
		<p id="p4">字体粗细为900</p>
	</body>
</html>

运行结果：
在这里插入图片描述

1.4字体风格：font-style

语法

font-style:取值;

说明
font-style属性取值如图所示

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>font-style</title>
		<style type="text/css">
			#p1{font-style: normal;}
			#p2{font-style: italic;}
			#p3{font-style: oblique;}
		</style>
	</head>
	<body>
		<p id="p1">字体样式为normal</p>
		<p id="p2">字体样式为italic</p>
		<p id="p3">字体样式为oblique</p>
	</body>
</html>

运行结果：
在这里插入图片描述

1.5字体颜色：color

语法

color:值;

说明
color取值有两种，一种是关键字，另一种是16进制rgb值
举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>color</title>
		<style type="text/css">
			#p1{color:red}
			#p2{color: #03FCA1;}
		</style>
	</head>
	<body>
		<p id="p1">字体颜色为red</p>
		<p id="p2">字体颜色为#03FAC1</p>
	</body>
</html>

运行结果：
在这里插入图片描述

Lexi_Alexander

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门3 字体样式

css入门3 字体样式1字体样式简介字体样式属性属性说明font-family字体类型font-size字体大小font-style字体风格color字体颜色除了字体颜色，其它字体属性都是以font前缀开头的，其中font是字体的意思1.1字体类型：font-family在css中，可以使用font-family属性定义字体类型语法font-family: 字体1,字体2,···,字体N;举例：设置一种字体<!DOCTYPE &g
复制链接

扫一扫