CSS中的字体样式

字体样式的作用:针对字体本身的一些修饰相关的样式,如字体的颜色,字体的大小等

源代码如下:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">
		<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.box{
			width:500px;
			height:500px;
			
		}
		li{
			border:1px solid red;
			padding:10px;
			margin:10px;
		}
		.color{
			color:red;
		}
		.font-weight{
			font-weight:bold;
			/*
			关键字：
				bold 设置加粗
				normal 默认不加粗
			数值：（不带单位）
				100~900  大于600等同于bold  小于600等同于normal
			*/
		}
		.font-size{
			font-size:50px;
			/*
				谷歌默认字体大小为16px 最小值为12px
				固定的像素值 理论无上限
				不同浏览器的是有下线的
				百分比：参考父元素的字体大小
				em单位 
					并不是具体的多少，是根据当前元素的字体大小有关系
					当前元素字体大小的倍数
				没有设置字体大小的时候，默认字体大小为父元素的字体大小
			*/

		}	
		.font-style{
			font-style:italic;
			/*
				italic 字体斜体
				normal 默认值不斜体
			*/
		}
		.font-family{
			font-family:"simsun"; /* 宋体 */
			font-family:"小篆",simsun,sinHei;

			/* 默认为微软雅黑---Microsoft yahei  html不区分大小写
				值
					1.中文英文两种写法
					2.关于引号，英文的值并且中间有空格的时候必须带引号，其他时候可带可不带
					3.可以通过逗号隔开，写多个备用的字体
			*/
		}
		.line-height{
			font-size:20px;
			line-height:2; /* 不带单位是倍数值 */
			/* line-height:50px; */

			/*
				设置一行文字所占的高度
					文字会在行高的高度居中
				px固定的像素值，
				直接写数值，代表字体大小的倍数
			*/
		}
		.font{
			/*
				顺序：font:字体加粗 字体风格 字体大小/字体行高 字体类型;
					字体颜色不能写在复合样式中
					可以缺省，不需要的可以不写
						最少得保留字体大小和字体类型
					顺序可以换，建议固定一个顺序
			*/
			font:bold italic 20px/50px 华文彩云;
			color:red;
			font:30px "华文彩云";  /* 缺省 最少得保留字体大小和字体类型 */
		}
		</style>
	</head>
	<body>
		<ul class="box">
			<li class="color">字体颜色 color</li>
			<li class="font-weight">字体粗细 font-weight</li>
			<li class="font-size">字体大小 font-size</li>
			<li class="font-style">字体斜体 font-style</li>
			<li class="font-family">字体类型 font-family</li>
			<li class="line-height">字体行高line-height</li>
			<li class="font">字体复合样式</li>
		</ul>

	</body>
</html>

效果图如下
CSS中的字体样式
在复合写法中,其他都可以缺省,但是字体大小和字体类型不能缺省

CSS中的字体样式

CSS中的字体样式

相关推荐