语法:
@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }
设置嵌入HTML文档的字体。
需要兼容当前的主流浏览器,需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
.eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
格式:
@font-face { font-family: myfont; src: url('webfont/iconfont.eot'); /*IE9+:EOT*/ src: url('webfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont/iconfont.woff') format('woff'), /* chrome、firefox */ url('webfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('webfont/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ font-weight: normal; font-style: normal; }