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）是否可以顯示。@font-face{
font-family: NewFont;
src: local(字型檔), url(字型檔案網址);
font-weight: bold; //設定為粗體字，這行是選用
}
<!--調用字型-->
font-family:NewFont;
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 設定其他通用字型，以免失誤。@font-face {
font-family: NewFont;
src: url(字型檔案);
}
div {
font-family: NewFont, 標楷體, sans-serif;
}
</style>
<div>這是測試文字</div>
CSS3 font-face 在使用上的注意事項
其實 CSS3 的 font-face 屬性也只是讓原本就已經很好用的 font-family 屬性，再增加點額外效果的機會，雖然 font-face 屬性還在發展中，也已經獲得許多新版瀏覽器的支援，不過 font-face 屬性的概念會讓瀏覽器視情況下載字型檔，所以要注意字型檔的版權問題，不可以隨意使用未經授權的字型檔案，而且不是網路上宣稱免費的字型就能使用，授權的細節還是要仔細閱讀，如果有任何不確定，就千萬不要使用。再來是字型檔下載的速度問題，若設計師所規劃的字型檔下載速度與網頁載入的速度有所差異，在開啟網頁時會有畫面跳動的問題。
更多文字設計