html5中設置字體

@font-face指令在CSS2中引入,但是在HTMl5中實現的.

Web開放字體(WOFF)也是被所有瀏覽器支持的字體

大多數的字體是TrueType(TTF)和OpenType(PTF)而IE實現的是Embedded OpenType(EOT),還有一種可伸縮矢量圖形(SVG)這種類型只被IOS系統支持

 

改變字體

FontSquirrel網站提供了我們所用字體的各種格式，已經能很好的滿足我們的需求

1、定義字體

@font-face{	
	/*定義你要用的字體家族*/
	font-family:'GarogierRegular';
	/*將需要的各種格式的字體下載下來放到stylesheets/fonts文件夾中*/
	/*.eof文件的?#iefix前綴用於修復IE8中的一個嚴重的語法解析Bug,忽略該前綴將導致IE8在解析剩余規則時產生404錯誤,問號的作用是將讓IE8把eot之后的內容作為查詢參數*/
        /*字體的鏈接位置是相對於樣式表而不是HTMLd頁面*/	       
	src:url('fonts/garogier_unhinted-wetbot.eot?#iefix') format('embedded-opentype'),
            url('fonts/garogier_unhinted-wetfont.woff') format('woff'),    

            url('fonts/garogier_unhinted-wetfont.ttf') format('ttf'),
            url('fonts/garogier_unhinted-webfont.svg#garogierregular') format('svb');
	font-weight:normal;
	font-style:normal;	
}

2、應用字體

body{
	font-family:"GarogierRegular";
}

/*也可能存在瀏覽器不支持我們的字體的時候.因此要准備多個備用字體上面的代碼可改為*/

/*

CSS中分為兩種字體:通用字體系列和特殊字體系列

CSS提供了5種通用字體系列

	Serif 字體
	Sans-serif 字體
	Monospace 字體
	Cursive 字體
	Fantasy 字體
因此我們一般都會在特殊字體系列最后加上一個通用字體

*/

body{
	font-family:"GarogierRegular",Georgia,
	            "Palatino","Palatino Linotype",
		    "Times","Times New Roman",serif;
}
我們可以發現上面的字體有的加了引號,當字體名稱中有一個多個引號或有$#這樣的特殊字符時需要用引號引起來,單引雙引都可以.