Dijital tip yaşına ait son derece dekoratif ve çok renkli yazı tiplerini düşünmeye meyilli olabiliriz. Öyle değil. Ana hatların, gölgelerin ve çoklu renklerin (diğer şeylerin yanı sıra) kullanımını sağlayan Kromatik Tip, 19. yüzyılın ortalarına kadar uzanıyor. İstenen etkiyi yaratmak için bir diğerinin üzerine basılmış iki veya daha fazla karşılık gelen setten yapılmıştır.

Onların dijital torunları aynı şekilde çalışmak üzere tasarlandı. Bir katman font ailesindeki her stil, bir kompozit oluşturmak için tamamlayıcı stilleri ile birleştirilebilir.

Genellikle bağımsız olarak kullanılabilecek düzenli (veya dolgu) bir stil ve daha sonra üstte eklenebilecek ana hatlar ve süslemeler gibi birkaç tamamlayıcı stil vardır. Ek stiller genellikle bağımsız olarak kullanılamaz, okunaklı olması için en az bir başka tarzda birlikte kullanılmaları gerekir. Birçok katman yazı tipi ailesi de hazır kompozit bir tarzda gelir.

Tarayıcıdaki katman yazı tipleri

Photoshop, Illustrator veya katmanları kullanan başka bir grafik programında, katman katmanları yeterince basittir, ancak bu bir tarayıcıda nasıl çalışır?

Yazı tiplerini div'lerle katmanlama

Bir yaklaşım birkaç tane oluşturmak olurdu

s ve bunları aynı noktaya sabitleyin:

CSS'de Katman Yazı Tiplerini Kullanma

CSS'de Katman Yazı Tiplerini Kullanma

CSS'de Katman Yazı Tiplerini Kullanma

/ * CSS * / # first, #second, #third {display: block; konum: mutlak; üst: 10px; left: 5px;} h1 {font: 5em 'One'; renk: rgba (200,0,0, .85);} # ikinci h1 {font-family: 'Two'; renk: rgba (0,200,0, .85);} # üçüncü h1 {font-aile: 'Üç'; renk: rgba (0,0,200, .85);}

Bu işe yarıyor olsa da, yazı tipinin her katmanı için bir div oluşturmayı ve ardından her bir div için aynı içeriği tekrarlamayı içerir. Ortaya çıkan işaretleme, tamamen içerik ve stil bilgilerini ayırmayan anlamsal bir karmaşadır.

Pseudo elemanları ile yazı katmanları

İşaretlemeye müdahale etmeyen bir başka, nispeten basit bir teknik vardır: :: before ve :: yalancı elemanlar kullanılarak metin html'yi dağıtmadan katmanlanabilir.

İşte inşa edeceğimiz şey: