/*对于标准的CSS属性*/
div {
writing-mode: tb-rl; /*将文字从左到右排列*/
-webkit-writing-mode: vertical-rl; /*chrome和safari中使用*/
-ms-writing-mode: tb-rl; /*IE中使用*/
transform: rotate(180deg); /*将文字旋转，保证竖排*/
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
/*对于@font-face*/
@font-face {
font-family: 'MyFont';
src: url('myfont.otf') format('opentype');
}
div{
font-family: 'MyFont', Fallback, sans-serif;
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
/*注意：需要先在CSS中定义好字体，再在writing-mode和transform中使用*/除了这些技巧之外，大家还应该将竖排字体应用于最新版本的IE浏览器，例如IE9、IE10和IE11。在IE6到IE8中，由于不支持writing-mode属性，大家需要使用IE的VML（向量标记语言）来模拟实现竖排字体效果。VML是一个用于创建高度可缩放的2D图形的XML应用程序编程接口（API），具体实现方式可以查看微软官网提供的相关教程。