文本属性

首先宏观看一下哪些属性可以指定和改变字体的外观，再逐个学习各个属性需要注意的细节问题。

font-family：字体

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

font-size：字体大小
```
body {
  font-size: 14px;
}
```
color：文本颜色
```
body {
	color: red;
}
```
font-weight：字体粗细（lighter，normal，bold，bolder）
```
body {
	font-weight: bold;
}
```
text-decoration：为文本增加风格（上划线、下划线、删除线）
```
body {
  text-decoration: underline;
}
```

字体

首先了解什么是字体系列。每个font-family包含一组有共同特征的字体。共有5个字体系列：sans-serif、serif、monospace、cursive和fantasy。每个字体系列包含大量的字体。

sans-serif：无衬线字体，即笔画结尾是平滑的字体。
serif：带衬线字体，笔画结尾有特殊的装饰线或衬线。
monospace：等宽字体，即字体中每个字宽度相同。
cursive：看似手写的字体，有时标题会看到这种字体。
fantasy：Fantasy 字体主要是那些具有特殊艺术效果的字体。

font-family 属性指定的是一个优先级从高到低的可选字体列表，他们都来自同一个字体系列，最后总是放一个字体系列名。浏览器会依次查找字体是否存在，如果存在，则使用这个字体；若不存在，则继续往下查找。

引入Web字体

要引入Web字体，就要用到CSS的一个比较新的特性：@font-face规则。这个规则允许你定义一种字体的名字和位置，然后可以在你的页面中使用。Web字体如何工作：

要利用Web字体，浏览器首先获取一个引用这些字体的HTML页面。
浏览器再获取这个页面所需要的Web字体文件（.woff格式等）。
获取了这个字体之后，浏览器显示页面时就会使用这个字体。

下面说明如何使用Web字体：

找到一个字体（推荐使用.woff格式）。
复制这个字体的URL。

在CSS中增加@font-face属性：

@font-face {
  font-family: "Embema One";  /* 自定义名字 */
  src: url("http://http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
    url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}

在CSS中使用font-family名：

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

加载页面。

px：按像素指定字体大小，这时，告诉浏览器的是字母的高度是多少像素。
%：用百分数指定字体大小时，会相对于另一个字体指出这个字体有多大。由于font-size是从父元素继承的一个属性，因此指定百分数时，是相对于父元素的字体大小。
em：类似于百分数，这也是一个相对度量单位，指定一个比例因子，如font-size: 1.2em;。如果是用这种度量来指定<h2>的大小，那么它的大小将是父元素字体大小的1.2倍（并且会四舍五入）。
关键字：xx-small, small, medium, large, x-large, xx-large。每一个都比前一个大20%，small通常为12px。

指定字体大小有四种方法之多，那么到底如何指定字体大小呢？

选择一个关键字（推荐使用small或medium），指定它作为body规则中的字体大小，这相当于页面的默认字体大小。
使用em或%（这两种方法作用一样），相对于body字体大小指定其他元素的字体大小。

注意：

指定<body>元素的字体大小实际上是在为页面定义一个默认大小。
如果没有指定字体大小，只能得到浏览器默认的字体大小。
<h1>是默认文本字体大小的200%，<h2>是150%，<h3>是120%，<h4>是100%，<h5>是90%，<h6>是60%。
如果在body中指定字体大小为90%，那么将是默认字体大小的90%，默认字体大小通常为16像素。

字体粗细

font-weight用来控制字体粗细：bold，normal，bolder，lighter。还可以将这个属性设置为100到900之间的一个数（100的倍数），不过没有得到浏览器的广泛支持，通常不使用。

字体风格

字体风格有两种：italic(斜体)和oblique(倾斜)。斜体文本是倾斜的，同时还有额外的弯曲衬线。倾斜知识文本倾斜。

Web颜色

在学习文本颜色（color）之前，必须先对颜色稍做了解，才能更好的处理颜色以及在CSS中指定颜色。下面将了解在页面中使用颜色的全部知识：

屏幕上如何显示颜色
CSS有哪些描述颜色的方法

Web颜色如何工作

Web颜色是按构成颜色的红、绿、蓝三个分量所占数量来指定的。每种颜色会分别指定一个从0到100%的数值，然后把它们混合起来得到最终的颜色。

指定颜色的方法

按名指定颜色：CSS中有16种基本颜色和150钟扩展颜色可以采用这种方法指定。
用红、绿、蓝值指定颜色：
- color: rgb(80%, 40%, 0%)。rgb是red、green、blue的缩写。
- color: rgb(204, 102, 0)。指定为0到255之间的一个数值，255的80%就是204，40%是102，0%是0。
十六进制码指定颜色：#cc6600，每组两位数字代表红、绿、蓝分量。转化为十进制后就是对应的红绿蓝指定颜色。

文本装饰

text-decoration允许为文本增加一些装饰性的效果，如下划线（underline）、上划线（overline）和删除线（line-through）。如果不想文本装饰，可以使用“none”。

《Head First HTML and CSS 》学习笔记——8、字体和颜色样式

目录