CSS 字體



CSS 教學  >  字體

在 CSS 中常見的字體 (font) 屬性有以下幾種:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant

    每一個屬性在以下會有詳細地介紹:

    font-family

    font-family 屬性是用來設定字體的類別。

    CSS 樣式顯現結果

    p {font-family: verdana;}

    Font Family Verdana.

    p {font-family: arial;}

    Font Family Arial.

    p {font-family: impact;}

    Font Family Impact.

    font-size

    font-size 屬性是用來設定字體的大小。大小可以是以數字顯現 (絕對的或是相較的均可),或是以下其中之一的值:"xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。

    CSS 樣式顯現結果

    p {font-size:9px;}

    字體大小為 9px。

    p {font-size:150%;}

    字體大小為 150%。

    p {font-size:0.8cm;}

    字體大小為 0.8 cm。

    p {font-size:small;}

    字體大小為 small。

    p {font-size:large;}

    字體大小為 large。

    font-weight

    font-weight 屬性是用來設定字體的厚度。厚度的設定值可以從 100 到 900 (900 是最厚的)。另外,我們也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。

    以下舉幾個例子:

    CSS 樣式顯現結果

    p {font-weight: 100;}

    這是厚度 100。

    p {font-weight: 900;}

    這是厚度 900。

    p {font-weight: bold;}

    這是 bold 厚度。

    font-style

    font-style 屬性是用來設定字體是否為斜體字 (italic 或 oblique)。

    CSS 樣式顯現結果

    p {font-style: italic;}

    這是斜體字。

    font-variant

    font-variant 屬性是用來設定文字是不是要以小型大寫 (small caps) 字體顯現。在小型大寫字體中,所有的字母都是大寫,可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。來看下面的例子:

    CSS 宣告,

    span {
      font-variant:small-caps;
    }

    以下的 HTML 碼,

    <span>initial in small caps</span> AND LATER IN LARGE CAPS.

    就會顯現出,

    initial in small caps AND LATER IN LARGE CAPS.

    下一頁: CSS 連接



    Copyright 1keydata.com 2007, 2008, All Rights Reserved.



  • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)
    CSS 表格 (Table)
    CSS 位置 (Position)
    CSS 文字 (Text)
    CSS 浮動 (Float)
    CSS 清除 (Clear)
    CSS 滑鼠游標圖案

    CSS 樣式