CSS font-family 標楷體

CSS font-family 標楷體的呈現方式需要用到標楷體的文字字型名稱,而標楷體的字型名稱為 DFKai-sb 或直接用中文標楷體,只要是用 CSS 設計文字的字型,都可以使用標楷體,只要將標楷體的字型名稱套用到 font-family 即可,但是否有有辦法呈現出標楷體的效果,則要看網友的電腦是否有標楷體的字型唷!關於這點在後續再討論,若您需要使用 font-family 來設計標楷體,以下就是標楷體的語法。

CSS font-family 標楷體語法
font-family: DFKai-sb;
標楷體的字型名稱為 DFKai-sb,部分瀏覽器也支援使用中文「標楷體」的參數值,如基本語法這樣套用到 font-family 的屬性值即可,若要直接使用中文"標楷體"參數值,請自行多嘗試幾個不同瀏覽器做測試,避免失效。

CSS font-family 標楷體語法範例
<div style="font-family:DFKai-sb;">DIV 採用標楷體的文字</div>
<div style="font-family:標楷體;">DIV 採用標楷體的文字</div>
<span style="font-family:DFKai-sb;">span 採用標楷體的文字</span><br>
<a href="#" style="font-family:DFKai-sb;">超連結採用標楷體字型</a>
呈現效果
DIV 採用標楷體的文字
DIV 採用標楷體的文字
span 採用標楷體的文字
超連結採用標楷體字型
範例提供了三種網頁元素使用 font-family 標楷體的效果,第一行與第二行是在 DIV 區塊中使用 font-family 標楷體,第三行是在 span 區域內使用,第四行則是在超連結內直接使用 font-family超連結變成標楷體,CSS 的特色就是這樣,同樣的效果可以套用在許多不同的網頁元素中,若您對範例中的這幾種網頁元素想進一步的了解,可以參閱這幾篇的教學。
第一段提到關於標楷體不一定會順利呈現,要看網友是否有標楷體的字型,主要的原因是標楷體屬於 Windows 的標準字型,並非所有的作業系統都有標楷體字型,有可能會無法順利呈現效果,建議利用 font-family 的多字型篩選功能,多預設幾個不同的文字字型給網友的瀏覽器去篩選,關於 font-family 的設計規則,請參閱這篇:CSS font-family 字型

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012