HTML 5与CSS 3权威指南（第4版·下册）最新章节_陆凌牛著

18.5.2　定义斜体或粗体字体

在定义字体的时候，可以将字体定义为斜体字或者粗体字。在使用服务器端字体的时候，需要根据是斜体还是粗体，使用不同的字体文件。

在18.5.1节中，示例中使用到的字体为常规字体（不是斜体，不是粗体），在要使用示例中所使用到的字体之前，先要下载字体文件，下载地址在18.5.1节中已给出，这里不做赘述。在下载的压缩文件中，除了有使用Fontin Sans常规字体时所需的字体文件之外，也包含了使用粗体、斜体、粗斜体、小型大写字体时所要用到的字体文件，文件名依次为“Fontin_Sans_B_45b.otf”、“Fontin_Sans_I_45b.otf”、“Fontin_Sans_BI_45b.otf”、“Fontin_Sans_SC_45b.otf”。

接下来，我们在代码清单18-5中给出一个使用服务器端Fontin Sans字体的粗体与斜体文字的示例。在示例中，显示4个div元素，依次对这些div元素使用Fontin Sans字体的常规字体、斜体、粗体、粗斜体。

代码清单18-5　服务器端字体使用粗体与斜体的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>服务器端字体使用粗体与斜体的示例</title>
</head>
<style type="text/css">
@font-face{
    font-family: WebFont;
    src: url('Fontin_Sans_R_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    src: url('Fontin_Sans_I_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-weight: bold;
    src: url('Fontin_Sans_B_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    font-weight: bold;
    src: url('Fontin_Sans_BI_45b.otf') format("opentype");
}
div{
    font-family: WebFont;
    font-size: 40px;
}
div#div1
{
    font-style: normal;
    font-weight: normal;
}
div#div2
{
    font-style: italic;
    font-weight: normal;
}
div#div3
{
    font-style: normal;
    font-weight: bold;
}
div#div4
{
    font-weight: bold;
    font-style: italic;
}
</style>
<body>
<div id="div1">Text Sample1</div>
<div id="div2">Text Sample2</div>
<div id="div3">Text Sample3</div>
<div id="div4">Text Sample4</div>
</body>
</html>

这段代码的运行结果如图18-17所示。

图18-17　服务器端字体使用粗体与斜体的示例

18.5.2 定义斜体或粗体字体

18.5.2　定义斜体或粗体字体