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- */
}