Font Include Sass Mixin

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

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

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

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <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);

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

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

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