CSS3秘笈：第六章

第六章  文本格式化

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属性可以定位图片。