@font-face en @mixin SCSS
Voici une mixin SCSS, mise au point Jonathan Neal, et disponible sur Github, qui permet d’ajouter rapidement une instruction @font-face. Elle prend comme paramètres le nom d’usage de la police, le chemin vers ses fichiers, la graisse, le style, et les extensions des fichiers à inclure (facultatifs).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@mixin fontface($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) { $src: null; $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_") ); $formats: ( otf: "opentype", ttf: "truetype" ); @each $ext in $exts { $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext); $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext); $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma); } @font-face { font-family: quote($name); font-style: $style; font-weight: $weight; src: $src; } } |
Usage :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@include fontface('mafonttest', '../fonts/mafonttest-light', 300, normal); @include fontface('mafonttest', '../fonts/mafonttest-lightitalic', 300, italic); @include fontface('mafonttest', '../fonts/mafonttest-book', 400, normal); @include fontface('mafonttest', '../fonts/mafonttest-bookitalic', 400, italic); @include fontface('mafonttest', '../fonts/mafonttest-bold', 700, normal); @include fontface('mafonttest', '../fonts/mafonttest-bolditalic', 700, italic); body{ font-family:"mafonttest"; } |