CSS3與濾境(9)-自訂字型

在過去的CSS中,雖然font-family可以指定字型,但是這種語法必需仰賴使用者自己安裝自型。如果我們在網頁上使用一種字型,例如「華康古印體」,結果使用者的電腦沒有安裝這種字型,那麼他只能看見新細明體(或其它瀏覽器預設值)。但是在CSS3之後,這種狀況有了改變。CSS3允許使用者上傳字型檔,並且在網頁中使用。

一般字型檔是 .ttf (True Type Fonts)。Firefox、Chrome、Safari、Opera都有支援 .ttf 以及 .otf (OpenType Fonts)。討人厭的是 IE 系列瀏覽器目前不支援,它們只支援 .eot (Embedded OpenType)。要把字型轉成 .eot,可以安裝 Microsoft Web Embedding Fonts Tool (WEFT),有興趣的人可以下載來使用(參考官方教學)。

屬性名稱

@font-face(自訂字型)、font-size-adjust(字體大小進階)、font-stretch(文字比例)

@font-face

說明:定義一種字型,定義完後可用font-family來使用該字型。此語法不提供範例結果。

屬性值:

  • font-family:必要屬性,自訂字型的名稱。
  • url:必要屬性,字型檔的位置。
  • font-stretch:選擇屬性,當內容的文字比例為何時使用此字型。
  • font-style:選擇屬性,當內容為斜體時使用此字型。請參考文字段落樣式
  • font-weight:選擇屬性,當內容為粗體時使用此字型。請參考文字段落樣式
  • unicode-range:選擇屬性,定義支援的Unicode範圍,預設值為U+0-10FFFF。

【範例】

@font-face {
    font-family: myFont;
    src: url('3OF9_NEW.ttf'),
         url('3OF9_NEW.eot') format("opentype");    /* IE */
}

font-size-adjust

說明:當預設字型無法使用時,瀏覽器會選擇第二種字體,此語法可用來調整第二字體的大小。aspect value表示同一字體大小寫的差異。將預設字型的aspect value設定給font-size-adjust後,瀏覽器即知道第二字體的大小該如何顯示。此語法不提供範例結果。

屬性值:none(不調整,預設值)、(數值)、inherit(繼承父元素設定)

【範例】

.box {
    font-size-adjust:0.58;      /* 僅 Firefox 支援 */
}

font-stretch

說明:指定內容的文字比例。目前沒有任何瀏覽器支援。此語法不提供範例結果。

屬性值:normal(正常,預設值)、wider(加寬)、narrower(縮窄)、semi-condensed(半濃縮)、condensed(濃縮)、extra-condensed(高濃縮)、ultra-condensed(超濃縮)、semi-expanded(半擴大)、expanded(擴大)、extra-expanded(高擴大)、ultra-expanded(超擴大)、inherit(繼承父元素設定)

【範例】

.box {
    font-stretch:wider;
}