W3School-CSS 字体(font)实例

CSS 字体(font)实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline） 实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01设置文本的字体

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01设置文本的字体</title>
		<style type="text/css">
			body {
				background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151207120828824-739848359.jpg);			
			}
			p.serif {font-family: "Times New Roman",Georgia,Serif;}
			p.sansserif {font-family: Arial,Verdana,Sans-serif;}
		</style>
	</head>
	<body>
		<h1>CSS font-family</h1>
		<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
		<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
	</body>
</html>

02设置字体尺寸

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>02设置字体尺寸</title>
		<style type="text/css">
			body {
				background-color: #CCFFFF;
			}
			
			h1 {
				font-size: 300%;
			}
			
			h2 {
				font-size: 200%;
			}
			
			p {
				font-size: 100%;
			}
		</style>
	</head>

	<body>
		<h1>我是标题1</h1>
		<h2>我是标题2</h2>
		<p>我是一个段落</p>
	</body>

</html>

03设置字体风格

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>03设置字体风格</title>
		<style type="text/css">
			body {
				background-color: #CCFFFF;
			}
			
			h1 {
				font-style: normal;
			}
			
			h2 {
				font-style: italic;
			}
			
			p {
				font-style: oblique;
			}
		</style>
	</head>

	<body>
		<h1>One always has time enough, if one will apply it well.</h1>
		<h2>One always has time enough, if one will apply it well.</h2>
		<p>One always has time enough, if one will apply it well.</p>
	</body>

</html>

04设置字体的异体

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>04设置字体的异体</title>
		<style type="text/css">
			body {
				background-color: #CCFFFF;
			}
			
			p.normal {
				font-variant: normal;
			}
			
			p.small {
				font-variant: small-caps;
			}
		</style>
	</head>

	<body>

		<p class="normal">One always has time enough, if one will apply it well.</p>
		<p class="small">One always has time enough, if one will apply it well.</p>
	</body>

</html>

05设置字体的粗细

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>05设置字体的粗细</title>
		<style type="text/css">
			body {
				background-color: #CCFFFF;
			}
			
			p.normal {
				font-weight: normal;
			}
			
			p.thick {
				font-weight: bold;
			}
			
			p.thicker {
				font-weight: 900;
			}
		</style>
	</head>

	<body>

		<p class="normal">Where is the 哈哈 point?</p>
		<p class="thick">Where is the 哈哈 point?</p>
		<p class="thicker">Where is the 哈哈 point?</p>
	</body>

</html>

06所有字体属性在一个声明之内

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>06所有字体属性在一个声明之内</title>
		<style type="text/css">
			body {
				background-color: #CCFFFF;
			}
			
			p.sty1 {
				font: italic arial, sans-serif;
			}
			
			p.sty2 {
				font: italic bold 20px/100px arial, sans-serif;
			}
		</style>
	</head>

	<body>

		<p class="sty1">Where is the 哈哈 point?</p>
		<p class="sty2">Where is the 哈哈 point?</br>
		   (我的大小20px行高100px)</p>
	</body>

</html>

CSS字体实例总结

posted @ 2015-12-07 12:09  IamHoey  阅读(521)  评论(0)  编辑  收藏  举报