13.3　下载第一个Web字体

下载免费的Web字体很快也很方便。我们将使用Font Squirrel，它提供了一个demo.html文件让你查看这些字体在实践中的效果。

下一节，我们将研究@font-face的语法以及如何将Web字体集成到页面中。

1. 从Font Squirrel下载Web字体

• 进入Font Squirrel的@font-face包板块（www.fontsquirrel.com/fontface），选择你想使用的字体。在这里，我选择了League Gothic。

• 点击Get Kit（获取包）链接，如图13.3.1所示，就会立即开始下载。下载的文件是一个ZIP压缩包。

• 下载完成后，打开压缩包，就会看到一个包含Web字体、CSS文件和demo.html文件的文件夹，如图13.3.2所示。

图13.3.1　如果你想在下载之前进一步查看字体，可以点击View Font（查看字体）了解关于字体的更多信息，以及下载选项。如果点击View @ff Demo（查看@ff¹示例），则可以看到使用这种字体作为Web字体时的完整范例，这是一种快速测试字体在不同浏览器中显示效果的方法

^{1 @ff指的是@font-face。──译者注}

图13.3.2　League Gothic的ZIP压缩包展开后的内容。如你所见，有一个demo.html文件、四个Web字体、一个许可证和一个样式表

1. 在demo.html文件中查看所选字体

在浏览器中打开位于所下载字体文件夹里的demo.html文件，如图13.3.3所示（参见2.7节）。

图13.3.3　看！Web字体尽显魅力

这个演示文件显示，Web字体确实起作用了。这是非常令人激动的！在你宣布胜利并准备收工之前，我们还是要在下一节讲讲其中的工作原理。

提示　你开始下一节项目之前，想获得字体选择的灵感吗？Typekit团队写了一篇很好的博客文章，这篇文章介绍了大量关于Web字体及一般性排版的有用信息。初学者可以尝试阅读“Sites we like”（我们喜爱的站点）系列，参见http://blog.typekit.com/category/sites-welike/。

提示　需要在Photoshop中使用这些字体吗？你可以将Web字体包中的TrueType（.ttf）字体装到你自己的计算机上。安装完成后，你就可以像使用其他字体一样使用该字体了。