在CSS的字体样式中，通常会受到客户端是否安装了所设置的字体的限制。如果客户没有安装我们在CSS中所设置的字体，则在最终的客户页面中是无法显示出来的。这样我们在页面开发过程中就无法使用一些较为生僻的字体，一些具有艺术感的文字效果只能使用图片来代替。今天小海前端（头条号）来带领大家一同学习CSS3为我们提供的服务器端字体属性。

技术等级：中级 | 适合有一定的CSS基础人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

本文涉及到的CSS3属性包括：

• @font-family

一、服务器端字体的语法格式

CSS3技术使用@font-face定义服务器端字体

CSS3提供了如下的语法格式来定义服务器端字体：

@font-face{

字体属性：取值;

}

在@font-face内部的字体属性可以包括下列CSS样式：

• font-family,设置服务器端字体的自定义名称。

• font-style,设置文本是否为斜体。

• font-weight,设置文本的粗细。

• font-variant,设置文本是否为小型大写字母。

• font-size,设置文本的字号。

• src,设置自定义字体的字体文件路径和文件名，以及字体类型。

上述CSS属性中，前5个都是CSS原本具有的属性，在小海前端（头条号）的文章《CSS字体属性，详解属性用法，提升前端小白能力》中详细介绍过，不太了解小伙伴可以阅读学习。

这里不太一样的地方是font-family属性，这个属性在@font-face内部的功能是为服务器端字体设置一个自定义名称。因为@font-face仅仅是在定义服务器端字体，font-family所设置的自定义名称，将来要在引用这个服务器端字体时进行书写。

那我们就来说一说src属性。首先，要想使用服务器端字体，就需要将这个大部分用户都可能没有安装的字体的字体文件复制出来，粘贴到自己的站点目录中。这里假设站点根目录下有一个font文件夹，我们在里面放置了一个名为x.ttf的字体文件。

定义服务器端字体的CSS代码如下所示：

@font-face{

font-family:myfont;

src:url(../font/x.ttf) format(“truetype”);

}

在一个id名为box的容器中，要使用这个新定义的服务器端字体，CSS代码如下所示：

#box{

font-family:myfont;

}

二、字体的格式：

我们通过上面的代码可以看到，在@font-face中src属性除了指明字体文件的路径和文件名以外，还需要利用format()来指定字体的格式。

这里小海前端（头条号）为大家总结了几种常用字体文件的格式：

• TrueType字体：文件扩展名.ttf，设置为 format(“truetype”)

• OpenType字体：文件扩展名.otf，设置为format(“opentype”)

• Embedded OpenType字体：扩展名为.eot，设置为format(“eot”)

三、在src属性中使用local()方法：

我们所使用的生僻字体，客户端到底是否安装了，我们是无从知晓的。并不排除你认为这个字体非常生僻，但是客户在自己的电脑上确实安装了它。这样如果使用服务器端字体，就无形中增加了字体下载的步骤。

为了保证安装过这个字体的用户从本地调用，没安装过这个字体的用户从服务器端调用。src属性提供了一个名为local()的方法，只需在该方法的括号中指定字体的名称，就可以从本地调用这个字体了。

假设根据页面设计需要，我们要使用一款名为“汉仪综艺体简”的字体，这款字体的文件名为hyzytj.ttf，同样存储在站点根目录下的font文件夹中。那么我们将服务武器端字体设置为如下CSS代码：

@font-face{

font-family:myfont;

src:local(“汉仪综艺体简”),url(../font/hyzytj.ttf) format(“truetype”);

}

这样一来，真正安装了“汉仪综艺体简”这个字体的用户就无需从服务器端下载字体文件了。

四、实例：利用服务器端字体展示一首古诗。

本实例利用一个名为“叶根友毛笔行书”的字体来为大家展示毛泽东诗词《沁园春 雪》的开头片段。本实例的最终效果如下图所示。

实例的最终效果

HTML代码如下所示：

实例的HTML代码

CSS代码如下所示：

实例的CSS代码