Vi kan være tilbøjelige til at tænke på meget dekorative og flerfarvede skrifttyper som tilhørende den digitale type alder. Ikke så. Kromatisk type, der muliggjorde brugen af konturer, skygger og flere farver (blandt andet) går tilbage til midten af det 19. århundrede. De var sammensat af to eller flere tilsvarende sæt, der blev trykt over hinanden for at skabe den ønskede virkning.
Deres digitale efterkommere er designet til at fungere på nøjagtig samme måde. Hver stil i en lag skrifttypefamilie kan kombineres med dens komplementære stilarter til dannelse af et kompositmateriale.
Der er generelt en regelmæssig (eller fyld) stil, der kan bruges uafhængigt og derefter flere supplerende stilarter, såsom konturer og dekorationer, der kan tilføjes ovenpå. De supplerende stilarter er generelt ikke anvendelige uafhængigt, de skal bruges sammen med mindst en anden stil for at være læselig. Mange lag skrifttype familier har også en færdig sammensat stil.
I Photoshop, Illustrator eller et andet grafikprogram, der bruger lag, er layering-skrifttyper ligefrem, men hvordan virker dette i en browser?
En tilgang ville være at skabe flere
Brug af lagfonte i CSS
Brug af lagfonte i CSS
Brug af lagfonte i CSS
/ * CSS * / # første, #sekund, #third {display: block; position: absolut; top: 10px; venstre: 5px;} h1 {font: 5em 'One'; farve: rgba (200,0,0, } # Second h1 {font-family: 'Two'; farve: rgba (0,200,0, .85);} # tredje h1 {skrifttype-familie: 'Tre'; farve: rgba (0,0,200, .85);} Selvom dette virker, betyder det at oprette en div for hvert lag af skrifttypen, og derefter gentage det samme indhold i hver div. Den resulterende markering er et semantisk rod, idet det ikke er muligt at adskille indholds- og stiloplysninger.
Der er en anden, relativt simpel teknik, der ikke forstyrrer markeringen: ved at bruge :: før og :: efter pseudoelementer kan teksten lagres uden at hylde html.
Her er hvad vi skal bygge: