html怎么设置字体竖直,CSS3 writing-mode 控制字体竖直显示

语法：

writing-mode: horizontal-tb | vertical-rl | vertical-lr | lr-tb(ie) | tb-rl(ie)

默认值： normal

适用于：除table-row-group, table-column-group, table-row, table-column 之外的所有元素

继承性：有

动画性：否

计算值：特定性

取值：

horizontal-tb: 水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb)

vertical-rl: 垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl)

vertical-lr: 垂直方向自左而右的书写方式。即 top-bottom-left-right

lr-tb: 左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE)。

tb-rl: 上-下，右-左。对象中的内容在垂直方向上从上而下流入，自右而左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母顺时针旋转90度。这种布局时东亚语系通常使用的(IE)。

说明：

设置或检索对象的内容块固有的书写方向。西方语言一般都是lr-tb的书写方式，但是亚洲语言lr-tb|tb-rl的书写方式都有。

此属性效果不能被累加使用。例如：父对象的此属性值设为tb-rl, 子对象再设置该属性将不起作用，仍应用父对象的设置。

对应的脚本特性为：writtingMode。

示例：

HTML>

{

font-size: 30px;

font-weight: bold;

width:200px;

height: 200px;

text-align: center;

color:#fff;

background: -webkit-gradient(linear,left bottom, right bottom, from(#2D8BC0), to(#53AFE4));

-webkit-margin-before: 0;

-webkit-margin-after: 0;

margin-right: 10px;

float: left;

}

.vertical_rl

{

-webkit-writing-mode: vertical-rl;

writing-mode: tb-rl;

writing-moide: vertical-rl;

}

.vertical_lr

{

-webkit-writing-mode: vertical-lr;

writing-mode: tb-lr;

writing-moide: vertical-lr;

}

left-right-top-bottom

top-bottom-right-left

top-bottom-left-right

结果：

参考文章：

http://css.doyoe.com/

html怎么设置字体竖直,CSS3 writing-mode 控制字体竖直显示相关推荐

css3 text-shadow 为网页字体添加阴影
css3 text-shadow 为网页字体添加阴影 text-shadow:为网页字体添加阴影, 可以通过对text-shadow属性设置相关的属性值,可以实现一些漂亮的字体阴影效果. 属性与值的说 ...
css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式一.总结一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
html alert字体颜色,js里alert里的字体颜色怎么设置:字体颜色方法；fontcolor(color)...
我的总结: alert应该是没办法改变的只有自己写个弹出窗口才可以改变字体颜色我的总结: alert应该是没办法改变的只有自己写个弹出窗口才可以改变字体颜色 ============== ...
html 字体模糊,详解css3使用transform出现字体模糊的解决办法
这个问题很奇葩,话不多少直接上代码: .g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-5 ...
利用CSS3 @font-face使用图标字体
CSS3可以通过@font-face使用自定义字体,这是让前端工程师拍手称赞的一件事情.在CSS3之前,前端页面的字体只能使用设备中已经安装好的字体.@font-face 可以让前端工程师随心所欲的使 ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
matplotlib绘制图表，设置刻度标签、最大最小刻度、字体大小，label位置、刻度轴箭头等
matplotlib绘制图表,设置刻度标签.最大最小刻度.字体大小,label位置.刻度轴箭头等 1. 效果图 2. 源码 2.1 仅使用普通轴ax + fontdict 源码 2.2 使用mpl设置 ...
R语言使用hexSticker包将ggplot2包可视化的结果转换为六角图（六角贴、六角形贴纸、ggplot2 plot to hex sticker）、并自定义设置文本的内容、文本对应的字体
R语言使用hexSticker包将ggplot2包可视化的结果转换为六角图(六角贴.六角形贴纸.ggplot2 plot to hex sticker).并自定义设置文本的内容.文本对应的字体目录
字体大小的设置_老年人用智能手机，怎样更改字体大小？3种方法，手把手教您学会...
分享生活小妙招,共享科技新生活!大家好,欢迎来到今天的知识分享!我是你们的好朋友小俊! 我们的老年朋友在使用手机时候都会觉得字体太小,导致使用起来非常不方便,那么今天我就教大家三种方法来设置字体大小, ...
Markdown设置字体大小、颜色...，CSDN博客编写设置字体大小、颜色、粗细。字体，文字背景设置。
正常我们写的文字默认是3号尺寸,但是字数多的话要想更美观设置小号字体更棒呢! 小号字体字体颜色大号-字体 hello Boy! 华文细黑字体字体加粗字体标记绿色背景设置方法如图所示: 喜欢 ...

html怎么设置字体竖直,CSS3 writing-mode 控制字体竖直显示

html怎么设置字体竖直,CSS3 writing-mode 控制字体竖直显示相关推荐

最新文章

热门文章