CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS @keyframes 規(guī)則 CSS @charset 規(guī)則

CSS @font-face 規(guī)則

@font-face 規(guī)則用于將要在樣式表中使用的字體名稱與某些可下載字體相關(guān)聯(lián)，@font-face CSS at-rule 指定一個用于顯示文本的自定義字體。

該規(guī)則中使用字體系列font-family描述符來命名字體，并且src描述符與外部字體名稱關(guān)聯(lián)。

的使用語法

該規(guī)則的語法如下：

@font-face: font-description

該@font-face規(guī)則包含一個或多個屬性的聲明，就像那些在常規(guī)CSS，這是所謂的字體描述。您最多可以指定24個不同的屬性，但是對它們的所有解釋都超出了本參考的范圍-要了解更多信息，請訪問W3C CSS字體模塊頁面。

@font-face規(guī)則的一般形式為：

@font-face { font-family: fontname; src: url(fontfile path); }

稍后，字體可以用作屬性（如font-family和）中的名稱font，但是如果不支持可下載字體或由于某種原因無法加載字體，則應(yīng)指定其他字體名稱作為備用。

下面的示例演示了如何使用@font-face屬性。

示例

  @font-face {
   font-family: "OpenSans";
   src: url("../fonts/OpenSans-Regular.eot");
   src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  }
  body {
   font-family: "OpenSans", Arial, sans-serif;
   font-size: 1.2em;
  }

測試看看?/?

注意：通過使用@ font-face規(guī)則，您不必依賴用戶在計算機上安裝的字體數(shù)量的限制。

通過設(shè)置相應(yīng)的規(guī)則到，當(dāng)設(shè)置了諸如粗體或斜體之類的特定字體特征時，也可以設(shè)置對特定的可下載字體的選擇@font-face。

示例

  @font-face {
	font-family: "OpenSans";
   src: url("../fonts/OpenSans-Regular.eot");
   src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  }
  @font-face {
   font-family: "OpenSansBold";
   src: url("../fonts/OpenSans-Bold.eot");
	src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  }
  h1 {
   font-family: "OpenSansBold", Arial, sans-serif; /* Specify the OpenSans bold font */
  }
  p {
   font-family: "OpenSans", Arial, sans-serif;
  }

測試看看?/?

參量

參數(shù)的含義如下：

參數(shù)	值	描述
必需 -以下參數(shù)是必需的。
font-family	font-family	定義將用作font-family字體屬性值的字體名稱。
src	src	指定要使用的字體文件的位置。
可選 -以下參數(shù)是可選的。
font-style	font-style	有效的font-style屬性值。
font-weight	font-weight	有效的font-weight屬性值（相對值bolder和除外lighter）。

瀏覽器兼容性

@font-face屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號；所有主流瀏覽器均支持該規(guī)則。

	Firefox 3.5+ Google Chrome 4+ Internet Explorer 4+ Apple Safari 3.1+ Opera 10+

注意：在瀏覽器中，對特定字體技術(shù)的支持差異很大。Internet Explorer支持.eot和.wof類型的字體，而Firefox，Chrome，Safari和Opera支持.woff， .ttf和.otf類型的字體。

進一步閱讀

請參考以下教程：CSS字體。

CSS @keyframes 規(guī)則 CSS @charset 規(guī)則