HTML:Expanding Your Vocabulary

本章的内容主要是如何运用CSS对文本做装饰，包括字体、大小、颜色、粗细和线条装饰。下面的语句展示它们对应的property：

• body {font-family: Verdana, Geneva, Arial, sans-serif;}
• body {font-size: 14px;}
• body {color: silver;}
• body {font-weight: bold;}
• body {text-decoration: underline;}

接下来我按照顺序来总结本章的知识点。

一.字体（font-family）

字体的话可以分为几大类，这几大类的特点和适用范围如下表：

font-family example characteristic usage sans-serif Verdana,Geneva,Arial Black 这种字体的可读性较好，看起来更亲切可爱 serif Times,Georgia,Times New Roman 传统的字体 monospace Courier,Courier New,Andale Mono 这种字体可以使每个字母的宽度一样 代码字体 cursive Comic Sans,Apple Chancery 类似手写字体 fantasy Last NinjA,Impact 艺术字

定义字体的语法可以是这样的：

body {font-family: Verdana, Geneva, Arial, sans-serif;}

前三个是具体的字体，都属于sans-serif，浏览器会依次选择与用户系统匹配的字体，如果用户系统里没有Verdana，则跳过选择Geneva；如果Geneva也没有的话就选Arial；如果 Arial还是没有呢？那么浏览器就会使用系统中sans-serif family的默认字体。

注：多个字母组成的字体名需加双引号

网页字体

当我需要一种很酷炫的字体时，发现这种名为“IamCool”的字体在大部分电脑上并不存在，这时我们就需要网页字体——IamCool.woff。

Web Open Font Format : .woff是现如今广泛使用于网页字体的格式

如何使用网页字体呢？

1. 首先我们需要把我们需要的“IamCool.woff”字体文件上传至服务器的指定文件夹里面；
2. 然后使用新的CSS语句，先定义字体，再运用字体，定义字体的语句如下：

@font-face {font-family: "Emblema One";src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");src文件路径的格式既可以是相对路径，也可以是绝对路径；使用相对路径时可以使用括号也可以使用引号也可以什么都不加

src:(../chapter8/journal/EmblemaOne-Regular.woff);}src:"../chapter8/journal/EmblemaOne-Regular.woff";}src:..chapter8/journal/EmblemaOne-Regular.woff;}这三种表达方式都合法，体现了CSS语法的灵活性。

1. 最后调用字体

h1 {font-family: "Emblema One", sans-serif;}

二.字体大小

字体大小可以用三种单位：px，%，em

px

px是pixel的意思，是像素的基本单位，1px就是1像素大小

body {font-size: 14px;}

这里字体大小14px指的是字体的高度。

%

另一种单位是%，用法参照下面

body {font-size: 14px;}h1 {font-size: 150%;}

因为h1是body的子元素，则h1在继承body的字体大小14px外，还扩大了150%，即1.5倍，此时h1的字体大小为21px

em

em的用法原理跟%一样，只是数值上有所差异，

body {font-size: 14px;}h1 {font-size: 150%;}h2 {font-size: 1.2em;}

此时h2的字体大小是14px * 1.2 =17px

keyword

还可以使用关键字来定义字体大小：

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

关于字体大小

默认的字体大小是16px

<h1> is 200% of the default body text font size<h2> is 150%<h3> is 120%<h4> is 100%<h5> is 90%and <h6> is 60%.

三.字体样式

用font-weight来控制字体的粗细，font-weight定义为bolder,bold,normal,lighter

用font-style来控制字体的样式，取值oblique和italic，都能让字体倾斜

用text-decoration可以在文本中加入线条，underline增加下划线，line-through在文字中划线，还有overline

四.字体颜色

高中就学过计算机的像素颜色是红绿蓝三基色，所有的颜色是由这三基色组成;不同的配比就生成不同的颜色。

书中列出三种定义颜色的方法：

直接使用颜色的名称：
body { background-color:**silver**; }

使用三基色的配比：
body { background-color: rgb(80%, 40%, 0%); }

使用三基色的数值（红绿蓝的数值都是从0到255）：
body { background-color: rgb(204, 102, 0); }

还有一种更常用的是hexcode方法，比如：

body { background-color: #cc6600; }

其中cc是红色的数值，为204；66是绿色的数值，为102；00是蓝色的数值，为0。
想要更多的颜色信息，可以访问维基百科里面提供的众多颜色数值。

body { background-color: #c60; }和上面的表达式等价，因为CSS允许我们缩写hexcode，所以 #c60 = #cc6600