标签：网页字体

fontsquirrel:在线生成网页可用字体

前些天在做一个简单的网站外包，由于自己也是业余做着玩，前端的一些东西，也是边学边用，比如说，网站上用到一种专门的字体，而我手里只有ttf格式的字体文件，显然并不能适配所有的浏览器。

于是想到，是不是要把ttf格式转换为各种字体格式，上传到服务器，然后再在css中定义引用呢？

这个思路是可行的，问题在于怎么转格式。

辗转多次搜索，终于找到一个神器fontsquirrel，分享给大家。这个网站可以在线上传字体文件，然后他会自动生成各种供网页使用的字体文件，还有使用demo，非常方便。

地址：http://www.fontsquirrel.com/tools/webfont-generator

进入网站之后，点击upload，上传字体文件，等待网站自动生成各种文件即可，最后会给你打包到一个压缩包供你下载。默认的OPTIMAL已经够用，当然你如果需要自己定义一些高级特性，定义输出所有包括ttf，otf，woff，svg，eot格式的文件，可以选择EXPERT模式。

fontsquirrel上传字体

最后点击DOWNLOAD YOUR KIT即可。

下载之后，里面的文件就可以供我们所用了。

一般来说，网页引用字体，步骤如下：

首先css定义,其中的font-family是定义的字体名，之后可以引用，url对应的是字体文件的路径，可以是相对路径，也可以是绝对路径：

@font-face {
    font-family: '843-cai978regular';
    src: url('843-cai978-webfont.eot');
    src: url('843-cai978-webfont.eot?#iefix') format('embedded-opentype'),
         url('843-cai978-webfont.woff2') format('woff2'),
         url('843-cai978-webfont.woff') format('woff'),
         url('843-cai978-webfont.ttf') format('truetype'),
         url('843-cai978-webfont.svg#843-cai978regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

随后直接在html里面引用，或者定义到css类里面都可以，比如我直接内联css样式。

<p style="font-family: '843-cai978regular';>LOOKFOR404</p>

简单实用，有需要的朋友可以试试。