Типографският дизайн е изключително важна част от успешния дизайн на уебсайта. Създаването на сайтове с текст, който е лесен за четене и който изглежда страхотно, е целта на всеки професионалист по уеб дизайн. За да постигнете това, ще трябва да можете да зададете конкретните шрифтове, които искате да използвате на вашите уеб страници. За да посочите семейството на шрифта или шрифта във вашите уеб документи, ще използвате свойството стил на семейство шрифтове във вашия CSS.
Най-неусложненият стил на семейство шрифтове, който бихте могли да използвате, ще включва само едно семейство шрифтове:
п {
семейство шрифтове: Arial;
}
Ако сте приложили този стил към страница, всички абзаци ще бъдат показани в семейството шрифтове "Arial". Това е чудесно и тъй като „Arial“ е това, което е известно като „безопасен в мрежата шрифт“, което означава най-много (ако не и всички) компютрите ще го инсталират, можете да бъдете спокойни, знаейки, че страницата ви ще се покаже в предвиденото шрифт.
И така, какво се случва, ако избраният от вас шрифт не може да бъде намерен? Например, ако не използвате „безопасен в мрежата шрифт“ на страница, какво прави потребителският агент, ако няма този шрифт? Правят замяна.
Това може да доведе до някои забавно изглеждащи страници. Веднъж отидох на страница, където компютърът ми го показа изцяло в "Wingdings" (набор от икони), защото компютърът ми нямаше шрифтът, който разработчикът беше посочил, и браузърът ми направи безпроблемен избор какъв шрифт ще използва като замяна. Страницата беше напълно нечетлива за мен! Тук влиза в игра стека на шрифтове.
Отделете няколко семейства шрифтове със запетая в стека на шрифтове
„Стек на шрифтове“ е списък с шрифтове, които искате да използва страницата ви. Можете да поставите избора си на шрифт в реда на вашите предпочитания и да отделите всеки със запетая. Ако браузърът няма първото семейство шрифтове в списъка, той ще опита втория и след това третия и така нататък, докато намери такъв, който има в системата.
семейство шрифтове: Pussycat, Алжир, Бродуей;
В горния пример браузърът първо ще потърси шрифта "Pussycat", след това "алжирски", след това "Бродуей", ако не е намерен нито един от другите шрифтове. Това ви дава повече шанс да бъде използван поне един от избраните от вас шрифтове. Той не е перфектен, поради което имаме още много, което можем да добавим към нашия шрифт (прочетете!).
Използвайте родови шрифтове Последно
Така че можете да създадете стек шрифтове със списък с шрифтове и все още да няма нито един от които браузърът може да намери. Не искате страницата ви да се показва нечетлива, ако браузърът направи лош избор на заместване. За щастие CSS също има решение за това и се нарича родови шрифтове.
Винаги трябва да завършвате списъка си с шрифтове (дори ако това е списък от едно семейство или само безопасни в мрежата шрифтове) с общ шрифт. Има пет, които можете да използвате:
- Извиване
- Фантазия
- Монопространство
- Без засечки
- Сериф
Двата примера по-горе могат да бъдат променени на:
семейство шрифтове: Arial, sans-serif;
или.
семейство шрифтове: Pussycat, Алжир, Бродуей, фентъзи;
Някои фамилни имена на шрифтове са две или повече думи
Ако семейството на шрифтовете, което искате да използвате, е повече от една дума, тогава трябва да го обградите с двойни кавички. Въпреки че някои браузъри могат да четат семейства шрифтове без кавички, може да има проблеми, ако празното пространство е уплътнено или игнорирано.
семейство шрифтове: "Times New Roman", засечка;
В този пример можете да видите, че името на шрифта "Times New Roman", което е многословно, е в кавички. Това казва на браузъра, че и трите тези думи са част от това име на шрифт, за разлика от три различни шрифта, всички с имена с една дума.