JavaWeb_CSS(14)_文字处理_字体和字号

版权声明:如需转载,请注明出处 https://blog.csdn.net/qq_36260974/article/details/88430292

文字处理

字体

示例代码
<!DOCTYPE html>
<html>

	<head>
	
		<meta charset="UTF-8">
		
		<title>www.weiyuxuan.com</title>

		<style type="text/css">
		
			h1
			{
				font-family: 黑体;
			}
			.author
			{
				font-family: 宋体;
			}
			.content
			{
				font-family: 楷体;
			}
			
		</style>
		
	</head>
	
	<body>
	
	<h1>赤壁赋</h1>
	
	<hr/>
	
	<p class="author">作者:苏轼</p>
	
	<p class="content">&nbsp;&nbsp;壬戌之秋,七月既望,苏子与客泛舟游于赤壁之下。清风徐来,水波不兴。举酒属客,诵明月之诗,
	歌窈窕之章。少焉,月出于东山之上,徘徊于斗牛之间。白露横江,水光接天。纵一苇之所如,凌万顷之茫然。浩浩乎如凭虚御风,
	而不知其所止;飘飘乎如遗世独立,羽化而登仙。<br/>&nbsp;&nbsp;于是饮酒乐甚,扣舷而歌之。歌曰:“桂棹兮兰桨,击空明兮溯流光。渺渺兮予怀,
	望美人兮天一方。”客有吹洞箫者,倚歌而和之。其声呜呜然,如怨如慕,如泣如诉;余音袅袅,不绝如缕。舞幽壑之潜蛟,泣孤舟之嫠妇。
	<br/>&nbsp;&nbsp;苏子愀然,正襟危坐而问客曰:“何为其然也?”客曰:“月明星稀,乌鹊南飞,此非曹孟德之诗乎?西望夏口,东望武昌,山川相缪,
	郁乎苍苍,此非孟德之困于周郎者乎?方其破荆州,下江陵,顺流而东也,舳舻千里,旌旗蔽空,酾酒临江,横槊赋诗,固一世之雄也;
	而今安在哉!况吾与子渔樵于江渚之上,侣鱼虾而友麋鹿,驾一叶之扁舟,举匏樽以相属。寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,
	羡长江之无穷。挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。”<br/>&nbsp;&nbsp;苏子曰:“客亦知夫水与月乎?逝者如斯,而未尝往
	也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也,而又何羡乎?且夫
	天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭。
	是造物者之无尽藏也,而吾与子之所共适。”<br/>&nbsp;&nbsp;客喜而笑,洗盏更酌。肴核既尽,杯盘狼藉。相与枕藉乎舟中,不知东方之既白。</p>
		
	</body>
	
</html>

结果图:
在这里插入图片描述

文字大小

大小单位

  • px
    相对长度单位。像素(Pixel)。
    像素是相对于显示器屏幕分辨率而言的。譬如,windows 的用户所使用的分辨率一般是 96 像素/英寸。而 MAC 的用户所使用的分辨率一般是 72 像素/英寸。
  • em
    相对长度单位。相对于当前对象内文本的字体尺寸。
    如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • ex
    相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
    如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • pt
    绝对长度单位。点(Point)。
    1in = 2.54cm = 25.4 mm = 72pt = 6pc
  • pc
    绝对长度单位。派卡(Pica)。相当于我国新四号铅字的尺寸。
    1in = 2.54cm = 25.4 mm = 72pt = 6pc
  • in
    绝对长度单位。英寸(Inch)。
    1in = 2.54cm = 25.4 mm = 72pt = 6pc
  • mm
    绝对长度单位。毫米(Millimeter)。
    1in = 2.54cm = 25.4 mm = 72pt = 6pc
  • cm
    绝对长度单位。厘米(Centimeter)。
    1in = 2.54cm = 25.4 mm = 72pt = 6pc
示例代码
<!DOCTYPE html>
<html>

	<head>
	
		<meta charset="UTF-8">
		
		<title>www.weiyuxuan.com</title>
		
		<style>
		
			p.inch
			{ 
				font-size: 0.5in; 
			}
			p.cm
			{ 
				font-size: 0.5cm; 
			}
			p.mm
			{ 
				font-size: 4mm; 
			}
			p.pt
			{ 
				font-size: 12pt;
			}
			p.pc
			{ 
				font-size: 2pc; 
			}
			p.px
			{ 
				font-size: 12px; 
			}
		
		</style>		
		
	</head>
	
	<body>
	
	<h1> 字体大小 </h1>
	
	<hr/>
	
	<p class="inch">文字大小,0.5in  </p>
	<p class="cm">文字大小,0.5cm    </p>
	<p class="mm">文字大小,4mm      </p>
	<p class="pt">文字大小,12pt		</p>
	<p class="pc">文字大小,2pc		</p>
	<p class="px">文字大小,12px		</p>
	
	</body>
	
</html>

结果图:
在这里插入图片描述
如有错误,欢迎指正!

猜你喜欢

转载自blog.csdn.net/qq_36260974/article/details/88430292
今日推荐