一般情况下引用字体@font-face时，会把woff，eot，svg都引用进去，浏览器根据需要下载不同类型的字体。
IE--.eot; 其它浏览器--.woff； 手机浏览器一般是--.ttf;
truetype:
是windows和mac系统最常用的字体格式。
eot:
eot是嵌入式字体，是微软开发的技术，允许onetype字体用@font-face嵌入到网页。
onetype:
onetype是微软和Adobe共同开发的字体，IE浏览器全部采用这种字体。
woff:
woff(web开发字体格式)是一种专门为web而设计的字体格式标准，实际上是对truetype/onetype等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。
svg:
SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。
如何使用：
IE只支持微软自有的EOT格式字体，需要用字体转换工具将其转换为EOT格式，其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体。
<span class="logo"></span>-
@font-face { -
font-family: 'MyWebFont'; -
src: url('webfont.eot'); /* IE9 Compat Modes */ -
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ -
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ -
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ -
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ -
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ -
} -
#logo{ -
font-family: -
'MyWebFont', 'PingFang SC', -
'Helvetica Neue','Helvetica', -
'STHeitiSC-Light',"Microsoft YaHei", 'Arial', sans-serif; -
font-size: 60px; -
}
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
注意了，“sans-serif”不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。
并始终提供一个类族名称作为最后的选择。
通常字体系列名称：比如："serif"(无衬线)、"sans-serif"(衬线)、"cursive"(等宽)、"fantasy"(梦幻)、"monospace"(草体)；
具体DEMO案例，这篇文章比较全。http://www.cnblogs.com/duanhuajian/archive/2013/01/31/2887088.html
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
网页常用的字体：
Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常。
中文：
宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
字体引用的优先级
ios：中文：PingFang 苹方，STHeitiSC-Light 苹果黑体；英文：优先Gotham,Myriad Set Pro;STHeitiSC-Light 苹果黑体；
windows：yahei 微软雅黑
font-family:'PingFang SC','Gotham','Myriad Set Pro' ,'STHeitiSC-Light', 'Microsoft YaHei', sans-serifsans-serif;