5 CSS字体属性

1 font-family

font-family：设置字体样式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>字体属性</title>
	<style type="text/css">
		body{
			font-family: "黑体","微软雅黑";
		}
	</style>
</head>
<body>
	Mjj

</body>
</html>

如果首选字体在电脑中没有安装，就选用备用字体，直到最后还是没有就用系统默认的

执行顺序为：从左到右

如果设置成inherit，则表示继承父元素的字体。

2 font-size

font-size：字体大小

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>字体属性</title>
	<style type="text/css">
		body{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<!-- 像素单位：px em rem -->
	Mjj

</body>
</html>

如果设置成inherit表示继承父元素的字体大小值。

3 color

设置内容的字体颜色。

支持三种颜色值：

  • 十六进制值 如: ＃FF0000
  • 一个RGB值 如: rgba(255,0,0) r：红 g：绿 b：蓝 a：透明都 rgb范围（0~255）a（0-1）
  • 颜色的名称 如: red
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>字体属性</title>
	<style type="text/css">
		body{
			color: rgb(255, 0, 0);
			color: #FF0000;
			color: red;
		}
	</style>
</head>
<body>
	<!-- 像素单位：px em rem -->
	Mjj

</body>
</html>

4 font-style

Istalic：斜体

body{
  font-style: italic; 
}

5 font-weight

字重（字体粗细）。

取值范围：

image

同样：

<strong>MJJ</strong>  <!-- 加粗 -->
<em>MHH</em>  <!-- 斜体 -->

<head>
	<meta charset="utf-8">
	<title>字体属性</title>
	<style type="text/css">
		body{
			font-weight: 400;
		}
	</style>
</head>
<body>
	<strong>MJJ</strong>
	<em>MJJ</em>

</body>

6 font综合

font简写：

p{
text-indent: 2em;
/*font-size: 20px;*/
/*line-height: 40px;*/
letter-spacing: 5px;
word-spacing: 10px;
font: 20px / 3 "黑体"，"雅黑"; 
} 
font :字体大小 / 行高 字体
posted @ 2022-08-04 16:20  角角边  Views(75)  Comments(0)    收藏  举报