scss Sass partial：@ font-face mixin

Posted 2021-05-18

// Since .woff has almost perfect support all the way back to IE9 except for Opera Mini,
// I removed the calls to .eot, .ttf and .svg. to streamline the mixin -- http://caniuse.com/#search=woff
// Note: IE8, IE7, IE6, old Safari in Android and iOS will gracefuly degrade to system fonts.
@mixin fontFace($font-family, $file-path) {
  @font-face {
    font: {
      family: $font-family;
      weight: normal;
      style: normal;
    }
    src: url('#{$file-path}.woff') format('woff');
  }
}

[class^="icon-"], [class*=" icon-"] {
	font: {
      family: 'icon-font';
      weight: normal;
      style: normal;
      variant: normal;
    }	
	text-transform: none;
	line-height: 1;
	speak: none;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// Usage: 
@include fontFace(fontName, 'path/to/font'); //No need to specify the file extension in the "fontName" argument

/*----*/

// Old mixin to support all the way back to IE6
@mixin fontFace($font-family, $file-path) {
  @font-face {
    font: {
      family: $font-family;
      weight: normal;
      style: normal;
    }
    src: url('#{$file-path}.eot'); //IE9 Compat Modes
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), //IE6-IE8
         url('#{$file-path}.woff') format('woff'), //Modern Browsers
         url('#{$file-path}.ttf') format('truetype'), //Safari, Android, iOS
         url('#{$file-path}.svg##{$font-family}') format('svg'); //Old iOS devices
  }
}

// Usage: @include fontFace(fontName, 'path/to/font'); » No need to specify the file extension in the "fontName" value

//Compiles to:
// [The CSS comments and the other font files are only for reference, they don't really compile with this mixin, only the .woff font does]
@font-face {
    font-family: Franchise;
    /*IE9 Compat Modes*/
    src: url("../fonts/franchise.eot");
    /*IE6-IE8*/
    src: url("../fonts/franchise.eot?#iefix") format("embedded-opentype"),
         /*Modern Browsers*/
         url("../fonts/franchise.woff") format("woff"),
         /*Safari, Android, iOS*/
         url("../fonts/franchise.ttf") format("truetype"),
         /*Old iOS devices*/
         url("../fonts/franchise.svg#franchise") format("svg");    
    font-weight: normal;
    font-style: normal;
}