Aguarde...

21 de abril de 2020

COMO PREPARAR E USAR FONTES VARIÁVEIS ​​NA WEB

COMO PREPARAR E USAR FONTES VARIÁVEIS ​​NA WEB

Quando redesenhei meu blog , decidi deixar de usar o Work Sans e optar por uma fonte nova chamada Inter , uma fonte adorável de Rasmus Andersson . O Inter não está nas fontes do Google, como o Work Sans, e eu sabia que, se quisesse usar o Inter, precisaria fazer um pouco mais de trabalho braçal. Neste artigo, mostrarei o trabalho manual que eu tive que fazer para preparar e usar a variante de fonte variável do Inter, e como eu pude usar apenas um único arquivo de fonte de 43 KB para cada variação e peso!

Uma breve introdução às fontes variáveis

Uma fonte variável pode conter todo o conjunto de glifos de uma fonte ou glifos individuais com até 64.000 eixos de variação, incluindo peso, largura, inclinação e, em alguns casos, estilos específicos, como Condensado, Negrito etc.

Para simplificar, você só tem um único arquivo para todas as variações de fonte em vez de um arquivo por variação. Quando você usa fontes personalizadas na Web, isso significa menos arquivos e menor tempo de carregamento.

O suporte a fontes variáveis ​​no navegador é relativamente novo – posso usar mostra que os navegadores começaram a oferecer suporte a fontes variáveis ​​em 2018. No uso prático, se você deseja exibir uma fonte personalizada, provavelmente precisará incluir “legado” fontes variadas como substituto.

Preparando a fonte

Antes de importar e usar a fonte, você deve prepará-la. Isso inclui:

  1. Subconjunto
  2. Convertendo para o formato correto (compactado)

O subconjunto de fontes é a prática de remover glifos não utilizados das fontes para torná-las menores. No caso do Inter, existem muitos glifos que eu não precisarei. Michael Herold reuniu um ótimo guia sobre o subconjunto de fontes que explica como usar uma ferramenta python chamada pyftsubsetencontrada em fonttools . Eu recomendaria a leitura de seu artigo, pois ele tem uma profundidade muito maior do que esta sobre subconjuntos.

E, como estamos usando pyftsubset, também temos o benefício adicional de conversão de tipo de arquivo e compactação de fontes! 🎉

Aqui está o comando que eu usei para subconjunto e compactar o Inter:

pyftsubset Inter.otf \
  --unicodes="U+0020-007F,U+00A0-00FF,U+0100-017F,U+2192" \
  --layout-features="" \
  --flavor="woff2" \
  --output-file="Inter-subset.woff2"

O artigo anterior que mencionei pode explicar esse comando com mais detalhes, mas em um nível alto, eis o que está acontecendo:

  1. --unicodes: Esse sinalizador aceita intervalos de unicodes para os quais os glifos devem ser mantidos. Os intervalos específicos que estou usando são intervalos unicode que representam letras maiúsculas e minúsculas, números e o caractere →.
  2. --layout-features: Esse sinalizador permite recursos do OpenType, como números de tabela ou ligaduras. Decidi retirar todos os recursos por enquanto e adicioná-los mais tarde, se necessário.
  3. --flavor: Esse sinalizador permite escolher seu “sabor” (ou formato), que neste caso é woff2.
  4. --output-file: O nome do arquivo de saída do comando.

Antes deste comando, o arquivo de fonte era 780 KB, após subconjuntos e compactação, era apenas 43 KB! Isso representa 5% do tamanho do arquivo original. 🤯

Usando a fonte

Agora que a fonte está preparada, é hora de usá-la em um site. Isso requer que primeiro importemos a fonte e, em seguida, adicionemos alguns ajustes de CSS para dizer à nossa fonte como se comportar.

Importando a fonte

Aqui está o código de importação inicial que eu usei:

@font-face {
  font-family: 'Inter Variable', sans-serif;
  src: url('../fonts/Inter-Variable-subset.woff2') format('woff2');
  font-weight: 1 999;
  font-display: swap;
}

Normalmente, ao importar uma fonte, você define a font-weightpropriedade com um valor explícito como 700. Como essa fonte representa um intervalo de pesos de fonte, passo-o como um intervalo que abrange todos os valores possíveis de peso da fonte.

Como nem todos os navegadores oferecem suporte a fontes variáveis, também incluo uma versão “estática” (não variável) do Inter. Como eu quero usar vários pesos, isso exige que eu use vários arquivos – eis apenas um exemplo de como essas instruções de importação são:

@font-face {
  font-family: 'Inter Static', sans-serif;
  src: url('../fonts/Inter-BlackItalic-subset.woff2') format('woff2'),
    url('../fonts/Inter-BlackItalic-subset.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

Usando recursos de fonte variável

A utilização dos recursos de uma fonte variável parece diferente de uma fonte normal. Por exemplo, quando você deseja que uma fonte normal fique em negrito, basta dizer que ela tenha um peso de fonte em negrito:

font-weight: bold;

Como os recursos de fonte variável (como peso) existem ao longo de um eixo, o valor para negrito não é predefinido. Em vez disso, você o define com o font-variation-settingsatributo:

font-variation-settings: 'wght' 700;

Você pode definir mais de uma configuração de variação em um único atributo, assim:

font-variation-settings: 'wght' 700, 'ital' 1;

Uma nota sobre itálico

Algo que achei particularmente confuso ao usar o Inter como uma fonte variável estava fazendo com que o itálico se comportasse de forma consistente entre os navegadores. Com algumas fontes variáveis ​​(incluindo Inter), você pode definir um valor inclinado:

font-variation-settings: 'slnt' -10;

Isso torna a fonte inclinada como uma fonte em itálico. Infelizmente, o navegador ainda não concorda sobre como exatamente renderizar a fonte: alguns abordarão isso de maneira aditiva (portanto, font-style: italicmais 'slnt' -10 resulta em uma fonte MUITO inclinada), enquanto outros escolherão apenas um.

Inicialmente, tentei definir o item font-stylecomo normalem qualquer elemento que usasse a fonte variável (para evitar o comportamento “superslant” aditivo), mas com efeitos colaterais indesejados. Enquanto eu estava tentando resolver isso, me deparei com o font-stylevalor obliqueem MDN :

As faces de fonte em itálico geralmente são cursivas por natureza, geralmente usando menos espaço horizontal do que suas contrapartes não estilizadas, enquanto as faces oblíquas geralmente são apenas versões inclinadas da face regular.

Com a Inter em particular, parecia respeitar obliquede maneiras que não respeitava italic. Para tornar o comportamento consistente, atualizei minha declaração de importação:

@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/Inter-Variable-subset.woff2') format('woff2');
  font-weight: 1 999;
  font-style: oblique 0deg 10deg;
  font-display: swap;
}

Ao definir um estilo de fonte oblíquo com um intervalo de 0 a 10 graus, ele fornece instruções explícitas aos navegadores sobre o que esperar da fonte. Então, quando defino itálico, posso usar o seguinte:

font-variation-settings: 'slnt' -10;
font-style: oblique 10deg;

Usando @supports para suavizar problemas

Como estou usando duas fontes (versões variável e “estática” da mesma fonte, Inter), tenho um pouco de malabarismo entre os navegadores que suportam fontes variáveis ​​e os que não. Felizmente, podemos usar @supportsem CSS. O MDN define a @supportsregra como:

A regra geral do @supports CSS permite especificar declarações que dependem do suporte de um navegador para um ou mais recursos CSS específicos.

Eu quero ter CSS condicional para fontes variáveis, para que eu possa quebrar as declarações @supports, desta forma:

@supports (font-variation-settings: normal) {
	/* CSS goes here */
}

Aqui está um exemplo de como eu o uso para lidar com itálico entre as duas fontes:

em,
i {
	font-style: italic;
	
  @supports (font-variation-settings: normal) {
    font-variation-settings: 'slnt' -10;
    font-style: oblique 10deg;  	
  }
}

Juntando tudo

Depois de resolver todos os desafios que enfrentei, meu código final se parece com o seguinte:

@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Inter Variable';
    src: url('../fonts/Inter-Variable-subset.woff2') format('woff2');
    font-weight: 1 999;
    font-style: oblique 0deg 10deg;
    font-display: swap;
  }
}

@font-face {
  font-family: 'Inter Static';
  src: url('../fonts/Inter-subset.woff2') format('woff2'),
    url('../fonts/Inter-subset.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html {
  font-family: 'Inter Static', -apple-system, sans-serif;

  @supports (font-variation-settings: normal) {
    font-family: 'Inter Variable' -apple-system, sans-serif;
  }
}

em,
i {
	font-style: italic;
	
  @supports (font-variation-settings: normal) {
    font-variation-settings: 'slnt' -10;
    font-style: oblique 10deg;  	
  }
}

b,
strong {
	font-weight: bold;
	
  @supports (font-variation-settings: normal) {
    font-variation-settings: 'wght' 700;
  }
}

Se você quiser ver todo o código, fique à vontade para bisbilhotar no Github 

Postado em Blog
Escreva um comentário