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

<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">></span>"，就用字符"<span class="red">></span>"或者字符“<span class="red">></span>”，想表示空格就用" “。这个可以较为有效的避免一部分特殊字符被浏览器解析错误的问题。但是如果用于音标呢，可以解决问题吗？</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>

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>

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

OpenCV显示copyMakeBorder功能的实例(附完整代码)
OpenCV显示copyMakeBorder功能的实例 OpenCV显示copyMakeBorder功能的实例 OpenCV显示copyMakeBorder功能的实例 #include "o ...
chrome打开html文件显示不全,谷歌浏览器显示不全怎么办_chrome浏览器打开的网页显示不完整如何解决-win7之家...
大家在使用谷歌chrome浏览器的时候,是否遇到这样的现象,就是在使用谷歌浏览器浏览网页的时候,发现网页显示不全,遇到这样的问题该怎么办呢,其实只要在区域设置里更改一下区域位置就可以了,现在给大家讲解 ...
监控html页面数据获取失败,前端异常采集（附实例）
原标题:前端异常采集(附实例) 为什么要做前端代码异常采集?好问题! 为了用户能安心用产品,不至于时不时"卡壳"崩溃. 为了能高效定位线上代码的异常并提供简单提示信息. 为了程序猿 ...
【Android数据存储】ContentProvider详细介绍（附实例源码）
1.ContentProvider是什么? ContentProvider--内容提供者.它是一个类,这个类主要是对Android系统中进行共享的数据进行包装,并提供了一组统一的访问接口供其他程序调用 ...
Android的WebView控件载入网页显示速度慢的究极解决方案
Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] Android客户端中混搭HTML页面,会出现虽然H ...
关于网页显示乱码问题的一些个人见解（PHP、JSP...）
最近做项目,遇到了一些网页显示乱码的情况,在网上查了很多资料都没有给一个全面的准确的答案,自己摸索了一下经过对比开发环境(我使用的是Myeclipse)编辑器的编码和浏览器默认显示的编码发现,在字符编 ...
kubernetes英语怎么读_英语音标怎么读
音标是音素的标写符号,就是记录音素的符号. 音标的制定原则一个音素只用一个音标表示,但是,双元音就是由2个音素组成的. 英语音标的分类 (1)IPA音标是国际标准音标, (2)DJ音标是英式英语国际 ...
vuex结合php,vuex中store的使用介绍（附实例）
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...

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

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

最新文章

热门文章