13.9.2 使用@font-face

13.9.2 使用@font-face

在CSS3中,可以使用@font-face属性利用服务器端字体。@font-face属性的使用方法如下:

在上面这段代码中,font-family属性值中使用ˈWebfont_textˈ来声明使用服务器端的字体,该名字可以任意取。

在src属性值中,指定服务器端字体的字体文件所在的路径,在format属性值中声明字体文件的格式,可以省略文件格式的声明单独使用src属性。在这段代码中,使用了Alex-Brush字体,字体文件格式为OpenType。

接下来,将Web字体应用到网页中去。

在页面中添加一个h1标题和一个p段落,代码如下:

在CSS中使用@font-face声明Web字体,代码如下:

在设置h1和p的样式时,应用上面声明的字体,代码如下:

显示效果如图13-12所示。

图13-12 使用Web字体