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;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容