@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体。可能有人要问,使用这种字体,IE兼容性怎么办,那就大错特错了,@font-face甚至向下兼容到IE4,想想看自己的页面上能有自己自定义的字体是一件多么帮的事情啊,现在贴出一点学习过程与大家分享
首先选一款你要用的字体,有免费下载的或者付费购买的(我反正是下免费的),这个demo种我选的是一个叫alex_brush的字体。那么@font-face的语法格式如下:
@font-face {
font-family: 'alex_brushregular';
src: url('fonts/alexbrush-regular-webfont.eot');
src: url('fonts/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/alexbrush-regular-webfont.woff') format('woff'),
url('fonts/alexbrush-regular-webfont.ttf') format('truetype'),
url('fonts/alexbrush-regular-webfont.svg#alex_brushregular') format('svg'); font-weight: normal;
font-style: normal; }
#alex-brush{
font-family: "alex_brushregular";
font-size: 40px;
}
@font-face里url是你所使用的自定义的字体的文件位置,可以是相对路径也可以是绝对路径,format是字体格式。设置好之后,只要在对应的DOM对象使用就可以了
这里只是教大家如何使用,至于那些字体格式就不一一介绍了,有人说这些个格式的字体我如何全部下载到,通常情况下只有一种,但是浏览器只兼容对应的格式的字体,这个时候就需要使用到第三方软件fontsquirrel。接下来让我们看看这个软件的界面吧
将你所下载的单个字体通过 ADD FONS 按钮上传,上传完成后就会出现上图中绿色的那条状态栏(原谅我比较懒,只传了一张图),然后点击上图右下的蓝色 DOWNLOAD 按钮,点击过后稍微等待,就会讲字体包下载到你的本地,接着将字体放置到代码所写的位置就可以使用啦。
本人亲测IE6+,火狐,谷歌全部兼容,非常好用。如有不对的地方,欢迎指出