css 字型使用

css字型設定

字型族科
文法:   font-family: [[<族科名稱> | <種類族科>],]* [<族科名稱> | <種類族科>]
允許值:   <族科名稱> 任意字型族科名稱都可以使用
          <種類族科> serif (e.g., Times) 
                     sans-serif (e.g., Arial or Helvetica) 
                     cursive (e.g., Zapf-Chancery) 
                     fantasy (e.g., Western) 
                     monospace (e.g., Courier)
初始值:   由瀏覽器決定
適用於:   所有對象
向下相容:   是

字型變形
文法:     font-variant: <值>
允許值:   normal (普通) | small-caps (小型大寫字母)
初始值:   normal
適用於:   所有對象
向下相容:   是

字型風格
文法:   font-style: <值>
允許值:   normal (普通)| italic (斜體)| oblique (傾斜) 
初始值:   normal 
適用於:   所有對象
向下相容:   是

字型加粗
文法:   font-weight: <值>
允許值:   normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值:   normal
適用於:   所有對象
向下相容: 是 
字型加粗屬性用作說明字型的加粗。當其它值絕對時，bolder和lighter值將相對地成比例增長。
注意: 因為不是所有的字型都有九個有效加粗顯示，一些加粗的會在指定下組合。如果指定的加粗無效，會按以下原則選擇: 
500 會被 400代替，反之亦是 
100-300 會被指定為下一較細的加粗，如果有的話，否則就是下一較粗的加粗 
600-900 會被指定為下一較粗的加粗，如果有的話，否則就是下一較細的加粗

字型大小
文法:   font-size: <絕對大小> | <相對大小> | <長度> | <百分比>
允許值:   <絕對大小>   xx-small | x-small | small | medium | large | x-large | xx-large 
          <相對大小>   larger | smaller 
          <長度>      
          <百分比>     (in relation to parent element) 
初始值:   medium
適用於:   所有對象
向下相容:   是
字型大小屬性用作修改字型顯示的大小。絕對長度(使用的單位為pt-像素和in-英寸) 需要謹慎地考慮到其適應不同瀏覽環境時的弱點。對於一個使用者來說，絕對長度的字型很有可能會很大，或很小。
一些大小指定的定義如下:
H1   { font-size: large } P { font-size: 12pt } LI{ font-size: 90% } STRONG { font-size: larger }網頁製作者需要清楚Microsoft Internet Explorer 3.x 會錯誤地將em 和ex單位當作像素，這很可能會令到使用了這些單位的文本不可讀。瀏覽器還會錯誤地將百分比值視為相對於選中部分的預設字型大小，而不是上階項目的字型大小。這種做法像H1 { font-size: 200% }這是危險的，其大小將被視為IE的一級標題的預設字型大小的兩倍，而不是兩倍於上階項目的字型大小。在這種情況中，BODY 通常會被視為上階項目，而且很可能定義一個medium的字型大小，然而，在IE中一級標題的預設字型大小可能被認為是xx-large。
注意到了這些錯誤後，網頁製作者在使用字型大小屬性時，應該小心使用百分比的值，而且應該盡量避免使用em和ex這兩個單位。

 

 

字型樣式對應名稱

在網站中，都不可避免的要用到一些中文字型，比如微軟雅黑，黑體等，在css中寫入中文的方法一般是：font-family:"微軟雅黑","黑體";這樣類似的表達方式，但是對於像 WordPress 這樣需要 UTF8 編碼平台來說，一個不注意沒有轉換編碼就會導致中文字型無法按照希望的字型表形出來。所以我們可以通過英文、unicode 這種形式來表達中文，比如說剛才的 font-family:"微軟雅黑","黑體";就可以寫成 font-family:"Microsoft Yahei","SimHei";在Firefox 的某些版本和 Opera 不支援 SimHei的寫法，採用font-family:\5FAE\8F6F\96C5\9ED1;寫法

這些unicode太難記，下面的表示一些常用的字型

華文細黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1
華文黑體	STHeiti	\534E\6587\9ED1\4F53
華文楷體	STKaiti	\534E\6587\6977\4F53
華文宋體	STSong	\534E\6587\5B8B\4F53
華文仿宋	STFangsong	\534E\6587\4EFF\5B8B
麗黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro
麗宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro
標楷體	BiauKai	\6807\6977\4F53
蘋果麗中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1
蘋果麗細宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B
Windows
新細明體	PMingLiU	\65B0\7EC6\660E\4F53
細明體	MingLiU	\7EC6\660E\4F53
標楷體	DFKai-SB	\6807\6977\4F53
黑體	SimHei	\9ED1\4F53
宋體	SimSun	\5B8B\4F53
新宋體	NSimSun	\65B0\5B8B\4F53
仿宋	FangSong	\4EFF\5B8B
楷體	KaiTi	\6977\4F53
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312
楷體_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
微軟正黑體	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
Office
隸書	LiSu	\96B6\4E66
幼圓	YouYuan	\5E7C\5706
華文細黑	STXihei	\534E\6587\7EC6\9ED1
華文楷體	STKaiti	\534E\6587\6977\4F53
華文宋體	STSong	\534E\6587\5B8B\4F53
華文中宋	STZhongsong	\534E\6587\4E2D\5B8B
華文仿宋	STFangsong	\534E\6587\4EFF\5B8B
方正舒體	FZShuTi	\65B9\6B63\8212\4F53
方正姚體	FZYaoti	\65B9\6B63\59DA\4F53
華文彩雲	STCaiyun	\534E\6587\5F69\4E91
華文琥珀	STHupo	\534E\6587\7425\73C0
華文隸書	STLiti	\534E\6587\96B6\4E66
華文行楷	STXingkai	\534E\6587\884C\6977
華文新魏	STXinwei	\534E\6587\65B0\9B4F

 

有一種快速獲得字型Unicode編碼的方法

 

css字型設定(不同瀏覽器設定效果)

乍一聽css字型設定很容易,其實真做起來不然。我們工程師使用原力，他們在不同瀏覽器調整字型的大小知道的得到合適的結果。實際上有一點深入的理解就能起到很大的作用。

font-size 屬性：

font-size屬性可以被設定給任何一個html標籤，即使是不能包含文本的標籤也可以設定它，比如：<br/>。可以被賦值是各種各樣滴，比如：絕對，相對，長度值

一個元素的font-size屬性會自動繼承它父節點元素的font-size屬性值，除非你覆蓋了它。當你給font-size設定相對大小的時候這一點很重要。

font-size 設定的絕對關鍵字：

以下幾個絕對字型大小的設定是有效。當然他們是瀏覽器預定義設定的。給元素指定了絕對關鍵字font-size的時候，該元素就不會繼承父元素的字型大小

• font-size: xx-small;
• font-size: x-small;
• font-size: small;
• font-size: medium;
• font-size: large;
• font-size: x-large;
• font-size: xx-large;

儘管大多數的瀏覽器支援上面的關鍵字，但是他們的精確的大小是不相同滴。

font-size的絕對大小：

fone-size能被設定成下面得絕對大小：

• mm: 毫米，例如：10mm.
• cm: 厘米 ，例如：1cm ( = 10mm).
• in: 英寸（inch）,例如 ： 0.39in ( ~= 10mm).
• pt: point（點）, 1pt 相當於 1/72 英寸， 例如： 12pt.
• pc: pica（十二點活字）, 1pc 是 12pt
• px: pixel（像素）, 例如： 14px.

一般說來上面得這些度量單位都有些問題

比如：毫米，厘米，英寸是對於不同媒體介質是不精確地，由於解析度的設定不同，pt和pc就是相對不可靠地。pix來起來是最合適的，但是它能導致一些輔助性問題：IE下不能重新調整字型的大小。

相對大小：font-size屬效能被設定成相對於父節點的字型大小的相對大小。

• em: 1em相當於當前字型的1倍大小的字型。2em相當於當前字型的2倍字型大小的字型。
• %: 100%相當於當前字型大小, 200% 相當於2倍字型的大小.
• ex: 1ex 相當於當前字型中字母 ‘x’高度值一樣大小的字型.

很少的開發人員使用ex ，實際上某些情況下ex還是相當好用的，比如當你需要更精確的字型的大小的時候，1ex要比0.525em更好，更精確。

%和em的值是等價的，比如:50% = 0.5em, 100% = 1em, 120% = 1.2em等等，

儘管會有很少的一些瀏覽器有些微妙的差別，但是畢竟那是很少見的問題。如果你想要儲存更小的位元組，就需要用更短的名字去定義font-size的值。比如：50%要比0.5em佔用位元組少，1em要比100%佔用的位元組少。

文本字型的大小和頁面放縮。

這是附加複雜深入部分，大多數瀏覽器允許使用者在瀏覽器中做如下操作：

1.增加或減少基本字型大小（圖片除外）

2.頁面放縮是所有的文字和圖片也相應發生放縮變化。

3.不但允許字型放縮，而且還允許頁面放縮

備忘（深入理解）：在ie中如果頁面中的元素的字型被用px（像素）賦值了，那麼該元素的字型在頁面放縮的時候不會發生變化。

如果您是有印刷行業背景的設計師將要轉移到web設計，那就建議您不要給予使用者過多的權利否則他們會打亂您的設計作品。您的設計作品被放大到200%的時候，或者字型減少至50%，就會被破壞掉。

css font-size 設定建議(規範)

一般來說，大多數情況下使用em或者%，這樣字型就能被瀏覽器用更精細比例的字型支援。我個人建議使用百分比%來定義font-size大小，這種做法在一些老的瀏覽器中支援的也會更好。

當你在開發一個網站的時候有下面的一組建議提供給您：

1. 在testing之前，重設所有瀏覽器的字型的大小。

2.盡量合理的定義字型的大小，以便於在頁面放縮的時候頁面仍然保持良好的可讀性。