第六章 文本格式化
1.font-family 属性设置字体。除了指定想要的字体之外还要使用备用字体。例如：
p{ font-family：Arial ,Helvetica ,sans-serif; }
如果字体的名称中包含多个单词，则必须用双引号（””）将它们括起来。
2.·serif字体，适合冗长的文字信息。
·sans-serif字体看起来干净而整洁因此经常被放在标题上。
·monospaced字体经常用于显示计算机代码。字体中的每个字母都是等宽的。
·其他常用字体：Arial Black 、Arial Narrow、Impact
3.字体类型：
·EOT：只适用于IE浏览器。
·.ttf或.otf：是计算机中最常用的字体格式。
·WOFF：是一种比较新的字体格式。
·SVG：并不是一种字体格式。
4.使用字体：一旦下载好正确的字体文字，就可以使用了。首先将这些文件复制到你计算机中保存网站文件的目录下，然后在样式表中添加@font-face命令，告诉浏览器要去哪里下载这种字体，如：
@font-face {
font-family:”League Gohic”;
src:url(‘fonts/League_Gothic-webfont.ttf’);
}
5.当在样式中应用字体时，假如为了使所有h1标签都使用League Gothic字体，可以像下面这样显示：
h1 {
font-family: ‘League Gothic’;
font-weight: normal;
}
将font-weight设为normal是告诉浏览器只使用原版的League Gothic字体。
假设你要在网站上使用League Gothic所有不同的字体格式，就可以像下面这样改写上述代码：
@font-face{
font-family:’League Gothic’; //定义了字体的名称
src: url(‘fonts/League_Gothic-webfont.eot’); //针对IE9，但是仅当它处于兼容模式下才行。
src: url(‘fonts/League_Gothic-webfont.eot?#iefix’) //指定多个字体类型，？#iefix是为了兼容更多的IEbug，针对IE6~IE8。
format(‘embedded-opentype’), //表示字体格式，针对不同的字体格式将这个添加到每个URL的后面。
url(‘fonts/League_Gothic-webfont.woff’) format(‘woff’),
url(‘fonts/League_Gothic-webfont.ttf’) format(‘truetype’),
url(‘fonts/League_Gothic-webfont.svg’) format(‘svg’);
}
chrome会下载能够理解的第一个字体文件，因此字体文件排序很重要，一般woff字体放在首选，因为它文件小，下载快。
6.添加粗体斜体简便的方法：
·在@font-face指令中添加font-weight和font-style属性。
需要用4个@font-face指令来涵盖粗体、斜体及正常文本的所有变体。
例如：不使用粗体和斜体的样式为：
@font-face {
font-family：‘PTSans’；
src：url(‘PTSansRegular.eot’);
src：url(‘PTSansRegular.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansRegular.woff’) format(‘woff’),
url(‘PTSansRegular.ttf’) format(‘truetype’),
url(‘PTSansRegular.svg’) format(‘svg’),
font-weight:normal;
font-style:normal;
}
使用该字体的斜体版本为：
@font-face {
font-family：‘PTSans’；
src：url(‘PTSansItalic.eot’);
src：url(‘PTSansItalic.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansItalic.woff’) format(‘woff’),
url(‘PTSansItalic.ttf’) format(‘truetype’),
url(‘PTSansItalic.svg’) format(‘svg’),
font-weight:normal;
font-style:italic;
}
使用该字体的粗体版本为：
@font-face {
font-family：‘PTSans’；
src：url(‘PTSansBold.eot’);
src：url(‘PTSansBold.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansBold.woff’) format(‘woff’),
url(‘PTSansBold.ttf’) format(‘truetype’),
url(‘PTSansBold.svg’) format(‘svg’),
font-weight:bold;
font-style:normal;
}
使用该字体的粗体以及斜体版本为：
@font-face {
font-family：‘PTSans’；
src：url(‘PTSansBoldItalic.eot’);
src：url(‘PTSansBoldItalic.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansBoldItalic.woff’) format(‘woff’),
url(‘PTSansBoldItalic.ttf’) format(‘truetype’),
url(‘PTSansBoldItalic.svg’) format(‘svg’),
font-weight:bold;
font-style:italic;
}
7.添加粗体斜体并支持IE8：每种变体的名称都要唯一。
例如：不使用粗体、斜体为：
@font-face {
font-family：‘PTSans’；
src：url(‘PTSansRegular.eot’);
src：url(‘PTSansRegular.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansRegular.woff’) format(‘woff’),
url(‘PTSansRegular.ttf’) format(‘truetype’),
url(‘PTSansRegular.svg’) format(‘svg’),
font-weight:normal;
font-style:normal;
}
使用该字体的斜体版本为：
@font-face {
font-family：‘PTSansItalic’；
src：url(‘PTSansItalic.eot’);
src：url(‘PTSansItalic.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansItalic.woff’) format(‘woff’),
url(‘PTSansItalic.ttf’) format(‘truetype’),
url(‘PTSansItalic.svg’) format(‘svg’),
font-weight:normal;
font-style:italic;
}
使用该字体的粗体版本为：
@font-face {
font-family：‘PTSansBold’；
src：url(‘PTSansBold.eot’);
src：url(‘PTSansBold.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansBold.woff’) format(‘woff’),
url(‘PTSansBold.ttf’) format(‘truetype’),
url(‘PTSansBold.svg’) format(‘svg’),
font-weight:bold;
font-style:normal;
}
使用该字体的粗体以及斜体版本为：
@font-face {
font-family：‘PTSansBoldItalic’；
src：url(‘PTSansBoldItalic.eot’);
src：url(‘PTSansBoldItalic.eot?#iefix’)
format(‘embedded-opentype’),
url(‘PTSansBoldItalic.woff’) format(‘woff’),
url(‘PTSansBoldItalic.ttf’) format(‘truetype’),
url(‘PTSansBoldItalic.svg’) format(‘svg’),
font-weight:bold;
font-style:italic;
}
8.颜色表示：
（1）十六进制表示颜色。格式： #ffffff #后面跟着六个0~f数值。
（2）RGB表示颜色值。这种颜色值由3个数组成，每个数各代表一种色调（红、绿、蓝），它们均用百分比（0%~100%），或者0~255之间的数字表示。例如，将文本的颜色设置为白色：
color：rgb(100%,100%,100%);
或者
color：rgb(255,255,255);
（3）RGBA：RGBA表示Red、Green、Blue、Alpha。
例如：color：rgba(255,100,5,.5);
9.格式化词语和字母：
（1）大写化：text-transform：uppercase；
（2）小写化：text-transform：lowercase；
（3）首字母大写：text-transform：capitalize；
（4）小型大写字母：text-transform：small-caps；
10.文本的修饰：
（1）下划线：text-transform：underline；
（2）上划线：text-transform：overline；
（3）中间线：line-through。
（4）可以合并多个属性来修饰文本，例如给文本添加上划线和下划线：text-transform：underline overline。
11.字母间距和字词间距：
（1）字母间距：letter-spacing；正值增加字母间距，负值减少字母间距。
（2）字词间距：word-spacing；
12.给文本添加阴影：
text-shadow属性需要四个方面的信息：水平偏移量、垂直偏移量、阴影的模糊度、阴影的颜色。也可以添加多个阴影创建复杂的效果，多个阴影之间用逗号隔开。这个效果只在IE10以上有效果。
13.格式化整个段落：
（1）调整行间距：line-height；
（2）对其文本：text-align；
（3）首行缩进：text-indent；
（4）控制段落之间的距离：margin-top&margin-bottom；例如，消除段落之间的间隙：
P{
margin-top：0；
margin-bottom：0；
}
14.给列表定义样式：
（1）给项目符号和项目序号定位：list-style-position：outside、inside。padding-left可以调整项目符号和文本之间的距离，使用该属性时只有在list-style-positon属性值为outside或者没有使用list-style-position时才有效。
（2）图形项目符号：list-style-image：url（相对于样式表的图片路径）；background-image属性可以定位图片。