CSS字体

最新推荐文章于 2024-04-30 06:47:19 发布

冷月醉雪

最新推荐文章于 2024-04-30 06:47:19 发布

阅读量486

点赞数

分类专栏： CSS3 CSS 实例文章标签： CSS CSS实例字体

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/81113196

版权

CSS3 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

CSS 实例

22 篇文章 0 订阅

订阅专栏

设置文本的字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.serif{font-family:"Times New Roman",Times, serif;}
			p.sansserif{font-family:Arial,Helvetica,sans-serif;}
		</style>
	</head>
	<body>
		<h1>CSS font-family</h1>
		<p class="serif">这一段的字体是 Times New Roman </p>
		<p class="sansserif">这一段的字体是 Arial.</p>

	</body>
</html>

设置字体大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			h1 {font-size:250%;}
			h2 {font-size:200%;}
			p {font-size:100%;}
		</style>
	</head>
	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<p>This is a paragraph.</p>

	</body>
</html>

用px设置字体的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			h1 {font-size:40px;}
			h2 {font-size:30px;}
			p {font-size:14px;}
		</style>
	</head>
	<body>
	<h1>This is heading 1</h1>
	<h2>This is heading 2</h2>
	<p>This is a paragraph.</p>
	<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
	<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p>

	</body>
</html>

用em设置字体的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			h1 {font-size:2.5em;} /* 40px/16=2.5em */
			h2 {font-size:1.875em;} /* 30px/16=1.875em */
			p {font-size:0.875em;} /* 14px/16=0.875em */
		</style>
	</head>
	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<p>This is a paragraph.</p>
		<p>使用 em 单位，允许在所有浏览器中调整文本大小。
		不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
		</p>

	</body>
</html>

用百分百和em设置字体的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			body {font-size:100%;}
			h1 {font-size:2.5em;}
			h2 {font-size:1.875em;}
			p {font-size:0.875em;}
		</style>
	</head>
	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<p>This is a paragraph.</p>
		<p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>

	</body>
</html>

设置字体的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.normal {font-style:normal;}
			p.italic {font-style:italic;}
			p.oblique {font-style:oblique;}
		</style>
	</head>
	<body>
		<p class="normal">这是一个段落,正常。</p>
		<p class="italic">这是一个段落,斜体。</p>
		<p class="oblique">这是一个段落,斜体。</p>

	</body>
</html>

设置字体的异体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.normal {font-variant:normal;}
			p.small {font-variant:small-caps;}
		</style>
	</head>
	<body>
		<p class="normal">My name is Hege Refsnes.</p>
		<p class="small">My name is Hege Refsnes.</p>
	</body>
</html>

设置字体的粗细

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.normal {font-weight:normal;}
			p.light {font-weight:lighter;}
			p.thick {font-weight:bold;}
			p.thicker {font-weight:900;}
		</style>
	</head>
	<body>
		<p class="normal">This is a paragraph.</p>
		<p class="light">This is a paragraph.</p>
		<p class="thick">This is a paragraph.</p>
		<p class="thicker">This is a paragraph.</p>
	</body>
</html>

在一个声明中设置所有字体的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.ex1
			{
				font:15px arial,sans-serif;
			}

			p.ex2
			{
				font:italic bold 12px/30px Georgia,serif;
			}
		</style>
	</head>
	<body>
		<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
		<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/13dd32c1-bb61-438f-9abc-44d88cdd5ae8

冷月醉雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS字体

设置文本的字体&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;style&gt; p.serif{font-family:"Times New
复制链接

扫一扫