@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; } 我们可以发现上面的字体有的加了引号,当字体名称中有一个多个引号或有$#这样的特殊字符时需要用引号引起来,单引双引都可以.