简单实现传统蒙古文在各大浏览器上的正确显示

2013-09-22 07:01 ·Ab叔 1808 6 <- 点击左侧的数字“攒”一个吧

传统蒙古文是中国内蒙古自治区的蒙古语的官方书写方式,独特的竖写模式导致其在很多浏览器上无法正确的显示。今天我用简单的css技巧实现在ie、ff、chrome、safari上正确现实蒙古文。

桌面版浏览器

移动版浏览器

View demo      Download

想要在各大浏览器正确现实蒙古文需要解决一下几个问题:

  1. 字体
  2. 网页上使用这个字体
  3. 竖写
  4. 各种浏览器的hack写法

一:字体

其实这字体很好办,在网上能找到好多传统蒙古文的字体,自己去下载个用用好了。

不过需要注意字体格式,因为很多浏览器能够解析的字体都有所不同。

一、turetpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

二、opentype(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、web open font format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、embedded open type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

五、svg(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着我们想要在ie、ff、chrome、safari上实现蒙古文的显示,至少需要.ttf,.eot两种格式字体。其实想要更好的实现个浏览器的兼容性问题的话还需要svg的格式,但我在网上找了很久没找到,有心人可以自行去转换。

二:网页上使用这个字体

想要在网页中使用上述字体就需要用到@font-face了。

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。

@font-face的语法规则:

@font-face {
	font-family: <YourWebFontName>;				/*自定义的字体名称*/
	src: <source> [<format>][,<source> [<format>]]*;	/*自定义的字体的存放路径*/
	[font-weight: <weight>];				/*定义字体是否为粗体*/
	[font-style: <style>];					/*字体样式,如斜体*/
}

为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}

三:竖写

想要实现竖写,那就需要用到css的writing-mode属性,IE5.5率先实现了 writing-mode ,后期被w3c采纳成标准属性;不是所有的能很好的支持次属性,所以需要用到css3的transform等属性来变性,以达到最优的显示效果。

四:各种浏览器的hack写法

因为在ie与、safari中writing-mode被很完美的实现了,却在其他浏览器中乱的一塌糊涂,所以需要用的浏览器的hack技术分别给不同的浏览器写不同的css。

@-moz-document url-prefix此属性只针对firefox浏览器。

@media screen and (-webkit-min-device-pixel-ratio:0) 能够识别webkit内核浏览器(包括:chrome、safari等)。