求帮助: 用css定义好字体后, 导航条和"heading" 内所有中文均无法显示

求解决办法: 用css定义好字体后, 导航条和<h1></h1>; <h3></h3> 等处只能显示英文, 如换成中文，则什么也不显示（输出为空）. 网页中其它地方中文可正常显示.

部分html相关代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta charset="UTF-8"></head>

<body>

<div id="bg_top">

  <div id="wrapper">

    <div id="header">

      <div id="logo"><a href="./index.html"><img src="./images/logo.png" width="300" height="92" border="0" alt="Logo" /></a></div>

      <div id="header_photos">

      	<div class="two"></div>

      	<span class="three"><img src="./images/header-flower3.png" alt="3" width="118" height="121" /></span>

        <div class="one"><img src="./images/header-flower1.png" alt="1" width="118" height="121" /></div>

      </div>

      <!--end header photos-->

      <div id="menu">

        <ul id="navigation">

          <li><a href="./index.html" class="active">Home</a></li>

          <li><a href="./categories.html">Categories</a></li>

          <li><a href="./contact.html" style="border:none;">Contact</a></li>

        </ul>

        <!--end navigation-->

      </div>

      <!--end menu-->

    </div>

    <!--end header-->

    <div id="content_bg">

      <div id="sidebar">

        <!-- start menu -->

         <div id="menu_string"><img src="./images/tag-string.png" width="178" height="22" alt="string" /></div>

        <div id="menu_wrapper">

          <div id="menu_header">

            <div id="menu_footer">

              <h3>shop</h3>

              <ul>

                <li><a href="">New Arrivals</a></li>

                <li><a href="">On Sale</a></li>

                <li><a href="./categoriea.html">For Newborn (Birth+)</a></li>

                <li><a href="./categorieb.html">For Infant (6 Months+)</a></li>

                <li><a href="./categoriec.html"For >Toddler (12Months +)</a></li>

              </ul>

              <br class="clear" />

            </div>

          </div>

        </div>

        <!-- end menu -->

......



      <div class="clear"></div>

    </div>

    <!--end content bg-->



......



  </div>

  <!--end wrapper-->

</div>

<!--end bg_top-->

<script type="text/javascript"> Cufon.now(); </script>

</body>

</html>

部分css相关代码如下:

@charset "utf-8";

/* CSS Document */



/*Template Layout*/

body {

	background-color:#eeebda;

	background-image:url(../images/page-bg.jpg);

	background-position:top;

	background-repeat:repeat;

	margin:0px;

	padding:0px;

	color:#6f5b40;

	font-family:Arial, Helvetica, sans-serif, "微软雅黑";

	font-size:13px;

	line-height:1.5em; 

	text-align:center; 

}

a, a:link, a:visited {

	color:#675237;

	outline: none; 

}

a:hover {

	color:#af9d87;

	text-decoration:none;

}

#bg_top { 

	background:url(../images/header.png) center top no-repeat;

	min-height: 100%; 

	text-align:left;

	width:100%;

	margin-top:80px;

}

#wrapper {

	width:972px;

	margin:0px auto;

}

#header {

	height:222px;

	width:972px;

	margin:0px auto;

}

/*menu*/

#menu { 

	height:30px;

	padding:16px 0 6px 0;

	clear:both;

}

ul#navigation {

	margin:0px 0 0 30px; 

	padding:0px;

	float:left;

	z-index:100; 

	width:760px;

}

ul#navigation li {

	float:left;

	list-style:none;

	display:inline;

	padding:0px;

	margin:0px;

}

ul#navigation a {

	float:left; 

	color:#675237; 

	padding:0px 13px 20px 13px; 

	text-decoration:none; 

	font:24px arial, serif, "微软雅黑";

	text-transform:lowercase;

	letter-spacing:1px; 

}

ul#navigation li.hover a, ul#navigation li:hover a, ul#navigation a.active, ul#navigation a:hover {

	color:#8d7e6b; 

}

/* General Content*/

h1 {

	color:#af9d87;

	font-size:30px;

	margin:0px;

	padding:0px;

}

h2 {

	color:#675237;

	font-size:20px;

}

h3 {

	color:#675237;

	font-size:18px;

}

/*side menu tag*/

#sidebar {

	margin-left:29px;

	float:left;

}

#menu_string {

	width:178px;

	height:22px;

	margin:-20px 0 0 0;

	z-index:101; /*makes dropdown sit on top of flash & map*/

}

#menu_wrapper {

	width:178px;

	background:url(../images/tag-tile.jpg) repeat-y;

	margin:0 0 18px 0;

}

#menu_header {

	width:178px;

	background:url(../images/tag-top.jpg) no-repeat top;

}

#menu_footer {

	width:178px;

	background:url(../images/tag-bottom.jpg) no-repeat bottom;

	min-height:265px;

	padding-bottom:40px;

}

#menu_wrapper h3 {

	text-align:center;

	margin:0;

	padding:20px 0 0 0;

	color:#ded6c5;

	font-size:24px;

}

#menu_wrapper ul {

	width:178px;

	padding:5px 0 0 0;

	margin:0;

	list-style:none;

	color:#846324;

	font-size:13px;

	font-family:Arial, Helvetica, sans-serif, "微软雅黑";

	text-align:center;

}

#menu_wrapper ul li {

	margin:0;

	padding:0;

	list-style:none;

	float:left;

	clear:left;

}

#menu_wrapper ul li a {

	display:block;

	float:left;

	clear:left;

	padding:4px;

	text-decoration:none;

	width:170px;/*178*/

	text-align:center;

	color:#846324;

	line-height:normal;

}

#menu_wrapper ul li a:hover {

	text-decoration:underline;

}

......