Síntese de fontes - CSS-Tricks

Anonim

A font-systhesispropriedade em CSS fornece instruções ao navegador sobre como lidar com caracteres em negrito e itálico da fonte quando o especificado font-familynão os inclui.

Vamos pegar Lato do Google Fonts como exemplo. Diz que existem 10 variações diferentes da fonte.

Cada uma dessas variações de fonte é tecnicamente um arquivo de fonte diferente. Se quisermos usar determinados pesos e estilos, vincularemos esses arquivos para que o navegador tenha algo para carregar.

Esta frase normalmente requer quatro arquivos de fonte diferentes.

Mas nem todas as fontes incluem arquivos para manipulação de peso e estilo. Nesses casos, o navegador irá “sintetizar” a própria aparência. O navegador faz o melhor que pode, mas negrito e estilo falsos às vezes tornam o texto menos legível; ou seja, menos legível do que uma versão verdadeiramente projetada. Nos casos mais brandos, podemos ver a sobreposição de caracteres. Em casos mais graves, o texto é completamente ilegível ou pode até mudar de significado - como pode acontecer com idiomas como chinês, japonês, coreano e outros scripts logográficos.

É aí que font-synthesisentra. Ele controla quais tipos de fontes o navegador tem permissão para sintetizar.

Sintaxe

.element ( font-synthesis: none | ( weight || style ); )

Em inglês simples, isso significa font-synthesisque aceitará:

  • um valor de none
  • ou weightoustyle
  • ambos weightestyle

É importante notar que font-synthesisé considerada uma propriedade abreviada. De acordo com a especificação, é uma combinação de font-synthesis-weighte font-synthesis-styleonde ambos aceitam valores de autoou none. Como é possível obter o mesmo efeito usando a abreviação, esse é provavelmente o melhor caminho a seguir.

Valores

  • none: Nem negrito nem oblíquo podem ser sintetizados
  • weight: Negrito pode ser sintetizado pelo navegador
  • style: Oblíquo pode ser sintetizado pelo navegador
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Uso

font-synthesispode ser utilizado com todos os elementos, incluindo os ::first-lettere ::first-linepseudo-elementos.

Pode haver casos em que não permitir que o navegador sintetize negrito e oblíquo em um idioma inteiro faça sentido, porque qualquer um deles pode ocultar caracteres. Aqui está um exemplo retirado da especificação que desativa fontes em negrito e oblíquas sintetizadas contendo caracteres árabes:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Demo

Suporte de navegador

No momento da redação, caniuse informa uma cobertura global de 20,21% da font-synthesispropriedade.

Área de Trabalho

IE Beira Raposa de fogo cromada Safári Ópera
Não Não 34+ Não 9+ Não

Móvel

iOS Safari Opera Mini Navegador Android Chrome para Android Firefox para Android
9+ Todo Não Não 68

Quer usar font-synthesisno e-mail? O Campaign Monitor relata que é suportado pelos seguintes clientes:

  • Apple Mail 10+
  • Outlook para Mac
  • Aplicativo AOL Alto iOS
  • iOS Mail 10+
  • Pardal
  • G Suite
  • Gmail
  • Caixa de entrada do Google

Mais Informações

  • Especificação de nível 4 do módulo de fontes CSS
  • “Teste CSS3: font-synthesis“ por Eric Meyer
  • “How to Italicize Text” por Chris Coyier