CSS教程 @font-face 网页中嵌入特殊字体方法

一、获取特殊字体：

我们拿下面这种single Malta字体来说吧：

要得到single Malta字体，不外乎两种途径，其一找到付费网站购买字体，其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的，那我们就得到免费的地方下载，在哪有呢？我平时都是到Google Web Fonts和Dafont.com寻找自己需要的字体，给大家推荐的这两个都是国外的站点，打开速度会比较慢，国内的像站长字体font.chinaz.com，都很好用，当然网上也还有别的下载字体的地方，下载下来的文件里面有.TTF。然后开始下一步

二、获取@font-face所需字体格式：

特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，下面我给大家推荐一款我常用的一个工具fontsquirrel和font2web.com。也可以直接百度TTF换格式

现在只要用Conv_SingleMalta类名就可以运用特殊字体了。

@font-face {
    font-family: 'Conv_SingleMalta';
    src: url('fonts/SingleMalta.eot');
    src: local('☺'), url('fonts/SingleMalta.woff') format('woff'), url('fonts/SingleMalta.ttf') format('truetype'), url('fonts/SingleMalta.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.Conv_SingleMalta{
  font-family: 'Conv_SingleMalta';
}

　　

ps：解释一下这些格式

一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化，支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有【IE4+】；

五、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。