如何在网页显示英语音标（附实例）

<p class="descriptionArea">
做教育业的网站，会将此遇到这个问题：<strong>如何在网页上显示音标</strong>？<strong>音标为什么显示为乱字符</strong>？等等类似的问题。前两天做沪江网某英语页面的时候也碰到了这个问题，所以，解决后在此稍微分享一下吧。
</p>

<h2>用ISO Latin-1字符集就能解决问题？</h2>
<div class="floatMPic">
<img alt="国际音标" src="http://downloads.cnblogs.com/justinyoung/articleIMG/2009/IPA_logo.jpg"><h6>如何在页面上正常显示英语音标</h6>
</div>
<p>一开始最先想到的就是用ISO Latin-1字符集解决问题。</p>
<p>什么是“ISO Latin-1字符集”？很简单，举个例子说明一下：如果你想表示符号"<span class="red">&gt;</span>"，就用字符"<span class="red">&amp;gt;</span>"或者字符“<span class="red">&amp;#62;</span>”，想表示空格就用"&amp;nbsp;“。这个可以较为有效的避免一部分特殊字符被浏览器解析错误的问题。但是如果用于音标呢，可以解决问题吗？</p>

<ul style="margin: 15px 2px 15px 25px;">
<li style="font-size: 20px;">辅音：θ 、ð 、ʃ 、ʒ 、tʃ 、dʒ 、ŋ </li>
    <li style="font-size: 20px;">短元音：ɪ 、æ 、ɔ 、ʌ 、 ʊ 、ə 、ɛ</li>
    <li style="font-size: 20px;">长元音：ɑ: 、ʊ: 、ɔ:  </li>
    <li style="font-size: 20px;">双元音：eɪ 、ɑɪ 、ɔɪ 、əʊ 、oʊ 、ɑʊ 、ɪə 、eə 、ʊə 、ɪə</li>
</ul>
<p>相信很多朋友看到上面的音标都是正常的。貌似问题已经得到解决了。但是……当我们移步到IE6中的时候，问题出现了——</p>
<div class="floatMPic">
<img alt="IE6显示音标错误" src="http://downloads.cnblogs.com/justinyoung/articleIMG/2009/IPA_bug.gif"><h6><a href="http://www.cnblogs.com/JustinYoung/archive/2009/07/15/how-to-show-IPA-on-web.html" title="如何在页面上正常显示英语音标" target="_blank">如何在页面上正常显示英语音标</a></h6>
</div>

<h2>继续寻找解决方案</h2>
<p>虽然IE6很讨厌，但是现在还是没有办法不管它。所以，我们只能继续寻找解决方案。wiki这样的大牛，一定有页面要显示音标的吧。看看他们怎么处理吧。最后找到了这个页面<a href="http://zh.wikipedia.org/wiki/Template:IPA" title="wiki的音标模板" target="_blank">wiki的音标模板</a>(wiki页面，多数时间可能无法访问，如果坚持要访问，请)。分析一下，发现其实也不难，只要选择了合适的字体问题即可解决。所以最终解决方案就出来了。对需要显示音标的容器设置“IPA”class，然后IPA样式设置为：</p>
<div class="csharpcode-wrapper">
  <div class="csharpcode">
    <pre class="alt"><span class="cls">.IPA</span>{</pre>
    <pre class="alteven">    <span class="kwrd">font-family</span>: "Segoe UI", Verdana,Lucida Sans Regular,Lucida Sans Unicode,Arial,sans<span class="str">-serif;</span></pre>
    <pre class="alt">}</pre>
  </div>
</div>
<p>这样，问题得到了解决，IE6——IE8、FireFox3、Opera、chrome浏览器验证通过。</p>
<h2>附一个完整实例</h2>
<p>点击此处访问《<a href="http://downloads.cnblogs.com/justinyoung/example/2009_IPA.html" title="页面显示英语音标实例" target="_blank">页面显示英语音标实例</a>》页面。</p>


<div style="width: 660px; float: left;">

alimama_pid="mm_10056409_242955_3624216";
alimama_titlecolor="0000FF";
alimama_descolor ="000000";
alimama_bgcolor="FFFFFF";
alimama_bordercolor="E6E6E6";
alimama_linkcolor="008000";
alimama_bottomcolor="FFFFFF";
alimama_anglesize="8";
alimama_bgpic="0";
alimama_icon="0";
alimama_sizecode="16";
alimama_width=658;
alimama_height=60;
alimama_type=2;



</div>