6 meses atrás eu criei um protip chamado Absurdly Abstract @ font-face mixin com a intenção de tornar mais fácil incluir fontes de marca. No final daquele artigo, observei que faltava a capacidade de fazer referência ao font-styleatributo.

Revisei o script original adicionando o font-styleatributo. O artigo original se chamava “Absurdly Abstract”, então, com esse espírito, saí do meu caminho para abstrair um pouco mais. Espero que você goste.

Nosso Pacote

O pacote total inclui:
* _defaults.scss
* _vars.scss
* _mixins.scss
* brand-face.scss

Você pode substituir qualquer coisa que encontrar _defaults.scssdentro _vars.scss. Incluí um exemplo de $brand-facesarray _vars.scssque você pode seguir. Aqui está para referência fácil:

Nossa matriz de faces de marca

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

O princípio chave a ser lembrado dentro da matriz é este:

$brand-faces: '<font-name>' (
    ("<filename>", <weight>, <style>),
);

É importante observar como no $brand-facesexemplo real . Um nome de fonte pode ter várias combinações de peso / estilo. Isso é útil porque dentro do seu css você pode dizer font-family: 'nexa'; font-weight:bold; font-style:italic;Com isso sendo dito. A família de fontes que você inclui na $brand-facesmatriz precisa oferecer suporte a esses recursos.

The Mixin

Vou explicar cada seção do mixin principal e fornecer a fonte na parte inferior.

Este nome de mixins é:

@mixin brand-faces() {

Para tirar proveito do bloqueio de cache, verificamos se a função Compass está disponível. Do contrário, recuamos para o que quer que seja o padrão insolente.current-time()

@if function-exists('current-time') {
 $cache: '?'+#{current-time()};
}

A parte principal do mixin está percorrendo nosso array. O formato desta matriz é importante, portanto, consulte acima ou veja a estrutura exata.$brand-faces_vars.scss

// Loop through each "Family" (Families may have different weights, etc)
 @each $family in $brand-faces {

  $face-name: quote(#{nth($family, 1)});
  $face: nth($family, 2);

  @each $option in $face {
   @font-face {
    font-family: to-lower-case($face-name);

minúsculas a fonte para consistência

src: url(nth($option, 2) + '.eot'+$cache);
src: url(nth($option, 2) + '.eot'+$cache+'#iefix') format('embedded-opentype'),
url(nth($option, 2) + '.woff'+$cache) format('woff'),
url(nth($option, 2) + '.ttf'+$cache) format('truetype'),
url(nth($option, 2) + '.svg'+$cache) format('svg');

aplicar nosso $cachedesde o tempo de compilação

font-weight: nth($option, 1);

// If font-style value is supplied, apply that value, otherwise set it to normal
@if length($option) == 3 {
 font-style: nth($option, 3);
} @else {
 font-style: 'normal';
}

Uma coisa importante a se destacar é que se você estiver usando uma fonte que é naturalmente Itálico, não defina o estilo da fonte aqui ou cada navegador irá distorcer sua fonte ** mal **. Esta adição do artigo original tem como objetivo aplicar uma família de fontes de marca completa.

 }
}
.brand-face-#{nth($sequentials,index($brand-faces, $family))} {
 font-family: to-lower-case($face-name);
}

Optei por adicionar uma $sequentialsvariável porque percebo que pode não agradar a todos. Confira como eu substituí os padrões para usar algarismos romanos. Sinta-se à vontade para usar o que quiser.$brand-face-quart_vars.scss

 }

}

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

Esta última parte permite incluir este pacote, e se você não definir o array em variáveis, nenhum estilo será adicionado ao seu projeto.$brand-faces

Conclusão

Como no primeiro artigo que escrevi, terminei adicionando uma boa lista de ter. Eu sei que em meus próprios projetos agora, em vez de ter uma lista classe de , , , etc … Eu uso , , , , etc. Ao criar a matriz Senti que se tornou muito profundo e possivelmente confuso, por isso, se você tem feedback, Estou aberto a sugestões. Com isso:.brand-face-primary.brand-face-alt.brand-face-tert.brand-face-serif.brand-face-serif-alt.brand-face-sans.brand-face-sans-alt

A fonte

Você pode encontrar a fonte completa desse experimento no github, aqui:
https://github.com/drrobotnik/brand-face

Comentários

Apliquei esses conceitos aos meus próprios projetos com base na minha experiência e opiniões. Eu adoraria que você aplicasse isso aos seus projetos e me desse suas opiniões. Eu gostaria de expandir o conceito de brandno espaço de cor, tamanho e outras áreas que são necessárias, mas exclusivas para cada projeto.