Skip to main content

Какви са генеричните семейства шрифтове в CSS?

Reversal in doctor-patient attitude | Slaveyko Djambazov | TEDxPlovdiv (Юни 2026)

Reversal in doctor-patient attitude | Slaveyko Djambazov | TEDxPlovdiv (Юни 2026)
Anonim

При проектирането на уебсайт един от ключовите елементи на страницата, с която ще работите, е текстовото съдържание. По този начин, когато изграждате уеб страница и я стил с CSS, голяма част от това усилие ще бъде съсредоточена около типографията на сайта.

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

Шрифт Stacks

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

тяло { шрифт-семейство: Грузия, "Times New Roman", serif;}

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

Ако погледнете края на стека на шрифта, трябва да забележите, че завършваме с думата "serif". Това е фамилно име на шрифта. В невероятното събитие, че човек няма Джорджия или Times New Roman на своя компютър, сайтът ще използва каквото и да е шрифт, който може да намери. Това е за предпочитане да се позволи на сайта да се съпротивлява на каквото и да е шрифтове, защото може да кажете поне какъв шрифт да използвате, така че цялостният облик и тон на дизайна на сайта да бъде възможно най-непокътнат. Да, браузърът ще избере шрифт за вас, но поне вие ​​предоставяте напътствия, така че той знае какъв шрифт ще работи най-добре в дизайна.

Генерични семейства от шрифтове

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

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

Макар че има много други класификации на шрифтове в уеб дизайна и типографията, включително slab-serif, blackletter, display, grunge и др., Тези 5 имена на генерични шрифтове, изброени по-горе, са тези, които бихте използвали в куп шрифтове в CSS. Какви са разликите в тези класификации на шрифтове? Нека да погледнем!

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

фантазия шрифтовете са донякъде луди шрифтове, които всъщност не попадат в друга категория. Шрифтове, които копират добре известни логотипи, като буквите от филмите "Хари Потър" или "Назад към бъдещето", попадат в тази категория. Още веднъж тези шрифтове не са подходящи за съдържание на тялото, тъй като те често са толкова стилизирани, че четенето на по-дълги пасажи от текст, написан в тези шрифтове, е много трудно да се направи.

Monospace шрифтовете са тези, при които всички формати на писмо са еднакво големи и раздалечени, както бихте намерили на стара пишеща машина. За разлика от други шрифтове, които имат променливи ширини за букви в зависимост от техния размер (например, капитал "W" ще заема много повече място от малка буква "i"), моноспасите шрифтове са с фиксирана ширина за всички знаци. Тези шрифтове често се използват, когато кодът се показва на страница, защото изглежда различно различен от другия текст на тази страница.

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

Безсерифно е крайната класификация, която ще разгледаме. Това са шрифтове, които нямат споменатите по-горе лигатури. Името означава "без серфи". Популярните шрифтове в тази категория ще бъдат Arial или Helvetica. Подобно на серифите, sans-serif шрифтовете могат да се използват еднакво добре както в заглавията, така и в съдържанието на тялото.