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;

}

急在一时不如贵在坚持。每天与大家共同学习，谢谢！