HTML5权威指南笔记：22-设置文本样式

1 应用基本文本样式

1.1 对齐文本

属性	说明	值
text-align	指定文本块的对齐方式	start end left right center justify
text-justify	如果text-align属性使用了justify值, 则该值会用来指定对齐文本的规则	见下面

text-justify属性的值：

1. auto：浏览器选择对齐规则，这是最简单的方法，不过，不同浏览器之间的呈现方式会有微小差别。
2. none：禁用文本对齐。
3. inter-word：空白分布在单词之间，适用于英语等词间有空的语言。
4. inter-ideograph：空白分布在单词、表意字之间， 且文本两端对齐， 适用于汉语、日文和韩文等语言。
5. inter-cluster：空白分布在单词、字形集的边界，适用于泰文等无词间空格的语言。
6. distribute：空白分布在单词、字形集的边界，但连续文本或者草体除外。
7. kashida：通过拉长选定字符调整对齐方式（仅适用于草体）。

1.2 处理空白

whitespace属性的值：
normal：默认值，空白符被压缩，文本行自动换行。
nowrap：空白符被压缩，文本行不换行。
pre：空白符被保留，文本只在遇到换行符的时候换行，这跟pre元素（参见第8章）的效果一样。
pre-line：空白符被压缩，文本会在一行排满或遇到换行符时换行。
pre-wrap：空白符被保留，文本会在一行排满或遇到换行符时换行。

例子：

white-space: pre-line;

1.3 指定文本方向

direction: ltr;/*从左到右*/
direction: rtl;/*从右到左*/

1.4 指定单词、字母、行之间的间距

属性	说明	值
letter-spacing	设置字母之间的间距	normal ＜长度值＞
word-spacing	设置单词之间的间距	normal ＜长度值＞
line-height	设置行高	normal ＜数值＞ ＜长度值＞ <%>

例子：

word-spacing: 10px;
letter-spacing: 2px;
line-height: 3em;

1.5 控制断词

word-wrap属性告诉浏览器当一个单词的长度超出包含块的宽度时如何处理。
word-wrap属性的值：
normal：单词不断开，即使无法完全放入包含块元素。
break-word：断开单词，使其放人包含块元素。

例子：

word-wrap: break-word;

1.6 首行缩进

属性	说明	值
text-indent	设置文本首行的缩进	＜长度值＞ <%>

例子：

text-indent: 15%;

2 文本装饰与大小写转换

属性	说明	值
text-decoration	为文本块应用装饰效果	none underline overline line-through blink
text-transform	为文本块转换大小写	none capitalize uppercase lowercase

例子：

text-decoration: line-through;
text-transform: uppercase;

3 创建文本阴影

属性	说明	值
text-shadow	为文本块应用阴影	<h-shadow> <v-shadow> <blur> <color>

h-shadow和v-shadow：分别指定阴影的水平偏移和垂直偏移，用长度值表示。
blur：是一个长度值，定义了阴影的模糊程度。
color：指定阴影的颜色。

例子：

text-shadow: 0.1em .1em 1px lightgrey;
text-shadow: 5px 5px 20px black;

4 使用字体

属性	说明	值
font-family	指定文本块采用的字体名称	见4.1
font-size	指定文本块的字体大小	见4.2
font-style	指定字体样式	Normal italic oblique
font-variant	指定字体是否以小型大写字母显示	Normal smallcaps
font-weight	设置字体粗细	Normal bold bolder lighter 100~900之间的数字
font	在一条声明中设置字体的简写属性	见下面格式

font格式：

font : <font-style> <font-variant> <font-weight> <font-size> <font-family>

4.1 选择字体

通用字体系列：serif、sans-serif、cursive、fantasy、monospace

例子：

/*浏览器从字体列表中的第一种开始尝试，直到发现合适的字体为止
所以这里如果没有HelveticaNeue Condensed字体就会使用monospace*/
font-family: "HelveticaNeue Condensed", monospace;

4.2 设置字体大小

font-size属性的值:

值	说明
xx-small x-small small medium large x-large xx-large	设置字体大小。浏览器会决定每个值代表具体大小。不过，从上到下逐渐增大是有保证的
smaller larger	设置字体相对于父元素字体的大小
<length>	使用css长度值精确设置字体大小
<%>	将字体大小表示为父元素字体大小的百分数

例子：

font-size: medium;

4.3 设置字体样式和粗细

例子：

font-weight: bold;/*详细值见4节表

5 使用Web 字体

例子：

@font-face {
    /*font-family属性定义字体名称，用来引用要下载的字体；*/
    font-family: 'MyFont';
    /*font-style和font-weight属性告诉浏览器如何设置Web字体的样式和粗细；*/
    font-style: normal;
    font-weight: normal;
    /*src属性用来指定字体文件的位置*/
    src: url('http://titan/listings/MyFont.woff');
}

* {
    /*使用web字体*/
    font-family: MyFont;
}