css学习25：设置文本样式

1、应用基本文本样式

1.1 对齐文本

对齐属性：

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

text-align属性相当简单，不过，需要注意的重要一点是:可以将文本对齐到显式命名的某个边界(使用left或者right值)，或者对齐到语言本来使用的边界(使用start和end值)。在处理从右到左的语言时，这是一个非常重要的区别。

text-justify属性的值：

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

1.2 处理空白

空白在HTML文档中通常是被压缩或者直接忽略掉。这允许你将HTML文档的布局跟页面的外观分离。

whitespace属性控制浏览器对空白字符的处理方式。

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

1.3 指定文本方向

direction属性告诉浏览器文本块的版块方向。

值：ltr,rtl

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

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

1.5 控制断词

word-wrap属性告诉浏览器当一个单词的长度超出包含块的宽度时如何处理。

值	说明
normal	单词不断开，即使无法完全放入包含块元素
break-word	断开单词，使其放入包含块元素

p元素使用了normal值，意思是浏览器不会断开长单词，即使长单词溢出p元素。

1.6 首行缩进

text-indent属性用于指定文本块首行缩进，值可以是长度值，%。

text-indent: 15%;

2、文本装饰与大小写转换

text-decoration和text-transform两个属性分别允许我们装饰文本和转换文本大小写。

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

3、创建文本阴影

text-shadow为文本块应用阴影，值h-shawod,v-shadow,blur,color

h-shadow和v-shadow值分别指定阴影的水平偏移和垂直偏移。它们的值用长度值表示，允许负值。blur值也是一个长度值，定义了阴影的模糊程度，该值可选。color值指定阴影的颜色。

text-shadow: 0.1em 0.1em 1px lightgrey;

4、使用字体

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

格式：

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

4.1 选择字体

font-family属性指定使用的字体,按照优先顺序排列。浏览器从字体列表中的第一种开始尝试，直到发现合适的字体为止。这种方法很有必要，因为你可以使用用户安装在电脑上的字体，而由于操作系统和偏好不同，不同用户安装的字体会有所不同。

当然还有最后的保障:CSS定义了几种任何情况下都可以使用的通用字体。有几大类字体，称为通用字体系列，浏览器在呈现这些字体时可能有差异。

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

4.2 设置字体大小

font-size属性的值：

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

4.3 设置字体样式的粗细

可以使用font-weight属性设置字体粗细——增加字体“重量”会使文本更粗。font-style属性允许我们在正常字体、斜体和假斜体（倾斜字体）三种字体之间选择。斜体和假斜体有明显区别，但这是技术上的，通常从文本外观看来差别很小。

font-weight: medium;

5、使用web字体

我之前提到过CSS字体的一大问题:不能指望用户的机器上一定安装了你想使用的字体。解决这个问题的方法是使用Web字体，我们可以直接下载Web字体并使用在自己的页面上，而不需要用户做什么。使用@font-face指定Web字体。

#font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('http://titan/listins/MyFont.woff');
}

使用@font-face的时候，需要使用标准字体属性来描述正在使用的字体。font-family属性定义字体名称，用来引用要下载的字体;font-style和font-weight属性告诉浏览器如何设置Web字体的样式和粗细，也就是说你可以创建斜体和粗体字符;src属性用来指定字体文件的位置。Web字体有多种格式，但WOFF格式得到了最为广泛的支持和应用。