CSS3中字体@font-face的使用

第一步：从http://www.dafont.com/或者Google Web Fonts上下载特殊字体。以从http://www.dafont.com/上下载的Single Malta字体为例，下载single_malta.zip后解压，其中包含SingleMalta.ttf文件。

第二步：根据下载的特殊字体，借助第三方工具（fontsquirrel，url为http://www.fontsquirrel.com/tools/webfont-generator）获取@font-face所需要的字体格式（如.eot,.woff,.ttf,.svg）。具体步骤：

看到如下页面的部分：

然后点击页面上的UPLOAD FONTS上传之前下载的特殊字体文件（SingleMalta.ttf），就会出现上传的文件大小等信息，然后再进行几项选择操作，如下图中红线圈住的部分：

然后点击DOWNLOAD YOUR KIT按钮，即可生成我们需要的特殊字体的字体格式文件：

第三步：

在本地项目中的style.css中附上我们需要的@font-face样式：

@font-face {

font-family: 'SingleMaltaRegular'; /*此处为自定义的字体名称*/

src: url('../fonts/singlemalta-webfont.eot');/*IE9*/

src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),/*IE6~IE8*/

url('../fonts/singlemalta-webfont.woff') format('woff'), /*Morden Browsers*/

url('../fonts/singlemalta-webfont.ttf') format('truetype'), /*safari,android,ios*/

url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');/*Legacy IOS*/

font-weight: normal; 

font-style: normal;

 }

或者在第二步中下载的文件中包含stylesheet.css文件，其中就有@font-face的完整写法，粘贴过来即可，注意：改下路径。

到这里为止，我们已经通过@font-face自定义好所需的SingleMalta字体。

第四步：把自己定义的字体应用到你的Web中的DOM元素上

<h2 class="singleMalta">singleMalta</h2>

h2.singleMalta { font-family: 'SingleMaltaRegular' /*通过“font-family：自定义字体名称”可以将上面设置好的字体应用于h2.singleMalta元素上*/}