遗留问题
最近突然想到，之前发的一篇博文显示小语种字体，还有未竟之事：
- 要是读者电脑里没有装相应字体，岂不都看不到这些字了？
- 文章中的蒙文、满文没有竖排。
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;
}后面有些中文的资料，也需要竖排，这也能用得着。
检查与分享
大家也可以看看如下的字体是否是竖排，且满语、蒙语是否可见了。
滿 ᠮᠠᠨᠵᡠ ᡤᡳᠰᡠᠨ 蒙 ᠮᠣᠩᠭᠣᠯ ᠪᠢᠴᠢᠭ᠌
正常显示后应该是这样的： 
不过因为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>
Writing Mode: Horizontal Left to Right ↩
Original post: http://blog.josephjctang.com/2015-04/load-and-display-vertical-fonts/