Head First HTML与CSS
第八章 增加字体和颜色样式
CSS——掌控页面的表现
指定和改变字体的外观
1.用font-family属性选择字体
在CSS中，字体划分为“字体系列”（font family），可以从中指定希望页面中各个元素使用的字体。大多数计算机上通常只安装了部分字体，因此使用某些特殊字体时要注意。
body{
font-family:Verdana,Geneva,Arial,sans-serif;
}
2.用font--size属性控制字体大小
用CSS指定字体大小有很多种方法，还可以允许用户调整字体大小而不影响设计师的设计。
body{
font-size:14px;
}
3.用color属性为文本设置颜色
可以用color属性改变字体颜色。接下来会学习有关颜色的细节，包括神秘的颜色“十六进制码”。
body{
color:silver;
}
4.用font-weight属性影响字体的粗细
可以使用font-weight属性改变字体粗细。
body{
font-weight:bold;
}
5.使用text-decoration属性为文本增加更多风格。
通过使用text-decoration属性，可以对文本增加一些装饰，包括上划线、下划线和删除线。
body{
text-decoration:underline;
}
字体系列到底是什么？
我们已经见过font-family属性，目前只是将它的值定为sans-serif，其实还可以指定其他的字体。
每个font-family包含一组有共同特征的字体。共有五个字体系列：sans-serif,serif,monospace,cursive和fantasy.
1.sans-serif字体系列
没有衬线的字体，与serif字体相比，通常认为它在计算机屏幕上更容易识读。
2.serif字体系列
有衬线字体。类似新闻报纸的排版。衬线是字母末端的装饰性小细线。
3.monospace字体系列
包含固定宽度的字符。例如，一个“i”在水平方向和“m”占有的宽度是相同的。这类字体主要用于显示软件代码示例。
4.cursive字体系列
包括看似手写的字体。有时会在标题中使用。
5.fantasy字体系列
包含某种风格的装饰性字体。
使用CSS指定字体系列
接下来看一个例子：
body{
font-family:Verdana,Geneva,Arial,sans-serif;
}
使用font-family可以指定多个字体，用逗号分隔；
字体名称必须区别大小写，如Verdana不能写成verdana或VERDANA；
通常指定的是一个候选字体列表，从前往后，选定第一个浏览器支持的字体，即如果不支持第一个，尝试下一个，以此类推；
一般最后放一个通用的字体系列名，如“sans-serif”、“serif”等，防止候选字体列表中没有浏览器可以使用的字体。而“sans-serif”、“serif”并不是真正的字体名。取代它们的是浏览器定义的该字体系列的默认字体。
问：如果一个字体名中包含多个单词，该如何指定呢？
只需要在font-family声明中的字体两边加上引号，如:font-family:"Courier New",sans-serif;
Web字体
如果用户没有你想要使用的字体，可以利用CSS的一个特性：@font-face，使用Web字体（Web font）向用户的浏览器提供一种字体。一旦提供了新字体，浏览器就可以使用该Web字体。流程如下：
1.要利用Web字体，浏览器首先获取一个引用这些字体的HTML页面。
2.浏览器再获取这个页面所需的Web字体文件。
3.获取这个字体后，浏览器显示页面时就会使用这个字体。
自行了解：Web字体托管服务。
常用Web字体格式及扩展名
TrueType字体：.ttf
OpenType字体：.otf
Embedded OpenType字体：.eot
SVG字体：.svg
Web开放格式字体：.woff
大多数现代浏览器上支持最为广泛的格式是Web开放格式字体，推荐使用。
为页面增加Web字体
无论是字体文件放在自己网站的服务器上，还是使用字体托管服务。我们都需要字体文件的URL。
获得URL后，要使用Web字体，只需在CSS中增加以下规则：
@font-face{
font-family:"Emblema One";
src:url("http://wickedlysmart.com/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/EmblemaOne-Regular.ttf");
}
规则与正常的规则不同，正常规则会选择一组元素并指定样式，而@font-face规则会建立一个字体，将指定一个fony-family名，以便以后使用该字体。
src属性告浏览器在哪里可以得到这个字体，浏览器会尝试加载每一个src文件，直到找到它能支持的一个文件。一旦加载，会为这个字体分配font-family属性中指定的名字，在这里就是"Emblema One"。
这样，我们就可以在CSS中使用这个字体了。如下：
h1{
font-family:"Emblema One",sans-serif;
}
急在一时不如贵在坚持。每天与大家共同学习，谢谢！