Absurdly Abstract @ font-face PT.2 – estilo da fonte

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.