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 採用標楷體的文字

span 採用標楷體的文字
超連結採用標楷體字型

範例提供了三種網頁元素使用 font-family 標楷體的效果，第一行與第二行是在 DIV 區塊中使用 font-family 標楷體，第三行是在 span 區域內使用，第四行則是在超連結內直接使用 font-family 讓超連結變成標楷體，CSS 的特色就是這樣，同樣的效果可以套用在許多不同的網頁元素中，若您對範例中的這幾種網頁元素想進一步的了解，可以參閱這幾篇的教學。

第一段提到關於標楷體不一定會順利呈現，要看網友是否有標楷體的字型，主要的原因是標楷體屬於 Windows 的標準字型，並非所有的作業系統都有標楷體字型，有可能會無法順利呈現效果，建議利用 font-family 的多字型篩選功能，多預設幾個不同的文字字型給網友的瀏覽器去篩選，關於 font-family 的設計規則，請參閱這篇：CSS font-family 字型。

延伸閱讀