6.4 使用Web字体
在上一节中，看到我们十分确信所用的字体系列驻留在每个人的计算机上。也就是说，可以保证大多数计算机都会呈现Arial或Times New Roman，或者具有用于serif和sans-serif的所必需的默认字体，如果这是样式表所需要的话。但是，利用CSS3中包括的@font-face特性，甚至可以对在线放置的内容发挥更大的设计能力。
简而言之，@font-face特性允许在HTML5标记中定义要使用的字体，使得无论用户是否在他们的计算机上安装了那些字体（并且很有可能用户没有在他们自己的计算机上安装你所选的奇特字体），都会显示出它们。字体的定义可以是本地的（对于你的Web服务器而言，如果你在意在那里包括字体文件的话），或者是远程的（可以链接到许多字体存储的位置）。
在样式表中，要定义在整个页面中使用的新字体，可以简单地使用下面的结构：
@font-face {
font-family: 'some_name_goes_here';
src: url('some_location_of_the_font_file');
}
在定义它之后，可以在样式表中的其他任何位置引用font-family，如下所示：
h1 {
font-family:some_name_goes_here;
font-size:28px;
text-align:center;
}
但是，你可能会问，从哪里获得字体呢？可以从许多位置获得字体—有一些字体是免费的，其他字体则不然。一个广泛流行的位置是Google Web Fonts，这不仅是因为这里的字体是免费的，而且因为Google被广泛认可为提供了一个稳定的平台，如果你的Web排版样式依赖于驻留在别人的Web服务器上的字体，这就很重要。其他一些用于获得字体的可靠的付费站点是TypeKit和Fontspring。付费站点不一定很糟糕，艺术家们也必须挣钱。我在TypeKit上进行了个人订购，并且对它们的服务非常满意，但是我也把Google Web Fonts用于许多项目。
让我们试着修改程序清单6.3中的代码，包括进一种Google Web Font字体，用于h1元素。如果转到 http://www.google.com/fonts ，并选择一种你喜欢的字体，Google提供了要在HTML和CSS中包括的代码。我选择了一种名为Cherry Swash的字体，Google建议我在自己的HTML模板中的< head >区域中包括以下代码：
<link href='http://fonts.googleapis.com/css?family=Cherry+Swash:400,700'
rel='stylesheet' type='text/css' />
注意：
如果查看前面的链接位置，可以看到Google的@font-face定义已经为我们完成了。确切地讲，其定义如下：
@font-face {
font-family: 'Cherry Swash';
font-style: normal;
font-weight: 400;
src: local('CherrySwash'), local('CherrySwashRegular'), url(http://themes.
googleusercontent.com/static/fonts/cherryswash/v1/HqOk7J1TZ5i3LejF0vnhCUOGz
7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Cherry Swash';
font-style: normal;
font-weight: 700;
src: local('Cherry SwashBold'), local('CherrySwashBold'), url(http://themes.
googleusercontent.com/static/fonts/cherryswash/v1/CfyMyQqfucZPQNB0nvYyHl4twX
kwp3_u9ZoePkT564.woff)
format('woff');
}
既然我的代码知道在哪里寻找字体，我们就只需引用它即可：
h1 {
font-family:'Cherry Swash';
font-size:28px;
text-align:center;
}
图6.4显示了使用Web字体的新简历。
