什么是@font-face?

[kaneruan]

@font-face是css3的一个模块，常用于Logo,tags

@font-face {
       font-family: <YourWebFontName>;
       src: <source> [<format>][,<source> [<format>]]*;
       [font-weight: <weight>];
       [font-style: <style>];
     }

• YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体（下载回来的叫什么字体，这里就填什么字体名），他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
• source:此值指的是你自定义的字体的存放路径，可以是**_相对路径**_也可以是**绝对路径**；

[kaneruan]

其次是format自定义字体格式，主要用来帮助浏览器识别，有一下类型

• TrueType:即.ttf格式
• OpenType:即.otf
  -Web Open Font Format:即.woff,.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离
• Embeded Open Type:即.eot
• SVG:.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器

[kaneruan]

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持

[kaneruan]

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】

[kaneruan]

阿里图标字体库
下面是一个例子

@font-face {font-family: 'webfont';
  src: url('//at.alicdn.com/t/eb26m88i104o0f6r.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/eb26m88i104o0f6r.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/eb26m88i104o0f6r.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/eb26m88i104o0f6r.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/eb26m88i104o0f6r.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */
}