CSS‎ > ‎

font-family(字體) , 字體設定[中文字型]

http://blog.xuite.net/jeanson61/xuite/28415261-%5BCSS%E6%A8%A3%E5%BC%8F%E8%AA%9E%E6%B3%95%5D%E5%AD%97%E9%AB%94%E7%9A%84%E8%A8%AD%E5%AE%9A%5B%E7%89%B9%E5%88%A5%E6%98%AF%E4%B8%AD%E6%96%87%E5%AD%97%E5%9E%8B%5D


在CSS的設定語法中,有關字體的設定是像下面這樣的語法↓
font-family:"細明體","Times New Roman",Georgia,Serif;

主要是說,在font-family:後面是一串的字體定義,而它是一串的使用順序,也就是說像上面的例子是:最先使用系統的"細明體"來顯示頁面文字字 體,如果系統中找不到這樣的字體[例如我們用英文版的作業系統沒有裝中文字體]",接下來就是找系統中的"Times New Roman"字體來顯示,再找不到系統有支持"Times New Roman"字體的話,就用系統的Georgia字體來顯示, 最最最糟糕的情形都找不到字體則用Serif字體顯示!!


在font-family這裡面有兩大類的字體定義,一種是family-name 字型名稱,另外一個是generic-family汎用字集,
所 謂的family-name就是像我們使用word或是power-point等文件編輯器中的字型名稱:Arial, Comic Sans MS, Georgia, Time New Roman, 新細明體, 細明體, 標楷體, ...這一類的字型,數十多種。

至於generic-family汎用字集,則是指serif(襯線字), sans-serif(無襯線字),cursive(捲曲字體),fantasy(花俏字體),monospace(等寬字體)這五種!!


常用的五種字體集名稱及意義:

字體集名稱意義範例
serif襯線字generic-family: serif
sans-serif無襯線字generic-family: sans-serif
cursive捲曲字體generic-family: cursive
fantasy花俏字體generic-family: fantasy
monospace等寬字體generic-family: monospace


所以我們要設定中文字體的特性時,最好就是將中文字體設定在最前面[最優先],然後再加上其他的字型定義,另外還有要注意的是,中文字型的定義有兩種表示方式,一種是中文,一種是英文,標準一點或是說保險一點是要兩種都設定。例如↓
family-name:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;

在上面的範例中↓
微軟正黑體=Microsoft JhengHei
新細明體 =PMingLiU
細明體=MingLiU
標楷體=DFKai-sb

只是中英文的名稱不同,因為有些系統認得MingLiU,但是不認識"細明體",所以這樣的設定就可以確保字型儘可能是自己所希望的樣式。




講完字型的定義後,我來講講我們應該在那裡去設定我們的字型,首先就Xuite Blog版型樣式,在body{}中去設定是全部都生效,整體適用!所以像我現在的版型裡面的設定↓
body{ 
    margin:0px 0px 0px 0px;
    text-align: center;
    background-color: #FFFFFF;
    font-family: Comic Sans MS,arial,helvetica,sans-serif;
    color: #000000;
    font-size: 15px;
    line-height:150%;
    word-wrap: break-word;
}



然後我想分別在側邊欄位與中間文章欄的字體做一些不同的設計的話,那就分別改一下設定了,首先討論側邊欄位的標題,請改.sidetilte {}以及.personaltitle{}
/*欄位名稱*/
.sidetitle, .personaltitle {
 padding-top:0px;
 border:0px none #93AE4F;
 background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/17545208/1.jpg) center no-repeat;
 color: #000000;
 text-align:center;
 font-family:Comic Sans MS,arial,helvetica,sans-serif;
 font-weight:bold; font-size:15px;
 margin:0px;
 letter-spacing:0.1em;
 height: 41px;
 list-style:none;
}

如果是要改側邊欄內部[側邊欄裡面的文字]文字字型,那就改.side{}
/*欄位內容*/
.side{
 font-size:14px;
 font-weight:normal;
 line-height:140%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding:0px 5px 40px 5px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/17545208/10.jpg) no-repeat center bottom;
}

如果是針對文章內文的字型做變化,那就改.blogbody{}
/*文章主體*/
.blogbody{
 width:95%;
 color: #271305;
 padding: 0px 20px 30px 20px;
 margin: 0px 0px 0px 0px;
font-size:17px;
font-family:Comic Sans MS,arial,helvetica,sans-serif;
line-height: 150%;
 background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/17545208/32.jpg) left bottom no-repeat;
}

改文章的標題的字型則是改.title{}
/*文章標題列*/
.title{
 width:100%;
 height:60px;
 background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/17545208/34.jpg) left top no-repeat;
 padding-top:10px;
 font-family:Comic Sans MS,arial,helvetica,sans-serif;
}


至於其他的小地方也都可以改字型!以上僅就比較常會想動的地方做範例!![啊我的範例都沒特別設定中文字型!]







http://blog.roodo.com/wolf_totem/archives/4747565.html




中文字型應寫入兩種名稱 (中文名稱 + 英文名稱)


我的研究顯示,中文字型通常有兩個名字,在不同的系統及不同的瀏覽器可能接受的名稱不同。正確的作法是把字型的中文名稱及英文名稱加入。 (例如 中文版 Windows 的 IE 只看得懂 "新細明體",而英文版 Windows 的 IE 只看得懂 "PMingLiU")

常見的繁體字型的英文名稱:
  • 微軟正黑體 : Microsoft JhengHei
  • 新細明體 : PMingLiU
  • 細明體 : MingLiU
  • 標楷體 : DFKai-sb



font-family 最後加上泛用字族 (generic-family)


font-family 其實能接受兩種值,第一種是「字體名稱」(family-name),第二種是「通用字體集」(generic-family) 。

「字體名稱」如「Arial、新細明體、標楷體…」
這些字型名稱,在此不必多言。

「通用字體集」常用有五種,功能是把類似字體樣式歸類,當在不同作業系統或是瀏覽器執行,發生找不到字型時,由字體集挑出字型代替。

而且通常把「通用字體集」寫在 font-family 最後一個值

常用的五種字體集名稱及意義:
字體集名稱意義範例
serif襯線字generic-family: serif
sans-serif無襯線字generic-family: sans-serif
cursive捲曲字體generic-family: cursive
fantasy花俏字體generic-family: fantasy
monospace等寬字體generic-family: monospace

PS: 「通用字體集」不能加入引號括住。

最好了解「襯線字 (serif)」和「無襯線字 (sans serif) 」意義及使用時機,為你的網站加分










Comments