CSS 蒙古文竖排

第一步，改变文字排版方向：

.mw {
  -webkit-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
  -o-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: tb-lr;
}

这里使用了 writing-mode 这个 API，这个API 从 ie5.5 就有了。

writing-mode

第二步，改变字体

这里的字体使用的是蒙科立公司的白体，下载链接在这里

@font-face {
  font-family: "MQG8F02";
  src:url("./MQG8F02.ttf");
}

.mw {
  font-family: "MQG8F02";
}

第三步，将英文字符反转过来

.mw {
  text-orientation: sideways-right;
  -webkit-text-orientation: sideways-right;
}

完整代码

@font-face {
  font-family: "MQG8F02";
  src:url("./MQG8F02.ttf");
}

.mw {
  font-family: "MQG8F02";

  -webkit-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
  -o-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: tb-lr;
  
  text-orientation: sideways-right;
  -webkit-text-orientation: sideways-right;
}