CSS文字样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45819386/article/details/108556477

CSS中文字样式常用属性

1.font-family：设置字体类型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css中文字样式常用属性</title>
	    <style type="text/css";>
		h1{font-family:"楷体";}
		h2{font-family:"宋体";}
		h3{font-family:"华文琥珀";}
		h4{font-family:"华文彩云";}
		</style>
	</head>
	<body>		
	<h1>喜欢本人博客的，点赞加关注</h1>
	<h2>喜欢本人博客的，点赞加关注</h2>
	<h3>喜欢本人博客的，点赞加关注</h3>
	<h4>喜欢本人博客的，点赞加关注</h4>
	</body>
</html>

2.font-size：设置字号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css中文字样式常用属性</title>
	    <style type="text/css";>
		p1{font-size:30px;}
		p2{font-size:20px;}
		p3{font-size:2em;}
		p4{font-size:3em;}
		</style>
	</head>
	<body>		
	<p1>喜欢本人博客的，点赞加关注<p1>
	<p2>喜欢本人博客的，点赞加关注</p2>
	<h3>喜欢本人博客的，点赞加关注</h3>
	<h4>喜欢本人博客的，点赞加关注</h4>
	</body>
</html>

在这里插入图片描述

注明：font-size单位有像素（px）和百分比（%）两种

3.font-weight：设置文本的粗细

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css中文字样式常用属性</title>
	    <style type="text/css";>
	    p1{font-weight:bold;}
	    p2{font-weight:normal;}
		</style>
	</head>
	<body>		
	<p1>喜欢本人博客的，点赞加关注<p1>
	<p2>喜欢本人博客的，点赞加关注</p2>
	</body>
</html>

在这里插入图片描述
4.行高：line-height

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css中文字样式常用属性</title>
	    <style type="text/css";>
	    .gx{line-height:30px;}
		</style>
	</head>
	<body>	
	<div class="gx">	
      <p>有个女仔令我思想变得大个</p>
      <p>当初我幼稚行为对你犯下大错</p>
	  <p>你话我唔识谂 用钱买无用饰品</p>
	  <p>你慢慢心淡觉得我对感情唔认真</p>
	  <p>要知道男人系天生嘅小朋友</p>
	  <p>小朋友弱点会忽略另一半感受</p>
	  <p>要改正好简单我只系欠调教</p>
	  <p>经历得多反而可以令到爱意浓厚</p>
	</div>
	</body>
</html>

在这里插入图片描述