Podemos estar inclinados a pensar em fontes altamente decorativas e multicoloridas como pertencentes à idade do tipo digital. Não tão. Tipo cromático que permitiu o uso de contornos, sombras e várias cores (entre outras coisas) remontam a meados do século XIX. Eles eram compostos de dois ou mais conjuntos correspondentes que foram impressos um sobre o outro, para criar o efeito desejado.

Seus descendentes digitais são projetados para funcionar exatamente da mesma maneira. Cada estilo em uma família de fontes de camada pode ser combinado com seus estilos complementares para formar um composto.

Geralmente, há um estilo regular (ou preenchimento) que pode ser usado independentemente e vários estilos complementares, como contornos e decorações, que podem ser adicionados na parte superior. Os estilos suplementares geralmente não são utilizáveis ​​independentemente, eles precisam ser usados ​​em conjunto com pelo menos um outro estilo para serem legíveis. Muitas famílias de fontes de camada também vêm com um estilo composto pronto.

Fontes de camada no navegador

No Photoshop, Illustrator ou qualquer outro programa gráfico que utilize camadas, as fontes de camadas são bastante simples, mas como isso funciona em um navegador?

Camadas de fontes com divs

Uma abordagem seria criar vários

  Usando fontes de camada em CSS 
  Usando fontes de camada em CSS 
  Usando fontes de camada em CSS 
  / * CSS * / # first, #second, #third {display: block; posição: absolute; top: 10px; esquerda: 5px;} h1 {font: 5em 'One'; color: rgba (200,0,0, .85);} # segundo h1 {font-family: 'Dois'; cor: rgba (0,200,0, 0,85);} # terceiro h1 {font-family: 'Três'; cor: rgba (0,0,200, 0,85);}