CSS span 區域文字字型設計

CSS span 區域可以很輕易的將我們想調整的文字包起來做樣式設計,這當然也包含了對文字的字型下定義,例如將 span 區域內的字型修改成 serif、sans-serif、monospace 甚至是常見的新細明體標楷體微軟正黑體都辦得到,要做出這樣的效果必須使用 CSSfont-family 屬性,這是標準的字型修改屬性,除了修改 span 區域內的文字字型之外,也可以修改其它網頁中的文字字型,受到幾乎所有主流的瀏覽器所支持,我們就先來看看基本的語法規則再來套用到範例看效果。

CSS font-family 屬性基本語法
font-family: 順位第一的字型,順位第二的字型,順位第三的字型, ... 以此類推;
CSSfont-family 屬性允許設計師一次填入多個不同的文字字型,瀏覽器會根據順序挑選能夠顯示的字形,假設第一個字型就能顯示,後面的字型就不會用到,如果第一個字型無法顯示,瀏覽器就會在 font-family 屬性中挑出順序第二的字型看看能不能顯示,以此類推,關於 CSS 的 font-family 屬性的詳細用法,請參閱:CSS font-family 字型

利用 font-family 屬性修改 span 區域內的文字字型樣式
<span style="font-family:serif;border:1px orange solid;margin-right:5px;">這是 serif 字型的文字</span>
<span style="font-family:sans-serif;border:1px orange solid;margin-right:5px;">這是 sans-serif 字型的文字</span>
<span style="font-family:DFKai-sb;border:1px orange solid;margin-right:5px;">這是標楷體字型的文字</span>
範例的實際效果
這是 serif 字型的文字 這是 sans-serif 字型的文字 這是標楷體字型的文字
範例中總共有三個不同的 span 區域,分別利用 font-family 屬性重新設計了它們的文字字型,從左而右分別是 serif 字型、sans-serif 字型以及標楷體,其中比較特別的是標楷體不一定能在非 Window 系列的作業系統中呈現,另外,範例中的 bordermargin 分別是邊框與外距的設計屬性,用來設計 span 的邊框與彼此間的距離,讓範例看起來更清楚而已。

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