第一：css3下载字体，代码如下
@font-face
{
font-family:
'自己命名字体名字'
src:
url('字体路径')
src:
url('FileName.eot?#iefix')
format('embedded-opentype'),
/*其它格式*/
url('FileName.woff')
format('woff'),
url('FileName.ttf')
format('truetype'),
url('FileName.svg#FontName')
format('svg')
font-style:
normal
font-weight:
normal
/*设置默认样式*/
}
.aa{font-family:"自己命名字体名字"}
不兼容ie8及以下浏览器
第二：切png图片
就是隐藏display:none
当前显示的设置为display:block
一般使用脚本实现
比如你要隐藏的元素为<div id="info1"></div>
要显示的元素为<div id="info2"></div>
假设使用jquery控制
代码为以下两句：
$("#info1").hide()
$("#info2").show()
这种还是希望题主自己写一下的好，不过我下面写了一份可以给题主参考，效果实现和你提供的图片差不多，如下图：
运行效果图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
* {
margin: 0
padding: 0
}
html,
body {
font-family: "楷体"
font-weight: bold
}
.container {
width: 820px
margin: 0 auto
}
h1 {
text-align: center
font-size: 32px
}
.author {
text-align: right
margin-right: 210px
line-height: 100px
}
.poem {
line-height: 50px
margin-left: 50px
}
.subTitle {
color: red
line-height: 100px
}
.text, .footer {
line-height: 30px
}
.footer {
text-align: center
}
</style>
</head>
<body>
<div class="container">
<h1>忆江南<sup>(1)</sup></h1>
<p class="author">唐：白居易</p>
<p class="poem">江南好，风景旧曾谙。<sup>(2)</sup>日出江花红胜火，春来江水绿如蓝。<sup>(3)</sup>能不忆江南？</p>
<hr />
<p class="subTitle">作者介绍</p>
<p class="text">&emsp&emsp白居易(72-84),学乐天,太原(今属山西)人。唐德宗蝴进士,元和三年(808)拜左扮遗,后赖江州(今属江西)司马,移虑州(今属四川)制史,又为苏州(今属江苏)、冈州(今属陕西大荔)制史。晚居洛阳,自号联吵先生、香山居士,其谢欢治倾向鲜明,重汉喻,尚坦易,为中唐大家,也是平期词人中的佼佼者,所作对后世影响甚大.</p>
<hr />
<p class="subTitle">注释</p>
<p class="text">&emsp&emsp(1)据《乐府条录》,此词又名《谢秋旅》 ,系唐季德裕为亡短谢秋娘作,又名《望江角》、《梦江南》等,分单调、双调两体。半词二十七字,双凋五十四字,皆予韵.</p>
<p class="text">&emsp&emsp(2)语(音夫）：熟悉。</p>
<p class="text">&emsp&emsp(3)蓝:蓝草,其叶可制青绿染科。</p>
<hr />
<p class="subTitle">品评</p>
<p class="text">&emsp&emsp此词写江角春色,首句“江南好”,以一个既浅切又团活的“好"字,振尽江南春色的种种佳处,而作者的赞顷之意与向往之情也尽离其中,同时,唯国“好之已苦,方能"忆之不休,因此,此句又已路遇站句“轮不记江角",并与之相关国。次句“尺景旧曾语”,点明江由风景之“好,并非得之传闻,而是作者出较杭州时的激身体验与豪身感受,这就既落实了“好字,又照应了"花-字,不失为勾通一篇意脉的精彩老蛋。三、四两句对江角之"好"进行形象化的汉绎,突出渡绿江吃、江水红绿相缺的明艳色彩,给人以光彩夺目的强烈印象。其中,既有同色间的相互烘托,又有弄包间的相互映材,克分显示了作者善予著色的技巧。 末,以“能不记江南“救束金词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠选而又深长的韵味,把读者蒂入余请摇溪的境界中。</p>
<hr />
<p class="footer"><span>猜你喜欢：</span><a href="javascript:">将进酒</a> <a href="javascript:">游子吟</a></p>
</div>
</body>
</html>
