CSS竖排及显示小语种蒙满

Reading time ~10 minutes

遗留问题

最近突然想到,之前发的一篇博文显示小语种字体,还有未竟之事:

  • 要是读者电脑里没有装相应字体,岂不都看不到这些字了?
  • 文章中的蒙文、满文没有竖排。

font-face 加载本机未装字体

问题一就用css的font-face动态加载Web fonts字体就可以了。 使用FontSquirrel WebFont Generator,并选择Basic,比如上传已有的如TTF字体,并生成对应的字体和CSS。尝试了好些其他font-face generators,但只有FontSquirrel 生成的eot文件IE才能使用。

  • 生成的字体,仔细看了看,大小也是WOFF2 < OET < WOFF < TTF < SVG的。所以最好还是把WOFF2写在CSS 加载资源的最前面。
  • 生成的CSS,还不够全面,可以参考 CSS Tricks 里对font-face的详细阐述。

暂时使用的是Mongolian Baiti,生成字体和CSS后稍加注释和修改如后:

@font-face {
font-family: 'Mongolian';
    src: url('../fonts/MongolianBaiti.eot'); /*IE9 Compat Modes*/
    src: 
     url('../fonts/MongolianBaiti.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/         
     local('Mongolian Baiti'), 
     local('Mongolian White'), /*load local fonts already installed*/
     url('../fonts/MongolianBaiti.woff2') format('woff2'),
     url('../fonts/MongolianBaiti.woff') format('woff'),
     url('../fonts/MongolianBaiti.ttf') format('truetype'),
     url('../fonts/MongolianBaiti.svg#MongolianBaiti') format('svg');
    font-weight: normal;
    font-style: normal;
}

本来也不想对IE做适配,这些字体占用这么多空间。不想浏览器市场份额里面一看,IE还有35+%的市场份额😂

竖排字体

竖排不难,加上css的竖排就可以了:

.lang-mn {
  font-family: "Mongolian Baiti", "Mongolian White", 'Mongolian', sans-serif;
  -moz-writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -o-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: tb-lr;
  layout-flow:vertical-ideographic;
}

后面有些中文的资料,也需要竖排,这也能用得着。

检查与分享

大家也可以看看如下的字体是否是竖排,且满语、蒙语是否可见了。

滿 ᠮᠠᠨᠵᡠ ᡤᡳᠰᡠᠨᠮᠣᠩᠭᠣᠯ ᠪᠢᠴᠢᠭ᠌

正常显示后应该是这样的: demo 不过因为Safari以及移动浏览器对竖排支持太差,可以将竖排改成横排: 滿 ᠮᠠᠨᠵᡠ ᡤᡳᠰᡠᠨᠮᠣᠩᠭᠣᠯ ᠪᠢᠴᠢᠭ᠌ 如果还是不能正常显示,那还是下载对应字体吧(比如我这儿的蒙文字体),或者更新浏览器到Google Chrome吧。

这个CSS,我也加了中文的竖排样式,大家可以下载使用。 大家也可以到Mongolian White官网 看看蒙文的优美显示。

任意网页使用

现在整理和测试了蒙文、藏文的字体,为了让你的网页直接支持蒙文、藏文显示,可以直接直接用本博配置的css。

  • 在HTML的header中加入如下代码:
  <link href="http://www.josephjctang.com/blog/assets/css/lang.css" rel="stylesheet" type="text/css">
  
  • 在你需要支持的字体段落加入对应字体的class。蒙文为.lang-mn,满语为.lang-mnc,藏语为.lang-bo。横排只需再加上class.wm-hlr1。比如上文中的蒙文:<em class="lang-mn"> ᠮᠣᠩᠭᠣᠯ ᠪᠢᠴᠢᠭ᠌ </em>
  1. Writing Mode: Horizontal Left to Right 

Original post: http://blog.josephjctang.com/2015-04/load-and-display-vertical-fonts/

2016 記

2015 年做的和沒做的,也大體記錄在了[這裏]({% post_url 2016-01-01-annual-review-and-planning %})。匆匆一年已逝,幾多慨嘆,幾多欣喜。後面列列過去已經做的,以及相對的未來一年的TODO list。主要也是從工作上的個人提升,以及生活上的...… Continue reading

《神经网络》课程笔记

Published on November 06, 2016

搜索广告机制设计

Published on November 02, 2016