CSS 2.1 快速導覽 - 字型種類 font-family

font-family 性質 (property) 為 CSS 中用來設定文字字型的種類， CSS 定義了五種通用的字型體系

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy


每一種字型體系都有非常多種字型，例如 serif 有 Times 、 Georgia 等，如果只有設定 serif 或 monospace 等字型體系的關鍵字 (keyword) ，瀏覽器 (broswer) 會主動去尋找相對應的字型。


通常會設定一系列相同字型體系的字型名稱，中間以逗號間隔，例如
.example {
 font-family: Times, "Times New Roman", Georgia, serif;
}


這一系列都是 serif 體系的字型，注意如果字型名稱中間有空格就必須用字串 (string) 表示，最後指定字形體系名稱，因為如果使用者電腦沒有前面任一出現的字型，這樣可以讓瀏覽器自動去尋找相對應的字型。


舉例如下
.exampleserif {
 font-family: serif;
}

.examplesansserif {
 font-family: sans-serif;
}

.examplemonospace {
 font-family: monospace;
}

.examplecursive {
 font-family: cursive;
}

.examplefantasy {
 font-family: fantasy;
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：text02.css
    功能：示範 CSS 2.1 樣式表的使用 
    作者：張凱慶
    時間：西元 2011 年 7 月 */


我們以下面的 HTML 文件載入
<html lang="en">
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" 
      href="text02.css">
</head>
<body>
<div class="exampleserif">
You ever have that feeling where you're not sure if 
you're awake or still dreaming?
</div>
<div class="examplesansserif">
A prison for your mind.
</div>
<div class="examplemonospace">
Free your mind.
</div>
<div class="examplecursive">
Believe the unbelievable.
</div>
<div class="examplefantasy">
There is no spoon.
</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：text02.html
     功能：示範 CSS 2.1 樣式表的使用 
     作者：張凱慶
     時間：西元 2011 年 7 月 -->


注意這裡 <html> 的屬性 lang 需要設定成 "en" ，不然 cursive 與 fantasy 兩種字型體系無法正常顯示。


瀏覽器開啟如下



中英文術語對照
性質property
關鍵字keyword
瀏覽器broswer
瀏覽器broswer


您可以繼續參考

JavaScript 範例

文字相關


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.w3.org/TR/CSS21/fonts.html
https://developer.mozilla.org/en/CSS/font-family
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)