在css中使用自定义字体

使用css3的#font-face属性

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

下面是我使用SourceCodePro的配置。(首先要把字体文件放进去)

@font-face {
  font-family: 'SourceCodePro';
  src: url('./assets/font/SourceCodePro.eot');
  src: url('./assets/font/SourceCodePro.eot?#iefix') format('embedded-opentype'),     url('./assets/font/SourceCodePro.woff') format('woff'), url('./assets/font/SourceCodePro.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

如果我们想定义某种字体的多种样式，可以配合sass使用，效果更好。