Vi kan være tilbøyelige til å tenke på svært dekorative og flerfargede skrifter som tilhører den digitale typen alder. Ikke så. Kromatisk type som muliggjorde bruken av konturer, skygger og flere farger (blant annet) går tilbake til midten av 1800-tallet. De var sammensatt av to eller flere tilsvarende sett som ble skrevet ut hverandre for å skape den ønskede effekten.

Deres digitale etterkommere er designet for å fungere på akkurat samme måte. Hver stil i en lagfontefamilie kan kombineres med sine komplementære stiler for å danne et kompositt.

Det er vanligvis en vanlig (eller fyll) stil som kan brukes uavhengig av hverandre og deretter flere tilleggsstiler, som konturer og dekorasjoner, som kan legges på toppen. De supplerende stilene er vanligvis ikke brukbare selvstendig, de må brukes sammen med minst en annen stil for å være lesbar. Mange lag font familier har også en ferdig kompositt stil.

Lagskrifter i nettleseren

I Photoshop, Illustrator eller et annet grafikkprogram som bruker lag, er lagringsfonter rettferdig nok, men hvordan virker dette i en nettleser?

Layoutfonter med divs

En tilnærming ville være å skape flere

s og pin dem til samme punkt som dette:

Bruke lagfonter i CSS

Bruke lagfonter i CSS

Bruke lagfonter i CSS

/ * CSS * / # first, #second, #third {display: block; posisjon: absolutt; topp: 10px; venstre: 5px;} h1 {font: 5em 'One'; farge: rgba (200,0,0, } # Second h1 {font-family: 'Two'; farge: rgba (0,200,0, .85);} # tredje h1 {font-familie: 'Tre'; farge: rgba (0,0,200, 0,85);}

Selv om dette gjør arbeid, innebærer det å opprette en div for hvert lag av fonten, og deretter gjenta det samme innholdet i hver div. Den resulterende markeringen er et semantisk rot, som ikke klarer å skille innhold og stilinformasjon.

Layoutfonter med pseudoelementer

Det er en annen, relativt enkel teknikk som ikke forstyrrer markeringen: ved å bruke :: før og :: etter pseudoelementer, kan teksten lagres uten å hakse opp html.

Her er hva vi skal bygge: