2013/01/07

@font-face, @media

@charset | @font-face | @import | @media | @page
@font-face

指定字型的檔案。其語法是:

@font-face { font-family: 字型名稱字串; src: url(字型檔案); }

IE 與 Firefox 的官方手冊都只定義 font-family 與 src;但是 CSS 標準組織的建議不只這兩項,還有 font-style, font-variant, font-weight, font-stretch, font-size 等等。Firefox3.5 才有支援 @font-face。

IE 使用 Embedded OpenType (EOT 或 OTE) 字型檔案格式,這裡有一個 IE 字型示範,此示範在 IE6 成功;Firefox, Safari, Chrome 失敗。

  • 上例使用 .ttf 檔(TrueType font),Safari 成功;IE6, Firefox, Chrome 失敗。
  • 上例中的字型檔由 mozilla 網站提供,考量著作權所以用註解取消,網友可以自行測試。
@media

指定一組風格給數個媒體型態。其語法是:

@media <媒體型態集> { 風格定義區塊 }

可以一次定義多個媒體型態,兩個媒體型態用 "," 分開。媒體型態名稱的字母,大小寫相同,媒體型態有:

  1. all:適用所有媒體。
  2. aural:語音合成器。Firefox 用 speech 取代 aural。
  3. braille:盲人點字回應裝置。
  4. embossed:盲人凸字列印機。
  5. handheld:手持裝置。
  6. print:列印或列印預覽。
  7. projection:投影機。
  8. screen:電腦彩色螢幕。
  9. tty:文字顯示裝置。無法顯示點陣圖。
  10. tv:電視。

IE 的官方手冊只列出 all, print, screen 三項。

防止列印的方法

  • 可以嘗試列印此頁或者預覽列印,如果印的出來,就表示瀏覽器有問題。