CSS字体样式

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

舒眉

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

阅读量243

点赞数

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

本文链接：https://blog.csdn.net/sunshine_0880/article/details/78069767

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.font-size 字体大小常用像素px。

相对长度大小	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p>字体样式</p>
</body>
</html>

2.font-family 字体

有些可以用汉字表示，比如“宋体”、“微软雅黑”。可以用英文，还可以用unicode字体。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			font-size: 20px;
			font-family: "宋体";
		}
	</style>
</head>
<body>
	<p>字体样式</p>
</body>
</html>

3.font-weight 字体粗细，默认值为normal

取值：

normal：正常字体，或者用400表示。

bold：粗体，或者用700表示。

bolder：定义比继承值更重的值。

lighter：定义比继承值更轻的值。

另一种取值：用数字代替单词，有，100,200,300,400,500,600,700,800,900。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			font-size: 20px;
			font-family: "宋体";
			font-weight: 400;
		}
	</style>
</head>
<body>
	<p>字体样式</p>
</body>
</html>

4.font-style 倾斜

默认取值为normal。

normal：正常字体。

italic：斜体。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			font-size: 20px;
			font-family: "宋体";
			font-weight: 400;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>字体样式</p>
</body>
</html>

5.综合方式

font ：font-style font-weight font-size/line-height font-family 必须按照这个顺序，其中后两个font-size，font-family不能省略。不设置的取默认值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			font: italic 400 20px "宋体";
		}
	</style>
</head>
<body>
	<p>字体样式</p>
</body>
</html>