5.4 CSS 3新增的服务器字体

在CSS之前的版本，大部分网站的网页中设置的都是普通的字体，有的甚至都不设置字体，因为要想在不同的客户端去显示正常的字体效果，首先客户端要有这种字体，否则设置的字体效果将不会显示。CSS 3新增了服务器字体，很好地解决了这个问题。若客户端没有要设置的字体，将会自动下载所设置的字体。

5.4.1 使用服务器字体

使用服务器字体，首先要先定义服务器字体，定义服务器字体使用@font-face来定义，代码如下：

上面的语法中font-family属性用于指定服务器字体的名称，这个名称可以随意定义，它用于在需要的位置去引用。src属性中通过url来指定字体的路径，format用于指定字体的格式，到目前为止，服务器字体还只支持TrueType格式和OpenType格式。

可以通过以下步骤来实现对服务器字体的使用。

（1）下载需要使用的服务器字体的文件。

（2）使用@font-face把它定义为服务器的字体。

（3）通过@font-family属性指定使用服务器字体。

【例5-13】（实例文件：ch05\Chap5.13.html）使用服务器字体。

相关的代码实例请参考Chap5.13.html文件，在Chrome浏览器中运行的结果如图5-13所示。

5.4.2 定义斜体、粗体和粗斜体字

在使用服务器字体时，不像网页中使用字体，可以指定字体的加粗、倾斜等，如果要在服务器字体中使用加粗和倾斜，需要下载相应的字体文件。

【例5-14】（实例文件：ch05\Chap5.14.html）定义斜体、粗体、粗斜体等服务器字体。

相关的代码实例请参考Chap5.14.html文件，在Chrome浏览器中运行的结果如图5-14所示。

5.4.3 优先使用客户端字体

使用服务器字体有一个缺点，浏览网页时需要从远程服务器下载字体文件，影响网页的加载速度。所以我们还是应该优先考虑使用客户端字体，只有当客户端没有这种字体时，才考虑使用服务器字体作为替代方案。

在使用@font-face定义服务器字体时，src属性除了可以使用url来指定服务器文字的路径之外，也可以使用local指定客户端字体名称。

【例5-15】（实例文件：ch05\Chap5.15.html）优先使用客户端字体。

相关的代码实例请参考Chap5.15.html文件，在Chrome浏览器中运行的结果如图5-15所示。