JavaWeb_CSS（14）_文字处理_字体和字号

最新推荐文章于 2023-03-20 23:27:39 发布

魏宇轩

最新推荐文章于 2023-03-20 23:27:39 发布

阅读量2.7k

点赞数

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 文字处理

本文链接：https://blog.csdn.net/qq_36260974/article/details/88430292

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

一、字体

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">		
		<title>www.weiyuxuan.cn</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>

在这里插入图片描述

二、文字大小

1、大小单位

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

2、示例

<!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>