font-family

設定用於物件中文字的字型名稱。

語法

{ font-family: sFamily }

可能的值

sFamily

指定下列其中一個值的字串:

family-name

瀏覽器支援的所有可用字型家族 (例如 TimesHelveticaZapf-ChanceryWesternCourier )。

generic-name

下列任何一個字型家族: serifsans-serifcursivefantasymonospace

此屬性沒有預設值。這是繼承屬性。

備註

此值是按優先順序排列的字型家族名稱與泛型家族名稱。清單項目以逗號分隔,以避免名稱中具有多個單字的字型家族名稱造成混淆。如果字型家族名稱含有空白,名稱應包括在單引號或雙引號間;泛型字型家族名稱是不能以引號包住的值。

由於您並不知道使用者安裝的字型,因此應提供替代字型的清單,並在清單結尾加上泛型字型家族。此清單可包含內嵌的字型。如需內嵌字型的詳細資訊,請參閱 @font-face 規則。

範例

下列範例顯示如何呼叫內嵌樣式表以設定 font-family 屬性:

<html>
<head>
<style>
  p {font-family:"arial"}
  .other {font-family:"courier"}
</style>
</head>
<body>
  <p tabindex="1"
     onkeydown="this.className='other'"
onmousedown="this.className='other'"
onmouseup="this.className=''"
onkeyup="this.className=''">Tab to select this paragraph and press any key, or just click it, to change the font-family style property to COURIER.</p>
</body>
</html>

下列範例顯示如何定義字型的階層 (在此案例中為內嵌字型與系統字型)。瀏覽器會逐一讀取清單中的項目,直到發現適用的字型為止。若網頁中含有使用者電腦無法存取或載入的字型,便可採用此方式:

<style type="text/css">
   @font-face {
      font-family: "My_font";
      src: url(http://www.adatum.com/some_font_file.eot);
   }
   body {font-family: "My_font", Arial}
</style>

標準資訊

您可以在 Cascading Style Sheets (CSS), Level 1 (CSS1) (階層式樣式表 (CSS) 層級 1 (CSS1)) Ee371191.xtlink_newWindow(zh-tw,Expression.40).png 找到此屬性的定義。

適用範圍

A、ADDRESS、B、BASEFONT、BIG、BLOCKQUOTE、BODY、BUTTON、CAPTION、CENTER、CITE、CODE、COL、COLGROUP、CUSTOM、DD、DEFAULTS、DFN、DIV、DL、DT、EM、FIELDSET、FORM、HN、HTML、I、IMG、INPUT TYPE=BUTTON、INPUT TYPE=CHECKBOX、INPUT TYPE=FILE、INPUT TYPE=IMAGE、INPUT TYPE=PASSWORD、INPUT TYPE=RADIO、INPUT TYPE=RESET、INPUT TYPE=SUBMIT、INPUT TYPE=TEXT、LI、OL、P、S、SELECT、SPAN、SUB、TABLE、TBODY、TD、TFOOT、TH、THEAD、TR、TT、U、UL、VAR、XMP

另請參閱

概念

font