如何在网页显示英语音标(附实例)
2009-07-15 16:01
471 查看
做教育业的网站,会将此遇到这个问题:如何在网页上显示音标?音标为什么显示为乱字符?等等类似的问题。前两天做沪江网某英语页面的时候也碰到了这个问题,所以,解决后在此稍微分享一下吧。
如何在页面上正常显示英语音标
一开始最先想到的就是用ISO Latin-1字符集解决问题。
什么是“ISO Latin-1字符集”?很简单,举个例子说明一下:如果你想表示符号">",就用字符">"或者字符“>”,想表示空格就用" “。这个可以较为有效的避免一部分特殊字符被浏览器解析错误的问题。但是如果用于音标呢,可以解决问题吗?
辅音:θ 、ð 、ʃ 、ʒ 、tʃ 、dʒ 、ŋ
短元音:ɪ 、æ 、ɔ 、ʌ 、 ʊ 、ə 、ɛ
长元音:ɑ: 、ʊ: 、ɔ:
双元音:eɪ 、ɑɪ 、ɔɪ 、əʊ 、oʊ 、ɑʊ 、ɪə 、eə 、ʊə 、ɪə
相信很多朋友看到上面的音标都是正常的。貌似问题已经得到解决了。但是……当我们移步到IE6中的时候,问题出现了——
如何在页面上正常显示英语音标
[/code]
这样,问题得到了解决,IE6——IE8、FireFox3、Opera、chrome浏览器验证通过。
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;
用ISO Latin-1字符集就能解决问题?
如何在页面上正常显示英语音标
一开始最先想到的就是用ISO Latin-1字符集解决问题。
什么是“ISO Latin-1字符集”?很简单,举个例子说明一下:如果你想表示符号">",就用字符">"或者字符“>”,想表示空格就用" “。这个可以较为有效的避免一部分特殊字符被浏览器解析错误的问题。但是如果用于音标呢,可以解决问题吗?
辅音:θ 、ð 、ʃ 、ʒ 、tʃ 、dʒ 、ŋ
短元音:ɪ 、æ 、ɔ 、ʌ 、 ʊ 、ə 、ɛ
长元音:ɑ: 、ʊ: 、ɔ:
双元音:eɪ 、ɑɪ 、ɔɪ 、əʊ 、oʊ 、ɑʊ 、ɪə 、eə 、ʊə 、ɪə
相信很多朋友看到上面的音标都是正常的。貌似问题已经得到解决了。但是……当我们移步到IE6中的时候,问题出现了——
如何在页面上正常显示英语音标
继续寻找解决方案
虽然IE6很讨厌,但是现在还是没有办法不管它。所以,我们只能继续寻找解决方案。wiki这样的大牛,一定有页面要显示音标的吧。看看他们怎么处理吧。最后找到了这个页面wiki的音标模板(wiki页面,多数时间可能无法访问,如果坚持要访问,请FQ)。分析一下,发现其实也不难,只要选择了合适的字体问题即可解决。所以最终解决方案就出来了。对需要显示音标的容器设置“IPA”class,然后IPA样式设置为:.IPA{
[code] font-family: "Segoe UI", Verdana,Lucida Sans Regular,Lucida Sans Unicode,Arial,sans-serif;
}
[/code]
这样,问题得到了解决,IE6——IE8、FireFox3、Opera、chrome浏览器验证通过。
附一个完整实例
点击此处访问《页面显示英语音标实例》页面。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;
相关文章推荐
- AJAX XML 实例 下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息:
- 如何让网页上的失效图片,显示默认缺省图片
- 如何让你的网页在IE8下正确显示
- 如何在网页中动态显示当前时间
- 网页中显示内容过多,如何从bottom回到top
- 如何显示亚马逊的产品在您的网页没有使用JavaScript
- 如何直接在网页中显示PDF文件
- 如何在html中写入英语音标
- 如何不显示网页中文本框下方的下拉列表
- 如何在Word中输入英语音标
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- 如何使网页居中显示
- 如何让DIV和table和网页居中显示
- 网页如何全屏显示
- 如何读取EXCEL 表格文件并使他在WEB网页上显示(使用ASP.NET)
- 如何直接在网页中显示PDF文件
- Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
- 如何让网页显示友好的错误信息页面
- 如何在网页中显示pdf