外部字体引用、过渡效果

最新推荐文章于 2024-09-17 10:24:19 发布

whh4122

最新推荐文章于 2024-09-17 10:24:19 发布

阅读量743

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/whh4122/article/details/40271151

版权

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;">1、外部字体引用：用font-face来引入字体</span></span>

有的时候，会用到一些系统里没有的字体，我们可能需要从外部引用我们下载的字体，方法是：

<!DOCTYPE html>
<html>
<head>
	<title>字体引用</title>
	<meta charset="utf-8">
	<style type="text/css">
<span style="white-space:pre">	</span>/*用@font-face来引入字体*/
	@font-face{
		font-family: heeh;
		/*yi下三种形式都是可以的*/
		/*src:url("Sansation_Light.ttf");*/
		/*src:url('简娃娃篆.ttf');*/
		src:url(方正胖娃简体.ttf);
	}
	.tb{
		font-size: 80px;
		color: #f40;
		font-weight: 300;
<span style="white-space:pre">	</span><span style="white-space:pre">	</span>/*在这里声明引用字体的名称*/
		font-family: heeh;
	}
	</style>
</head>
<body>
	<h1 class="tb">淘宝</h1>
</body>
</html>

2、过渡效果:属性为transition

在鼠标移动到某一块的时候，在达到效果之前的一个过渡效果。如

<!DOCTYPE html>
<html>
<head>
	<title>transiton(过渡)</title>
	<meta charset="utf-8">
	<style type="text/css">
	.div_tran{
		width: 130px;
		height: 100px;
		/*rgba中的a是透明度（范围0~1）*/
		background: rgba(165,237,15,0.5);
		/*background: rgb(165,237,15);*/
		/*css的透明属性opacity（范围0~1）*/
		opacity: .3;
		color: #000;
<span style="white-space:pre">		</span>/*注释的这句和下面一句都可以*/
		/*-webkit-transition:width 2s,height 3s,background,opacity 2.5s;		*/
		-webkit-transition:all 3s;
	}
	.div_tran:hover{
		width: 200px;
		height: 200px;
		background: rgb(28,227,209);
		opacity: 1;	
		color: red;	
	}
/*	span{
		opacity: 1;
		position: relative;
		top: -100px;
	}*/
	</style>
</head>
<body>
	<div class="div_tran">
		transiton(过渡)
	</div>

	<!-- <span>transiton(过渡)</span> -->
</body>
</html>