前端开发whqet,csdn,王海庆,whqet,前端开发专家

前期以前给大家介绍过一个使用google font的mixin（详见《》），今天我们再进一步给大家推荐个使用web font的mixin。

使用web font，我们须要使用@font-face导入字体文件，然后才干够使用，@font-face的使用格式例如以下

@font-face {      font-family: 
     
      ;      src: 
       [
      
       ][,
        [
       
        ]]*;      [font-weight: 
        
         ];      [font-style: 
         
        
       
      
     

由于不能的浏览器支持的字体格式不一致，因此我们须要一股脑导入若干多钟字体格式，貌似以下这样。

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

太烦躁了，麻烦，作为一个注重效率、喜欢偷懒的程序员，我们当然得有妙招了，来看看这个mixin。

@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {  @font-face {    font-family: '#{$font-family}';    src: url('#{$font-filename}.eot');    src: url('#{$font-filename}.eot?#iefix') format('embedded-opentype'),    url('#{$font-filename}.woff') format('woff'),    url('#{$font-filename}.ttf') format('truetype'),    url('#{$font-filename}.svg##{$font-family}') format('svg');    font-weight: $font-weight;    font-style: $font-style;    font-stretch: $font-stretch;  }}

然后如此这般使用

@include importfont('Font Name', 'fonts/fontfilename', 400);

有没有瞬间轻松，好的，剩下时间玩个游戏撒。

----------------------------------------------------------

，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------