Докато изображенията получават голяма част от любовта, когато стигнат до уебсайтове, това е писмената дума, която привлича търсещите машини и съдържа съдържанието на повечето сайтове. Като такъв, типографският дизайн е критично важна част от дизайна на уебсайтове. С важността на текста на сайта идва необходимостта да се гарантира, че изглежда добре и е лесен за четене. Това се прави с CSS (Cascading Style Sheets) стил.
Следвайки модерния стандарт за уеб дизайн, когато искате да диктувате вида на текстовото съдържание на уебсайт, ще го направите с помощта на CSS. Това разделя този Стил на CSS от HTML структурата на страницата. Например, ако искате да настроите шрифта на страница на "Arial", можете да го направите, като добавите следното правило за стил към CSS (забележка - това вероятно ще бъде направено във външен CSS стилов лист, който управлява стиловете за всяка страница на уебсайта):
тяло {font-family: Arial; }Този шрифт е зададен за "тялото", така че каскадата на CSS ще приложи стила към всички останали елементи на страницата. Това е така, защото всеки друг елемент на HTML е дете на елемента "тяло", CSS стилове като семейство от шрифтове или цвят ще се каскада от родителя до детския елемент. Това ще бъде случаят, ако не се добави по-конкретен стил за определени елементи. Единственият проблем с този CSS е, че е зададен само един шрифт. Ако този шрифт не може да бъде намерен по някаква причина, браузърът ще замести друг на негово място. Това е лошо, защото нямате контрол върху това, което шрифт се използва - браузърът ще избере за вас и може да не ви хареса какво реши да използва! Точно там идва пакетът с шрифтове.
Пакетът с шрифтове е списък с шрифтове в декларацията за семейството на шрифтове на CSS. Шрифтовете са изброени по реда на предпочитанията ви, които искате да се появят на сайта в случай на проблем, като не се зарежда шрифт. Пакетът с шрифтове позволява на дизайнера да контролира външния вид на шрифтовете на уеб страницата, дори ако компютърът няма първоначалния шрифт, за който сте се обадили.
Как изглежда стълкът на шрифта? Ето един пример:
тяло {шрифт-семейство: Грузия, "Times New Roman", serif; }Има няколко неща, които да забележите тук.
Първо, ще видите, че разделяме различните имена на шрифтове със запетая. между всеки един Можете да добавите колкото искате шрифтове, стига да са разделени със запетая. Браузърът ще се опита първо да зареди първия шрифт. Ако това не успее, ще се спусне надолу по линията, опитвайки всеки шрифт, докато не намери такъв, който може да използва. В този пример използваме уеб шрифтове, а "Грузия" най-вероятно ще бъде намерен на компютъра на човека, който посещава сайта (забележете - браузърът изглежда на компютъра ви за шрифтовете, посочени на страницата, така че сайтът действително казва който шрифтове да се зареди от вашата система). Ако по някаква причина този шрифт не е намерен, той би се придвижил надолу по стека и опитал да бъде зададен следващия шрифт.
По отношение на този следващ шрифт, забележете как е написан в стека. Името на "Times New Roman" е заградено в двойни кавички. Това е така, защото името на шрифта има няколко думи. Всички имена на шрифтове с повече от една дума (Trebuchet MS, Courier New и т.н.) трябва да имат името в двойни кавички, така че браузърът да знае, че всички тези думи са част от едно име на шрифта.
Накрая, завършваме стека на шрифта със "serif", което е обща класификация на шрифта. В малко вероятния случай, че никой от шрифтовете, които сте посочили в стека, не е налице, браузърът ще намери само шрифт, който поне попада в правилната класификация, която сте избрали. Например, ако използвате шрифтове sans-serif като Arial и Verdana, ако завършите стека на шрифтове с класификацията "sans-serif", ще запазите поне шрифта в това общо семейство, ако има проблем с натоварването. Разбира се, трябва да е много рядко браузърът да не може да намери нито един от изброените в стека шрифтове и вместо това да използва тази генерична класификация, най-добрата практика е да го включите така, че да бъде двойно безопасна.
Функции на шрифтовете и уеб шрифтове
Много сайтове днес използват уеб шрифтове, които са включени в сайта заедно с други ресурси (например изображенията на сайта, Javascript файл и т.н.) или свързани с местоположението на шрифт извън сайта, като Google шрифтове или Typekit. Докато тези шрифтове трябва да се зареждат, тъй като свързвате самите файлове, все пак искате да използвате стека на шрифтове, за да сте сигурни, че имате някакъв контрол над евентуални проблеми. Същото важи и за "уеб-безопасни" шрифтове, които трябва да са на някой компютър (имайте предвид, че шрифтовете, които сме използвали като примери в тази статия, включително Arial, Verdana, Georgia и Times New Roman, на компютъра на човек). Въпреки че вероятността да липсва шрифт е много малка, определянето на купчин от шрифтове ще помогне максимално да се предотврати бронирането на типографския дизайн на даден сайт .
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 8/9/17