多个字体权重，一个@ font-face查询

多个字体权重，一个@ font-face查询

实际上，@ font-face有一种特殊的风味，可以满足您的要求。

这是一个示例，该示例使用相同的字体系列名称，并且具有与不同字体相关联的不同样式和粗细：

@font-face {  font-family: "DroidSerif";  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  font-weight: normal;  font-style: normal;}@font-face {  font-family: "DroidSerif";  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");  font-weight: normal;  font-style: italic;}@font-face {  font-family: "DroidSerif";  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  font-weight: bold;  font-style: normal;}@font-face {  font-family: "DroidSerif";  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");  font-weight: bold;  font-style: italic;}

---

现在，您可以指定

font-weight:bold

或

font-style:italic

对所需的任何元素进行指定，而不必指定font-
family或覆盖

font-weight

and

font-style

。

body { font-family:"DroidSerif", Georgia, serif; }h1 { font-weight:bold; }em { font-style:italic; }strong em {  font-weight:bold;  font-style:italic;}

---

有关此功能和标准用法的完整概述，请参阅本文。

---

示例笔