font-family

font-family

font-family 可以把多個字型名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字型,則會嘗試下一個。也就是說,font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。

基本介紹

  • 外文名:font-family
  • 版本:CSS1
  • 繼承性:有
  • 兼容性:Firefox Chrome Safari Opera
  • 參數值:family-name、inherit
基本信息,語法,參數,說明,示例,用法,瀏覽器支持,

基本信息

如果瀏覽器不支持第一個字型,則會嘗試下一個。也就是說,font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。

語法

font-family : name
font-family : cursive | fantasy | monospace | serif | sans-serif

參數

name :字型名稱。按優先順序排列。以逗號隔開。如果字型名稱包含空格,則應使用引號括起
第二種聲明方式使用所列出的字型序列名稱。如果使用fantasy序列,將提供默認字型序列

說明

設定或檢索用於對象中文本的字型名稱序列。
默認值由瀏覽器確定。
序列可包含嵌入字型字型。請參閱@font-face規則。
對應的腳本特性為fontFamily。請參閱我編寫的其他書目。

示例

div.fixedwidth { font-family: Courier, "Courier New", monospace }

用法

你有時查看網頁原始碼,會看到類似下方的代碼:
font-family:"Microsoft YaHei UI",Arial,"Times New Roman";
初學者可能會覺得很疑惑。為什麼要為元素同時定義多個字型呢?
設定優先權
設計頁面時一般設計師會選定特定的一個字型以達到理想的效果,但更多情況下用戶的電腦可能沒有安裝該字型。此時就要用font-family設定一個列表,靠前的字型優先顯示,如果沒有安裝則往後輪一個,以此類推。保證網頁不會因為沒有相應字型就被系統使用了不好看的字型。
舉個例子:
font-family:"Hiragino Sans GB","Lantinghei SC","Microsoft YaHei UI",SimHei,sans-serif
上例中,前兩項("Hiragino Sans GB","Lantinghei SC")是Mac機內置的字型,後兩項("MicrosoftYaHeiUI",SimHei)是Windows機內置的字型。假定第一項(HiraginoSansGB)是設計師選定的理想字型,後面三個字型都和第一項字形相近,保證了網頁不會使用不好看的字型。最後的(sans-serif)保證以上字型全部沒有的超特殊情況下不會設定“沒有字型”。
中西文分別指定字型
設計頁面時有時會遇到中文和西文需要使用不同字型搭配使用的情況,這時就要把西文字型靠前放。因為西文字型只包含字母和數字而不包含漢字,在高優先權下被使用時漢字自然會輪到優先權低的字型來顯示。如果中文字型優先權較高,則會導致指定的西文字型不會被顯示。
舉個例子:
font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Microsoft YaHei UI",sans-serif
上例中,前三項是西文字型("HelveticaNeue",Helvetica,Arial,),其中前兩項是Mac機內置字型,後一項(Arial)是Win與Mac兼有的字型,但不夠理想。後兩項("HiraginoSansGB","MicrosoftYaHeiUI")同前一例。
Windows平台的默認情況下,瀏覽器的字型是宋體。中文字型常用的有宋體、微軟雅黑,英文字型比較常用的有Times New Roman、Arial。

瀏覽器支持

所有主流瀏覽器都支持 font-family 屬性。
注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。

熱門詞條

聯絡我們