Додека сликите добиваат голем дел од љубовта кога доаѓаат на веб-страниците, тоа е пишаниот збор кој се повикува на пребарувачите и ја содржи содржината на повеќето сајтови. Како таков, типографскиот дизајн е критички важен дел од веб-дизајнот. Со важноста на текстот на страницата доаѓа и потребата да се осигура дека изгледа добро и лесно се чита. Ова се прави со стил на CSS (Cascading Style Sheets).
Следејќи го модерен веб дизајн, кога сакате да го диктирате изгледот на текстуалната содржина на веб страната, ќе го направите тоа користејќи CSS. Ова го одделува стилот на CSS од структурата на HTML на страница. Како пример, ако сакавте да го поставите фонтот на страната во "Arial", можете да го сторите тоа со додавање на следново правило за стил на вашиот CSS (забелешка - ова најверојатно ќе се направи во надворешен CSS стилски лист што ги овластува стиловите за секоја страница на веб-страницата):
тело {font-family: Arial; }Овој фонт е поставен за "тело", па CSS каскадата ќе го примени стилот на сите други елементи на страната. Ова е затоа што секој друг HTML елемент е дете на елементот "тело", стил на CSS како семејство на фонт или боја ќе каскади од родителот до дете елементот. Ова ќе биде случај, освен ако не е додаден поспецифичен стил за одредени елементи. Единствениот проблем со овој CSS е дека е назначен само еден фонт. Ако тој фонт не може да се пронајде поради некоја причина, прелистувачот ќе замени друг на свое место. Ова е лошо затоа што немате контрола врз тоа што се користи фонтот - прелистувачот ќе избере за вас, и можеби не ви се допаѓа она што го одлучи да го користите! Тоа е местото каде што доаѓа магацинот на фонт.
Фонт-стек е листа на фонтови во декларацијата на фонт-семејство на CSS. Фондовите се наведени по редослед на преференци што би сакале да се појават на страницата во случај на проблем како фонт да не се вчитува. Фондот дозволува дизајнерот да го контролира изгледот на фонтовите на веб-страницата, дури и ако компјутерот не го има почетниот фонт што го повикувате.
Па, како изгледа изгледот на фонтот? Еве еден пример:
тело {font-family: Грузија, "Times New Roman", сериф; }Има неколку работи што треба да ги забележите овде.
Прво, ќе видите дека ги одделивме различните имиња на фонтови со запирка. помеѓу секој Можете да додадете што повеќе фонтови што сакате, се додека тие се одделени со запирка. Прелистувачот ќе се обиде да го вчита првиот наведен фонт. Ако тоа не успее, тоа ќе ја сруши линијата која се обидува секој фонт додека не најде оној што може да го користи. Во овој пример користиме веб-безбедни фонтови, а "Грузија" најверојатно ќе се најде на компјутерот на лицето кое ја посетува страницата (забелешка - прелистувачот го гледа вашиот компјутер за фонтовите наведени на страницата, така што сајтот всушност кажува компјутерот што ги вметнува фонтови за да се вчита од вашиот систем). Ако поради некоја причина тој фонт не е пронајден, тој ќе се помести надолу од магацинот и ќе го пробате следниот наведен фонт.
Во однос на тој следен фонт, забележи како е напишано во магацинот. Името на "Тајмс Њу Роман" е спакувано со двојни цитати. Ова е затоа што името на фонтот има повеќе зборови. Сите имиња на фонтови со повеќе од еден збор (Trebuchet MS, Courier New, итн.) Мора да го имаат името во двојни цитати, така што прелистувачот знае дека сите тие зборови се дел од едно име на фонт.
Конечно, го завршуваме фонтот со "serif", што е генеричка класификација на фонтот. Во малку веројатно дека ниту еден од фонтовите што сте ги именувале во вашиот стек не се достапни, прелистувачот само ќе најде фонт кој барем паѓа во соодветната класификација која сте ја одбрале. На пример, ако користите sans-serif фонтови како Arial и Verdana, тогаш кога ќе завршите со стек на фонт со класификацијата "sans-serif" барем ќе го задржите фонтот во целокупното семејство ако има проблем со оптоварување. Очигледно, треба да биде многу ретка што прелистувачот не може да најде ниеден од фонтовите наведени во магацинот и наместо тоа да ја користи оваа генеричка класификација, најдобро е да се вклучи во секој случај само за да биде двојно безбеден.
Фонтови и веб-фонтови
Многу веб-сајтови денес користат веб-фонтови кои се вклучени на страницата заедно со други ресурси (како што се слики на страницата, датотека на Javascript, итн.) Или се поврзуваат со локална локација на фонтот како Google Fonts или Typekit. Додека овие фонтови треба да се вчитаат откако ќе се поврзувате со самите датотеки, сепак сакате да користите фонт магацинот за да се осигурате дека имате некоја контрола врз било какви проблеми што можат да се појават. Истото важи и за "веб-безбедни" фонтови кои треба да бидат на нечиј компјутер (имајте во предвид дека фонтовите што ги користевме како примери во оваа статија, вклучувајќи ги Arial, Verdana, Georgia и Times New Roman, се сите безбедносни фонтови што треба да бидат на компјутерот на лицето). И покрај тоа што веројатноста за исчезнување на фонтот е многу мала, одредувањето на фонт стек ќе им помогне bulletproof типографски дизајн сајт е можно колку што е можно.
Авторски напис од Џенифер Крајнин. Ревидирани од Џереми Жирар на 8/9/17