Voimme olla taipuvaisia ​​ajattelemaan erittäin koristeellisia ja monivärisiä fontteja, jotka kuuluvat digitaaliseen tyyliin. Ei niin. Kromaattinen tyyppi, joka mahdollisti ääriviivat, varjot ja useat värit (muun muassa), palaavat 1800-luvun puoliväliin. Ne koostuivat kahdesta tai useammasta vastaavan sarjasta, jotka painettiin yksi toisensa jälkeen toisiinsa halutun vaikutuksen aikaansaamiseksi.

Heidän digitaaliset jälkeläisensä on suunniteltu toimimaan täsmälleen samalla tavalla. Jokainen kerroksen kirjasinperheen tyyli voidaan yhdistää sen täydentäviin tyyleihin komposiittien muodostamiseksi.

Yleensä on säännöllinen (tai täyttö) tyyli, jota voidaan käyttää itsenäisesti ja sitten useita ylimääräisiä tyylejä, kuten ääriviivoja ja koristeita, jotka voidaan lisätä päälle. Lisästylejä ei yleensä voida käyttää itsenäisesti, niitä on käytettävä yhdessä vähintään yhden muun tyylin kanssa, jotta ne ovat luettavissa. Monilla kerrospohjasarjoilla on myös valmiit komposiitit.

Selaimessa olevat tasokerrokset

Photoshopissa, Illustratorissa tai missä tahansa muussa graafisessa ohjelmassa, joka käyttää kerroksia, kerrostusfontit ovat riittävän suoraviivainen, mutta miten tämä toimii selaimessa?

Layers fonts kanssa divs

Yksi lähestymistapa olisi luoda useita

s ja kiinnitä ne samaan kohtaan kuin tämä:

Käytä kerroksen fontteja CSS: ssä

Käytä kerroksen fontteja CSS: ssä

Käytä kerroksen fontteja CSS: ssä

/ * CSS * / # ensimmäinen, # sekunti, # third {näytä: lohko, sijainti: absoluuttinen, top: 10px, vasen: 5px;} h1 {font: 5em 'One'; väri: rgba (200,0,0, .85);} # toinen h1 {font-family: "Two"; väri: rgba (0,200,0, .85);} # kolmas h1 {font-family: "Three"; väri: rgba (0,0,200, 0,85);}

Vaikka tämä ei toimi, siihen kuuluu div jokaiselle fonttikerrokselle ja toista sama sisältö jokaisessa div: ssa. Tuloksena oleva merkintä on semanttinen sotku, joka ei sisällä erillisiä sisältö- ja tyylitietoja.

Layereita fontteja pseudoelementeillä

Toinen, suhteellisen yksinkertainen tekniikka, joka ei häiritse merkintää: käyttämällä pseudoelementtejä :: before ja :: jälkeen tekstiä voidaan kerrostua ilman, että HTML-koodia yllätetään.

Tässä me aiomme rakentaa: