Medan bilderna får mycket av kärleken när det gäller webbplatser, är det det skrivna ordet som appellerar till sökmotorer och genomför innehållet på de flesta webbplatser. Som sådan är typografisk design en kritiskt viktig del av webbdesign. Med vikten av en webbplats text kommer behovet att se till att det ser bra ut och är lätt att läsa. Detta görs med CSS (Cascading Style Sheets) styling.
Efter modern webbdesign standard, när du vill diktera utseendet på webbplatsens textinnehåll, gör du det med hjälp av CSS. Detta skiljer den CSS-stilen från HTML-strukturen på en sida. Om du till exempel vill ställa in teckensnittet på en sida till "Arial", kan du göra det genom att lägga till följande stilregel till din CSS (det skulle troligtvis ske i ett externt CSS-stilark som styr stilar för alla sida på hemsidan):
kropp {
font-family: Arial;
}
Denna typsnitt är inställd för "kropp", så CSS-kaskaden kommer att tillämpa stilen på alla andra delar av sidan. Detta beror på att alla andra HTML-element är ett barn av elementet "kropp", CSS-stilar som teckensfamilj eller färg kommer att kaskad från föräldern till barnelementet. Detta kommer att vara fallet om inte en mer specifik stil läggs till för vissa element. Det enda problemet med den här CSS är att endast en enda typsnitt anges. Om det inte finns någon typ av teckensnitt, ersätter webbläsaren en annan på plats. Det här är dåligt eftersom du inte har någon kontroll över vilken typsnitt som används. webbläsaren väljer för dig, och du kanske inte gillar vad den bestämde sig för att använda! Det är där en fontstack kommer in. En teckensnittsstapel är en lista över teckensnitt i CSS-teckensnittsdeklarationen. Teckensnitt är listade i önskad ordning som du vill att de ska visas på webbplatsen om ett problem uppstår som ett teckensnitt som inte laddas. En teckensnittsstack tillåter en designer att styra utseendet på teckensnitt på webbsidan, även om datorn inte har det ursprungliga tecknet som du krävde. Så hur ser en fontstack ut? Här är ett exempel: kropp {
font-family: Georgia, "Times New Roman", serif;
}
Det finns några saker att märka här. Först kommer du att se att vi skiljer de olika teckensnittsnamnen med ett kommatecken mellan var och en. Du kan lägga till så många teckensnitt som du vill, så länge de skiljs åt av ett komma. Webbläsaren försöker ladda det första teckensnittet som anges först. Om det misslyckas kommer det att springa ner linjen som försöker varje typsnitt tills den hittar en som den kan använda. I det här exemplet använder vi webbsäkra teckensnitt, och "Georgia" kommer sannolikt att finnas på personens dator som besöker webbplatsen (webbläsaren ser på din dator för de teckensnitt som anges på sidan, så webbplatsen säger faktiskt dator som fonterar att ladda från ditt system). Om det inte finns någon typ av teckensnitt, flyttas den ner i stapeln och försöker nästa typsnitt anges. När det gäller nästa teckensnitt, märka hur det skrivs i stapeln. Namnet på "Times New Roman" är inneslutet i dubbla citat. Detta beror på att teckensnittsnamnet har flera ord. Alla teckensnittsnamn med mer än ett ord (Trebuchet MS, Courier New, etc.) måste ha namnet i dubbla citat, så att webbläsaren vet att alla dessa ord ingår i ett teckensnittsnamn. Slutligen slutar vi typsnittstabellen med "serif", vilket är en generisk typsnittsklassificering. I det osannolika fallet att inga av de teckensnitt du har namngett i din stack är tillgängliga kommer webbläsaren istället bara att hitta ett teckensnitt som åtminstone faller i rätt klassificering som du valt. Om du till exempel använder sans-serif-teckensnitt som Arial och Verdana, kommer slutligen en fontstack med klassificeringen av "sans-serif" att hålla tecknet i den övergripande familjen om det finns ett lastproblem. Visserligen borde det vara väldigt sällsynt att en webbläsare inte kan hitta några av de teckensnitt som anges i stapeln och i stället måste använda den här generiska klassificeringen, men det är en bra metod att bara inkludera den för att vara dubbel säker. Många webbplatser använder idag webbfonter som antingen ingår på webbplatsen tillsammans med andra resurser (som webbplatsens bilder, Javascript-fil, etc.) eller kopplade till på en plats utanför platsen som Google Fonts eller Typekit. Medan dessa teckensnitt ska laddas eftersom du länkar till filerna själva vill du ändå använda en typsnittstapel för att se till att du har viss kontroll över eventuella problem som kan uppstå. Samma sak gäller för "webbsäkra" teckensnitt som borde vara på någons dator (notera att de teckensnitt vi har använt som exempel i den här artikeln, inklusive Arial, Verdana, Georgia och Times New Roman, är alla webbsäkra teckensnitt som borde vara på en persons dator). Även om sannolikheten för att en teckensnitt saknas är mycket låg, kan det vara så mycket som möjligt att ange en typsnittstap för att bulletskydda en webbplats typografisk design. Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard. Teckensnittstackar och webbfonter
