CSS3 @font-face 指定英文网页字体

　　@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+，火狐，谷歌全部兼容，非常好用。如有不对的地方，欢迎指出

巴特西

CSS3 @font-face 指定英文网页字体

最新文章

热门文章