Web前端學習之2-CSS3@font-face的運用

font-face：可以自己設置自己想要的字體（例：字體下載地址：http://www.w3cplus.com/content/css3-font-face）

                   以上地址同時包含了@font-face的非常詳細的解析。可以去圍觀下。

 

我的只是簡介。

@font-face{
    font-family:"myFirstFont";
    src:url('Sansation_Light.ttf'),
        url('Sansation Light.eot') format('eot');
}

format: 此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別瀏覽器對

@font-face的兼容問題，這裏涉及到一個字體format的問題，因爲不同的瀏覽器對字體格式支持是不一致的，瀏覽器自身也無法通過路徑後綴來判斷字體

@font-face怎樣寫能讓所有瀏覽器兼容：

@font-face {
	font-family: 'diyfont';
	src: url('diyfont.eot'); /* IE9+ */
	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('diyfont.woff') format('woff'), /* chrome、firefox */
		 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}