🥇 Absurdly Abstract @ font-face mixin

Fontes de marca são uma dor

Precisamos levar em consideração os pesos das fontes. Nem todas as fontes têm todos os pesos, por isso precisamos de uma maneira limpa de definir as que temos.

Normalmente, tenho pelo menos esses dois arquivos incluídos no meu styles.scssarquivo principal :

_vars.scss
_mixins.scss

Então, dentro de _vars, adiciono minhas variáveis de lista:

$brand-faces:
   'Nexa' (
        normal "nexa/nexa_regular-webfont",
        bold "nexa/nexa_bold-webfont",
        bolder "nexa/nexa_black-webfont"
    ),
   'TinFish' (
        bold "font/tin-fish",
        lighter "font/tin-fish",
        normal "font/tin-fish"
    );

Uau! Isso é uma definição clara … Observe que eles nem precisam estar em uma ordem particular! Se você não está familiarizado com as listas SASS, elas podem ser multidimensionais. Cada definição pode estar em uma linha, mas recuei para maior clareza.

Dentro de mixins.scssnós temos:

$brand-faces: false!default;

Esta variável padrão configura de forma que o mixin não seja chamado se a variável não for incluída.

@mixin brand-faces() {

    @each $face in $brand-faces {
        $face-name: quote( #{nth($face, 1)} );
        $font-weights: nth($face, 2);
        @each $weight in $font-weights {
            @font-face {
              font-family: $face-name;
              src: url( nth($weight, 2) + '.eot?76871668' );
              src: url( nth($weight, 2) + '.eot?76871668#iefix') format('embedded-opentype'),
               url( nth($weight, 2) + '.woff?76871668') format('woff'),
               url( nth($weight, 2) + '.ttf?76871668') format('truetype'),
               url( nth($weight, 2) + '.svg?76871668#rosche') format('svg');
              font-weight: nth($weight, 1);
              font-style: normal;
            }
        }
        .font-#{nth($face, 1)} {
            font-family: $face-name;
        }
    }

}

O próprio mixin. Aqui nós criamos o nome da fonte e todas as variações de peso com base na $brand-faceslista.

@if $brand-faces != false {
    @include brand-faces();
}

E é aqui que verificamos se a variável está definida.

Se tudo estivesse bem definido

Você deve ter uma saída de todas as espessuras de fonte. A saída é muito longa para um protip, então, se você estiver interessado, dê uma olhada nesta essência

Você deve ter notado que ignorei o estilo da fonte, que é igualmente importante! Se alguém tiver uma adição de estilos de fonte que esteja associada ao método acima, me avise.

Fontes de marca são uma dor

Se tudo estivesse bem definido

Related Posts