自定义字体的方法

网页自定义字体终极教程（兼容各大浏览器）
作者：零度逍遥 | 时间：2014-08-25 | 浏览：1050 | 0 条评论
在我们浏览网页的时候，文字占据着网页的大部分空间，给我们提供重要的信息，所以作为前端开发工程师，我们有义务把网页的字体设计的更加美观，让用户看起来更加舒适，随着CSS3的出现，网页自定义字体收到越来越多的开发人员欢迎。

我想有人可能会像我一样，尝试搜索过各种方法，但都不是太理想，有的是加载不成功，有的则是兼容性不好，无奈，自己闷头研究，终于在今天有了个成果，给大家分享一下。

一、字体格式的了解
首先，我们要的字体格式有个了解，常用的字体格式有以下几种：TTF、WOFF、EOT、SVG。这些字体格式的说明，我就不细说了，想知道的可以百度一下，下面我关键说一下各大浏览器对这些字体格式的兼容性。

这张图片很明白的展示了各大浏览器对字体的支持情况，其中TrueType就是TTF格式，这个字体格式标准的浏览器都会支持，只有脑残的IE不认识，它只兼容EOT格式的字体，所以我们引入字体文件的时候最少要引入两种格式——TTF和EOT。

二、自定义字体方法：
主要是利用CSS3的font-face，代码如下：

@font-face {
font-family: "myFont"; //这里可以随意自定义字体名字
src: url('font.ttf'); //引入字体文件
}
body {
font-family: "myFont"; //与font-face定义的字体名字保持一致
}
这段代码只针对标准浏览器有效，要做到兼容的话，终极解决方案是以下代码：

@font-face {
font-family: 'MyFont';
src: url('font.eot'); //针对IE9
src: url('font.eot?#iefix'), //兼容IE6-IE8
url('font.ttf'), //标准浏览器
url('font.woff'), //标准浏览器
url('font.svg#MyFont'); //不太常用
}
没有这么多格式的字体？简单，推荐一个字体格式转换网站：http://onlinefontconverter.com/ 很轻松完成各种字体格式转换

http://videojs.com/

http://www.bootcss.com/p/layoutit/