13.4　使用@font-face

你已经下载了Web字体包，并在浏览器中测试了demo.html文件。现在，不妨看看其中的原理。首先，让我们看看stylesheet.css中的代码（参见图13.4.1）。

如你所见，样式表相当简单，只有一条样式规则。不可否认的是，这条规则相当重要！

@font-face语法与传统的CSS相比有些不同。其中的一点就是，它并未像你从第8章起接触到的传统方式那样，一个选择器后面跟着一些属性/值对。这条样式规则以看起来有些奇怪的@font-face声明开头。

  1. @font-face {
  2. font-family: 'LeagueGothicRegular';
  3. src: url('League_Gothic-webfont.eot');
  4. src: url('League_Gothic-webfont.eot?#iefix')
  5. format('embedded-opentype'),
  6.         url('League_Gothic-webfont.woff') format('woff'),
  7.         url('League_Gothic-webfont.ttf') format('truetype'),
  8.         url('League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
  9. font-weight: normal;
  10. font-style: normal;
  11. }

图13.4.1　这是Font Squirrel在字体包中提供的@font-face样式规则。可以注意到，它使用了单引号，而不是本书其他CSS示例中使用的双引号。在CSS中，单引号和双引号的效果是一样的，因而你可以根据自己的偏好进行选择

为了搞清楚@font-face的工作原理，可以将@font-face样式规则理解成建立一种为其他CSS所用的工具。这条规则并不影响任何特定元素的样式，但它为在CSS中使用Web字体打下了基础。

这条样式规则的第一行是对字体系列的指定：

  1. font-family: 'LeagueGothicRegular';

这条声明指出了这种Web字体的名称。在本例中，我们使用LeagueGothicRegular，而实际上它可以是你选择的任何字体的名称。你可以选择Banana或The Best Font Ever，这取决于你自己。

这条样式规则的下面几行告诉浏览器字体文件的位置。其中包括为所有支持Web字体的不同浏览器准备的字体文件格式。这些语法看起来有些吓人，但我们的目的并不是要完全地理解它们。如果你想进一步深入研究，了解这样显示的原理，我向你推荐Ethan Dunham发表在Fontspring上的博文（www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax）。作者在这篇文章中解释了他对@font-face语法的最新思考。

  1. 将Web字体包含到网页里

我们讲过了@font-face的语法，但还从来没有真正地将Web字体放到网页里去。让我们看看demo.html的代码，并研究一下位于页面顶部的CSS代码（如图13.4.2所示）。

  1. h1.fontface {
  2.      font: 60px/68px 'LeagueGothicRegular',➝ Arial, sans-serif;
  3. letter-spacing: 0;
  4. }
  5.  
  6. p.style1 {
  7.      font: 18px/27px 'LeagueGothicRegular', Arial, sans-serif;
  8. }

图13.4.2　这是demo.html文件顶端的CSS。Font Squirrel将它放在这个位置，是出于演示的目的。在实践中，最好将所有的CSS放在一个外部样式表中

这些规则为HTML添加了League Gothic Web字体的样式。在第一条样式规则中，60px/68px指定了字体大小和行高。在示例中我们以像素为单位指定大小，但你也可以使用其他的单位。在字体大小和行高之后指定了'LeagueGothicRegular';, Arial, sans-serif。如10.2节所述，可以像这样指定多个字体系列（以逗号分隔），即所谓的字体栈。如果浏览器不支持字体栈中的第一个字体，便会尝试下一个字体。由于我们使用的是Web字体，因此浏览器很可能如期显示该Web字体，但使用字体栈仍然是一种很好的实践方式。毕竟，并非所有的浏览器都支持Web字体。

在CSS中，font属性引用了LeageGoth-icRegular，这也是@font-face样式规则中指定的font-family名称。更重要的是，它是像指定其他字体一样指定这一字体的。在浏览器看来，League Gothic就像是在安装在网站访问者计算机上的字体。

既然你已测试成功，或许你想再尝试一些其他的Web字体？

我们的下一项任务就是为主标题使用League Gothic字体，为页面的其余文字使用Crimson字体。

  1. 使用多种Web字体的方法

回到Font Squirrel，下载Crimson Web字体包，其中包含了六种不同的字体，如图13.4.3所示。

13.4　使用@font-face - 图1

图13.4.3　如你之前做过的，点击Get Kit下载该Web字体包的ZIP压缩包。下载完成后，将压缩包解压

  1. 在同一个项目中使用多种Web字体

  2. 在字体包文件夹中有很多字体。我们只需要其中的少数几个。选中文件名为Crimson-Roman-webfont的四个Web字体文件，将它们复制到我们之前操作过的League Gothic文件夹。结果应如图13.4.4所示。

13.4　使用@font-face - 图2

图13.4.4　现在，我们在同一文件夹中有了两种Web字体。好样的！（关于文件的组织，参见最后一条提示。）

  1. 在stylesheet.css中输入以下样式规则：
  1. @font-face {
  3.     font-family: "CrimsonRoman";
  5.     src: url("Crimson-Roman-webfont.eot");
  7.     src: url("Crimson-Roman-webfont.eot?#iefix") format("embedded-opentype"),
  9.          url("Crimson-Roman-webfont.woff") format("woff"),
  11.          url("Crimson-Roman-webfont.ttf") format("truetype"),
  13.          url("Crimson-Roman-webfont.svg#CrimsonRoman") format("svg");
  15. }

我敢肯定，这些代码看起来非常熟悉。现在，我们的样式表里既有League Gothic字体的样式规则，也有Crimson Roman的样式规则。下一步是添加选择器，将Crimson字体用到页面中去。

  1. 在你刚刚输入的@font-face样式规则后面，从新的一行输入以下内容：
  1. body {
  3. font-family: "CrimsonRoman", Georgia, serif;
  5. }
  1. 在新的一行，输入以下样式规则，对h1添加样式：
  1. h1 {
  3.      font-family: "LeagueGothic Regular", Arial, sans-serif;
  5.      font-size: 4em;
  7.      font-weight: normal;
  9. }

接下来，我们将创建一个新的HTML文档。

  1. 在同一个文件夹，创建一个新的HTML文件，并命名为demo2.html。

  2. 在demo2.html页面中输入以下代码（注意这里是如何指向我们刚才编辑的stylesheet.css的）：

  1. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  7.     <meta charset="UTF-8" />
  9.     <title>Our Awesome Web Font Examples</title>
  11.     <link rel="stylesheet" href="stylesheet.css" />
  13. </head>
  15. <body>
  17. <article>
  19.     <h1>Headlines Are Very Important</h1>
  21.     <p>There is more to Philadel phia than cheesesteaks, Rocky and the Liberty Bell. Did you know that Phila delphia used to be the capital of the United States? You will also find that Philadelphia has our nation's first Post Office, Hospital, and free library. That Ben jamin Franklin was one busy fellow!</p>
  23. </article>
  25. </body>
  27. </html>
  1. 在Web浏览器中打开demo2.html，如图13.4.5所示（参见2.7节）。现在，你的字体看起来应该很不错。

13.4　使用@font-face - 图3

图13.4.5　标题使用League Gothic字体，页面的其余文字使用Crimson字体

提示　我们使用了来自Font Squirrel的字体包里的字体系列名称，如LeagueGothic-Regular。这是很好的描述性名称，但另一种学派认为应该使用更为语义化的名称，如font-family: "Headline";。选择这种方案的一个好处是，如果你想改主意，选择另一种Web字体（而不是League Gothic），你只需要替换@font-face样式规则，并将字体系列的名称指定为Headline即可。

　

提示　尽管上述步骤和示例中假定字体文件、样式表和HTML页面均位于同一个目录，但在实践中最好使用文件夹对它们进行组织（参见2.6节）。一定要根据需要修改HTML中指向样式表的路径，以及CSS中指向Web字体的路径（参见1.7节）。