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

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

我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具来实现，下面我给大家推荐一款工具fontsquirrel,跟我点这里进入到下面这个界面吧。

你可以直接点击导航:

如何生成@font-face需要的各种字体，先把我们刚才下载的字体上传上去：

上传后按下图所示操作：

现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了，接着解压缩，如下：

里面除了@font-face所需要的字体格式外，还带有一个DEMO文件。

例如在自己的本地创建了一个fontface项目：

在项目中单独创建一个fonts目录，用来放解压出来@font-face所需的字体：

现在@font-face所需字体已经加载到本地项目，现在本地项目中的style.css中附上我们需要的@font-face样式

@font-face {

   font-family:'SingleMaltaRegular';

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

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

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

    url('../fonts/singlemalta-webfont.ttf') format('truetype'),

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

   font-weight:normal;

   font-style:normal;

}

我们已经通过@font-face自定义好所需的SingleMalta字体，把自己定义的字体应用到你的Web中的DOM元素上：

h2.singleMalta{ font-family:'SingleMaltaRegular'}

效果：

提醒使用者：

1、如果是英文网站，而且Logo，Tags等应用到较多的这种特殊字体效果，我建议你不要使用图片效果，而使用@font-face，但是你是中文网站，我觉得还是使用图片比较合适，因为加载英文字体和图片没有多大区别，但是你加载中文字体，那就不一样了，因为中文字体太大了，这样会影响到项目的某些性能的优化；

2、致命的错误，你在@font-face中定义时，文件路径没有载对；

3、你只定义了@font-face，但并没有应用到你的项目中的DOM元素上；

我给大家提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些特殊字体，但下面这个作用更大，能帮你生成@font-face所需要的各种字体，这工具就是Font Squirrel。

最后在提醒一下，使用@font-face别的可以忘了，但Font Squirrel千万不能忘，因为他能帮你生成@font-face所需的各种字体格式。

生成地址：https://www.fontsquirrel.com/tools/webfont-generator