蒙文网站制作技术
将制作蒙文网站的基本知识一一解说,如有遗漏或说错的地方望大家指正。
一、竖排显示方法
因为传统蒙文须要竖排显示,所以这是制作一个蒙文网站的最基本要素。
普通的网页文字竖排显示需要使用css样式去实现,而竖排样式因浏览器不同而写法也不同,具体如下(以下示例未考虑IE6):
-moz-writing-mode:vertical-lr;
-webkit-writing-mode:vertical-lr;
-o-writing-mode:vertical-lr;
-ms-writing-mode:tb-lr;
writing-mode:tb-lr;
示例:
http://blog.noruu.com/HtmlExample/Example_1/index.htm
Download
二、字体嵌入
因为现在的操作系统,不管是windows还是linux,默认都不安装蒙文字体,或者win7已经默认安装了蒙文字体了,但是因为兼容等原因也不能使用。所以为了在任何电脑上都不下载字体就能正常显示蒙文,我们需要将蒙文字体嵌入到网页里,这样这个网页一般情况下都能正常显示蒙文,而不需要专门下载字体。
目前网站使用的字体基本上是“蒙科立”公司的字体,这个字体为了网页上显示的漂亮一些,专门做了调整,使其看起来又清晰又漂亮,所以我推荐使用蒙科立字体嵌入到网页中(请注意版权问题!)。具体嵌入方法为:
@font-face{
font-family:'MenksoftHawang';
src:url('Fonts/MenksoftHawang.eot');
src:url('Fonts/MenksoftHawang.eot?#iefix')format('embedded-opentype'),
url('Fonts/MenksoftHawang.ttf')format('truetype'),
url('Fonts/MenksoftHawang.woff')format('woff'),
url('Fonts/MenksoftHawang.svg#MenksoftHawang')format('svg');
font-weight:100;
font-style:normal;
}
这种方法是CSS3最新标准的方法,支持的浏览器有:chrome,ie8及以上,safari(我的机器上会死机),firefox等,按道理在Iphone和android手机上也能显示,但是我没试过,如果有人试过的话请给我一个回复,让我确认一下。
示例:
http://blog.noruu.com/HtmlExample/Example_2/index.htm
Download
相关网站:
WOFF使用指南:http://www.typeisbeautiful.com/2010/01/1903
三、在线输入法
因为现在操作系统默认都没有蒙文输入法(win7的蒙文输入法因兼容问题暂时不考虑),所以最好是在网页里嵌入在线输入法,以保证有录入蒙文需求时能不用下载输入法也能正常使用。
示例:
http://blog.noruu.com/HtmlExample/zaixian/menk_test.html
(兼容IE和chrome等浏览器!我也想开发一个功能比较全的输入法,比如能够词组输入或智能输入的输入法,看时间吧!)
四、蒙文在线编辑器
竖排在线编辑器在录入文本时非常有用,但是由于浏览器开发商(如微软和google)以前将未支持蒙文样式竖排编辑功能,但是随着CSS3标准的普及与推广,这些厂商开始支持蒙文样式竖排编辑功能,具体我所知道支持此特性的浏览器是IE8及以上版本和chrome浏览器,而chrome浏览器支持的比IE的要好,本人开发了一种蒙文在线编辑器,已经在公司内部开始使用,我将讲解在普通的网页里如何嵌入这个编辑器的方法。
试用主页:
http://blog.noruu.com/meditor/_examples/index.html
完整试例:
http://blog.noruu.com/meditor/_examples/completeDemo.html
相关文章
- 7条评论
呼和海天2014-06-0813:26:23
- IPhone测试可以显示蒙文,但显示结果和网页效果不同,因本人不懂蒙文,期待待其他网友验证。
呼市猎人2014-07-1910:16:11
- 为什么在IE8下面就不行了呢我把你的例子下载下来然后在IE8上也不显示IE9就好使了IE8要怎么处理啊楼主
希丽2014-07-2017:16:40
- 这是百度编辑器哦。把textarea的writing-mode改了吧。小心版权问题哦。
husi2014-09-0910:38:27
- 最上面的代码的中间三个有什么用API找不到。
delger2014-10-1016:42:06
- 我下载例子怎么显示还是横版的???
都林2015-11-0520:22:54
- 你们谁能给我一下这个字体?还有那些各种格式?能帮我的发QQ邮箱:1207171241@qq.com
布2018-07-0901:09:08
- 老师啊,您发的示例都看不了了