使用less编译出css引用自定义字体

1. 编写less文件如下
   

   @roboto-font-path: 'fonts';
   
   .roboto-font(@type, @weight, @style) {
       @font-face {
           font-family: 'Roboto';
           src: url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype');
           font-weight: @weight;
           font-style: @style;
       }
   }
   
   .roboto-font-one(@type, @weight, @style) {
       .roboto-font('@{type}', @weight, @style);
   }
   
   .roboto-font-pair(@type, @weight) {
       .roboto-font('@{type}', @weight, normal);
       .roboto-font('@{type}Italic', @weight, italic);
   }
   
   .roboto-font-one('Italic', 200, italic);
   .roboto-font-one('Regular', 400, normal);
   .roboto-font-pair('Thin', 100);
   .roboto-font-pair('Light', 300);
   .roboto-font-pair('Medium', 500);
   .roboto-font-pair('Bold', 700);
   .roboto-font-pair('Black', 900);

   
   
2. 编译出来的css如下
   

   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-Italic.ttf') format('truetype');
     font-weight: 200;
     font-style: italic;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-Thin.ttf') format('truetype');
     font-weight: 100;
     font-style: normal;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-ThinItalic.ttf') format('truetype');
     font-weight: 100;
     font-style: italic;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-Light.ttf') format('truetype');
     font-weight: 300;
     font-style: normal;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-LightItalic.ttf') format('truetype');
     font-weight: 300;
     font-style: italic;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-Medium.ttf') format('truetype');
     font-weight: 500;
     font-style: normal;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-MediumItalic.ttf') format('truetype');
     font-weight: 500;
     font-style: italic;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     font-style: italic;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-Black.ttf') format('truetype');
     font-weight: 900;
     font-style: normal;
   }
   @font-face {
     font-family: 'Roboto';
     src: url('fonts/Roboto-BlackItalic.ttf') format('truetype');
     font-weight: 900;
     font-style: italic;
   }
   

   
   参考：
       在线less编译网址：http://tool.oschina.net/less
       字体文件：http://pan.baidu.com/s/1kTA7Kub