Font Include Sass Mixin

Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

We have previously introduced a google font mixin (for details, see Google Fonts Sass Mixin). Today we will further recommend a web font mixin.

To use web font, you must use @ font-face to import the font file before using it. The format of @ font-face is as follows:

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

Because browsers cannot support different font formats, we need a brain to import the font format for several minutes. It seems like the following.

@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;}

It's so annoying and troublesome. As a programmer who focuses on efficiency and likes to be lazy, we certainly have to have a trick. Let's take a look at this 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;  }}

Then use

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

Is there any instant ease? Okay. You have time to play a game.

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

Front-end development whqet, pay attention to front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------