css自定义字体

一、定义字体        

        通常我们字体定义是这样定义的，但是为什么需要多种格式的字体文件？为什么要写两个src?为什么。eto后面需要加?#iefix？总的来说，都是为了兼容各大浏览器！

@font-face {
    font-family: 'fontTest';
    src: url(xxx.eot);
    src: url(xxx.eot?#iefix) format("embedded-opentype"), url("xxx.woff") format("woff"), url("xxx.ttf") format("truetype"), url("xxx.svg") format("svg");
}

1、为什么需要多种格式的字体文件？

        需要svg格式是因为，iOS 在 4.2 之前仅支持 svg 格式的字体，由于 svg 格式不能压缩，通常会比较大。鉴于 iOS 老版本渐渐被淘汰，因此可以考虑去掉此格式。

        需要eot格式是因为，IE9之前IE浏览器只支持eot格式，从 IE9 开始微软摒弃了自己的 EOT 字体开始支持 ttf otf 等主流字体格式。

        woff 属于 W3C 的推荐标准，最早在 firefox 3.6 上实现。woff 并不是一种新的字体格式，它只是包装 truetype 和 opentype 并进行压缩，压缩后可以使 truetype 减少 40% 。除此之外，它还允许添加元信息，比如字体作者的许可证，不过浏览器并不对这些许可做任何验证。支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+

        ttf 是目前最普遍的字体格式。支持这种字体的浏览器有IE9、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile、Safari4.2+

2、为什么要写两个src?

        绝大多数情况下，第一个 src 是可以去掉的，除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面，微软修改了在兼容模式下的 CSS 解析器，导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的，所以在上面添加一个不带问号的 src 属性便可以解决此问题。

3、eto后面需要加?#iefix？

        IE9 之前的版本没有按照标准解析字体声明，当 src 属性包含多个 url 时，它无法正确的解析而返回 404 错误，而其他浏览器会自动采用自己适用的 url。因此把仅 IE9 之前支持的 EOT 格式放在第一位，然后在 url 后加上 ?，这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。至于 #iefix 的作用，一是起到了注释的作用，二是可以将 url 参数变为锚点，减少发送给服务器的字符。

二、字体包压缩

        网页上使用的字体包一般都经过压缩，压缩我们普遍使用font-spider，使用方式见font-spider/README-ZH-CN.md at master · aui/font-spider · GitHub

字蛛压缩时可以通过ttf转换出woff2、woff、eot、svg多种格式的字体包，以兼容各大浏览器。

三、字体包格式转换工具

        必要的时候可以通过FontCreator往压缩过的字体包中添加字体，FontCreator功能很强大，但也是收费的，还要好多功能我也还没使用过。FontCreator可以直接导出ttf和woff格式的字体包 ，其他格式的字体包可以借助node小工具来转换

ttf转svg：https://github.com/qdsang/ttf2svg

ttf转woff：https://github.com/fontello/ttf2woff

ttf转eot：https://github.com/fontello/ttf2eot