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