在 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.

 

 

本文引用自sensitive1228 - 教學~✿CSS 教學 > 字體 ✿~

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 夜貓子の心靈饗宴 的頭像
    夜貓子の心靈饗宴

    ✿ღ 夜貓子の心靈饗宴 ღ✿

    夜貓子の心靈饗宴 發表在 痞客邦 留言(0) 人氣()


    留言列表 留言列表

    發表留言