復制代碼代碼如下:
<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>