Общите семейства на шрифтове в CSS

Типографският дизайн играе важна роля в дизайна на уебсайтове. Добре изложеното и форматирано текстово съдържание помага на сайта да бъде по-успешен, като създава опит за четене, който е едновременно приятен и лесен за консумация. Част от усилията ви в работата с типа ще бъде да изберете правилните шрифтове за вашия дизайн и след това да използвате CSS, за да добавите тези шрифтове и стилове на шрифта към дисплея на страницата. Това се прави, като се използва това, което се нарича a стек шрифтове.

Стекове на шрифтове

Когато ти посочете шрифт за да използвате на уеб страница, най-добрата практика е да включите и резервни опции, в случай че не можете да намерите избора на шрифт. Тези резервни опции са представени в стек шрифтове. Ако браузърът не може да намери първия шрифт, изброен в стека, той преминава към следващия. Той продължава този процес, докато намери шрифт, който може да използва, или не му свършат възможностите за избор (в този случай той просто избира всеки системен шрифт, който иска). Ето пример за това как ще изглежда стекът шрифтове в CSS, когато се прилага към елемента "body":

instagram viewer

тяло {
семейство шрифтове: Джорджия, "Times New Roman", засечка;
}

Първо се появява шрифтът Georgia, така че по подразбиране това ще използва страницата, но ако този шрифт не е наличен по някаква причина, страницата се връща към Times New Roman.

Приложете Times New Roman в двойни кавички, защото е име с много думи. Имената на шрифтове с една дума, като Georgia или Arial, не изискват кавичките, но името на шрифт с няколко думи с вградени интервали се нуждае от тях, така че браузърът знае, че всички тези думи съдържат името на шрифта.

Стекът шрифтове завършва с думата засечка. Това е родово име на семейство шрифтове. В малко вероятния случай човек да няма Грузия или Times New Roman на техния компютър сайтът ще използва какъвто и да е шрифт със засечки. Браузърът ще избере шрифт за вас, но поне вие ​​предлагате насоки, за да знае какъв шрифт би работил най-добре в дизайна.

Общи семейства шрифтове

Общото име на шрифта, налично в CSS, е:

  • скоропис
  • фантазия
  • еднопространство
  • засечка
  • без засечка

Въпреки че има много други класификации на шрифтовете в уеб дизайна и типографията, включително плочи-засечки, blackletter, display, grunge и други, тези пет родови имена на шрифтове са тези, които бихте използвали в стека на шрифтове в CSS.

  • Курсивни шрифтове - често се отличават с тънки, украсени писмени форми, които са предназначени да възпроизвеждат изискан ръкописен текст. Тези шрифтове, поради тънките си, цветни букви, не са подходящи за голям блок съдържание като основно копие. Курсивните шрифтове обикновено се използват за заглавия и по-кратки текстови нужди, които могат да се показват в по-големи размери на шрифта.
  • Фантастични шрифтове - са донякъде лудите шрифтове, които всъщност не попадат в никоя друга категория. Шрифтове, които възпроизвеждат добре познати логотипи, като буквите от Хари Потър или Завръщане в бъдещето филми, попадат в тази категория. Тези шрифтове не са подходящи за телесно съдържание, тъй като често са толкова стилизирани, че четенето на по-дълги откъси от текст, написан в тези шрифтове, е твърде трудно за правене.
  • Монопространствени шрифтове - разполагат с еднакво големи и раздалечени буквени форми, каквито бихте открили на стара пишеща машина. За разлика от други шрифтове, които имат променлива ширина на буквите в зависимост от техния размер (например главна буква W заема много повече място от малки букви i), монопространствените шрифтове използват фиксирана ширина за всички символи. Тези шрифтове често се използват за четене на код, защото изглеждат значително по-различно от другия текст на тази страница.
  • Шрифтове със серифи - използвайте малко допълнителни лигатури върху бланките. Тези допълнителни парчета се извикват серифи. Често използвани серифни шрифтове са Georgia и Times New Roman. Серифните шрифтове работят чудесно за голям текст като заглавие, както и за дълги пасажи от текст и основно копие.
  • Без засечкишрифтове - нямат лигатури. Името означава без серифи. Популярните шрифтове в тази категория включват Arial или Helvetica. Подобно на серифите, безсерифните шрифтове се представят еднакво добре в заглавия, както и в съдържанието на тялото, въпреки че някои експертите предпочитат големите блокове текст да избягват шрифтовете без засечки, защото са по-трудни за четене в малка точка размери.