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

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

用ISO Latin-1字符集就能解决问题？

如何在页面上正常显示英语音标

一开始最先想到的就是用ISO Latin-1字符集解决问题。

什么是“ISO Latin-1字符集”？很简单，举个例子说明一下：如果你想表示符号">"，就用字符">"或者字符“>”，想表示空格就用" “。这个可以较为有效的避免一部分特殊字符被浏览器解析错误的问题。但是如果用于音标呢，可以解决问题吗？

• 辅音：θ 、ð 、ʃ 、ʒ 、tʃ 、dʒ 、ŋ
• 短元音：ɪ 、æ 、ɔ 、ʌ 、 ʊ 、ə 、ɛ
• 长元音：ɑ: 、ʊ: 、ɔ:
• 双元音：eɪ 、ɑɪ 、ɔɪ 、əʊ 、oʊ 、ɑʊ 、ɪə 、eə 、ʊə 、ɪə

相信很多朋友看到上面的音标都是正常的。貌似问题已经得到解决了。但是……当我们移步到IE6中的时候，问题出现了——

如何在页面上正常显示英语音标

继续寻找解决方案

虽然IE6很讨厌，但是现在还是没有办法不管它。所以，我们只能继续寻找解决方案。wiki这样的大牛，一定有页面要显示音标的吧。看看他们怎么处理吧。最后找到了这个页面wiki的音标模板(wiki页面，多数时间可能无法访问，如果坚持要访问，请FQ)。分析一下，发现其实也不难，只要选择了合适的字体问题即可解决。所以最终解决方案就出来了。对需要显示音标的容器设置“IPA”class，然后IPA样式设置为：

.IPA{
    font-family: "Segoe UI", Verdana,Lucida Sans Regular,Lucida Sans Unicode,Arial,sans-serif;
}

这样，问题得到了解决，IE6——IE8、FireFox3、Opera、chrome浏览器验证通过。

附一个完整实例

点击此处访问《页面显示英语音标实例》页面。