Web字体是可以在网站和Web应用程序内部使用的外部(额外)字体。 Web字体就像图像一样嵌入到它们自己的文件中。因此，要使HTML页面使用Web字体，必须引用Web字体文件。我们可以从CSS内部引用网络字体文件。本文将说明如何通过CSS样式表使用网络字体。

查找网络字体

Web字体由制作字体的公司提供。因此，我们可以从许多不同的地方找到网络字体。不过有两个地方是不错的开始：

使用网络字体

要在CSS中使用网络字体，我们必须在CSS中定义字体。这是在CSS中定义Web字体的方式：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), 
       local('Roboto-Regular'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) 
       format('woff');
}

本示例定义了Google的网络字体Roboto。现在，我们可以在设置文本样式时使用字体系列名称，如下所示：

p {
    font-family: Roboto;    
}

本示例将所有p元素的字体系列设置为Roboto(先前定义的网络字体)。下一段是使用Roboto网络字体设置的，因此我们可以看到呈现时的外观：

该文本使用Roboto网络字体设置。该文本设置为普通字体。

可能很难看到两种字体之间的差异，因此这是一种网络字体，其中的差异更明显：

@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: local('Shadows Into Light'), 
       local('ShadowsIntoLight'), 
       url(http://fonts.gstatic.com/s/shadowsintolight/v5/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2) 
       format('woff2'), 
       url(http://fonts.gstatic.com/s/shadowsintolight/v5/clhLqOv7MXn459PTh0gXYHW1xglZCgocDnD_teV2lMU.woff) 
       format('woff');
}

该文本使用"将阴影导入光"进行设置。

@ font-face解释

@ font-face声明以一种字体样式定义了一种网络字体。如果我们需要普通，斜体和粗体字体样式，则必须定义三种不同的Web字体。每种样式使用一种网络字体。外观如下：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), 
       local('Roboto-Regular'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) 
       format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), 
       local('Roboto-Bold'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) 
       format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), 
       local('Roboto-Italic'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) 
       format('woff');
}

现在，我们可以通过设置网络字体定义中使用的"字体样式"和"字体粗细"来在HTML页面中使用这三种字体样式。例如，要使用斜体字体，可以这样编写：

p {
    font-family: Roboto;
    font-style : italic;
    font-weight: 400;
}

如我们所见，这些设置与为字体的斜体版本声明的" font-family"，" font-style"和" font-weight"的设置匹配。这是使用Roboto网络字体的斜体版本呈现文本时的外观：

该文本使用Roboto斜体字设置。

@ font-face声明的src属性指向网络字体(网络字体文件)的来源。 src属性包含三个不同的参数：

• local
• url
• format

" local"参数是字体的名称，如果在计算机上本地安装了Web字体，则会调用该名称。如果浏览器找到具有该名称的本地Web字体，则浏览器不需要下载Web字体文件。这样可以加快页面下载速度。

如我们所见，每种字体版本都有其自己的本地名称。例如，" Roboto Regular"，" Roboto Bold"和" Roboto Italic"。这是因为字体的每个版本实际上都在其自己的文件中显式定义为单独的字体。因此，" Roboto Italic"仅用于呈现斜体文本。

我们还可以看到，每种版本的字体实际上都有两个本地名称。第一个名称是字体的常规名称，第二个名称是字体的PostScript名称。某些平台需要PostScript名称来识别字体。因此，我们可以使用两个" local"参数来指定字体的常规名称和PostScript名称。

url参数仅包含Web字体文件的URL，就像图像文件的URL。

参数format指出了网络字体在网络字体文件中所编码的格式。 Web字体文件的提供者应告诉我们Web字体文件使用哪种格式编码。

使用Google网络字体

由于Google的网络字体是免费的并且有很多字体，因此很有可能最终有一天会使用Google网络字体。使用Google网络字体时，我们可以从Google字体网站中选择它，然后单击"使用"按钮。然后，Google将为我们提供CSS以供使用。

Google提供给代码通常如下所示：

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

我们可以将此代码插入HTML页面的" head"元素。该代码指向Google字体服务器上的CSS文件，该文件包含所选字体的正确@ font-face定义。

虽然将link元素插入head元素可能很容易，但是这会导致额外的网络请求。首先，浏览器需要下载定义为@ font-face的CSS文件(该文件指向link元素)。然后浏览器需要下载Web字体文件本身，该文件是从@ font-face定义中引用的。

我们可以在浏览器中打开" link"元素指向的CSS文件(而不是Google提供的" link"元素)(" link"元素的" href"属性内的URL)。然后，我们可以将该CSS(@ font-face定义)复制到我们自己的CSS文件中。这样，我们可以保存网络请求以下载非常小的文件。现在，浏览器仅需下载CSS文件和网络字体文件。