CSS3 font-face 字型

CSS3 font-face 字型設計是 CSS3 新推出一的字型套用屬性,傳統的 CSS 字型屬性 font-family 的優點是可以設定許多不同的字型,並給予順序,讓瀏覽器依序判斷字型是否可以正常顯示,這樣的功能雖然已經大幅度超越更早以前 HTMLface 屬性,不過還是存在一個缺點,就是如果瀏覽者的電腦並未安裝設計師想要呈現的字型,那 font-family 的效果可能就無法呈現出來,除了設計師有額外嵌入外部字型檔,這樣的概念,到了 CSS3 獲得解決,CSS3 font-face 屬性的功能就是結合了字型套用以及嵌入外部字型的功能,成為完美的解決方案。

CSS3 font-face 屬性語法架構
<!--基本設定-->
@font-face{
 font-family: NewFont;
 src: local(字型檔), url(字型檔案網址);
 font-weight: bold; //設定為粗體字,這行是選用
}

<!--調用字型-->
font-family:NewFont;
CSS3 font-face 屬性必須先設定好一個字型的名稱與外部字型檔的位置,後續就可以很輕易的調用這個外部字型檔中的字型。從 src 的部份可以看到有兩種字型檔的使用方式,分別為 local 以及 url,這兩者有什麼差別呢?local 是使用瀏覽者電腦內建的字型檔,而 url 則是使用外部的字型檔,設計師可以仔細考慮要使用的字型檔使否存在於訪客的電腦中,再決定要用哪種方式,不過 CSS3 font-face 屬性也很聰明,它可以先判斷排在前面的 local 檔是否存在,如果不存在,就判斷外部檔案(url)是否可以顯示。

CSS3 font-face 字型設計範例
<style type="text/css">
@font-face {
  font-family: NewFont;
  src: url(字型檔案);
}
div {
  font-family: NewFont, 標楷體, sans-serif;
}
</style>
<div>這是測試文字</div>
要使用 CSS3 font-face 屬性就必須先設定好字型名稱字型檔案,範例中這樣的架構在 @font-face 內就將兩個重點部份先設定好,接著下一行將這樣的設定套用到網頁的 DIV 區塊中,如果瀏覽者所使用的瀏覽器有支援 CSS3 font-face 屬性,就可以顯示 NewFont 所設定的字型檔案,如果沒有的話,就會根據 font-family 屬性的效果往下一個字型繼續嘗試套用,也就是套用標楷體字型,再不行的話就再套用 sans-serif 這個無襯字型,通常使用 CSS3 font-face 屬性時,再調用字型的時候,依然會使用 font-family 設定其他通用字型,以免失誤。

CSS3 font-face 在使用上的注意事項

其實 CSS3 的 font-face 屬性也只是讓原本就已經很好用的 font-family 屬性,再增加點額外效果的機會,雖然 font-face 屬性還在發展中,也已經獲得許多新版瀏覽器的支援,不過 font-face 屬性的概念會讓瀏覽器視情況下載字型檔,所以要注意字型檔的版權問題,不可以隨意使用未經授權的字型檔案,而且不是網路上宣稱免費的字型就能使用,授權的細節還是要仔細閱讀,如果有任何不確定,就千萬不要使用。再來是字型檔下載的速度問題,若設計師所規劃的字型檔下載速度與網頁載入的速度有所差異,在開啟網頁時會有畫面跳動的問題。

更多文字設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012