Въведение в свойствата на шрифта CSS
CSS Font Properties предоставя очертания за шрифтовите свойства на CSS. Каскадни таблици за стилове, по-популярно известни като CSS, е лесен език за дизайн, предназначен да направи по-просто създадените уеб страници да изглеждат страхотно. CSS се занимава с появата и изживяването на част от уеб страница. Прилагайки CSS, можете да контролирате цвета с текста, стила на шрифтовете, разстоянието между абзаците, как колоните ще бъдат оразмерени, както и представени, използваните фонови изображения или цветове, стиловете на оформление, вариантите на показване няколко устройства, както и, размери на екрана в допълнение към редица различни други ефекти. CSS е лесен за разбиране и разбиране, но въпреки това дава ефективен контрол върху демонстрацията на HTML документа. Най-често CSS обикновено се комбинира с езици за маркиране HTML или просто XHTML.
- CSS се отнася до каскадни таблици за стил.
- CSS идентифицира как HTML елементите трябва да се показват на екрана, хартията и също да се състоят от носители.
- CSS ще спести много работа. Той може да контролира оформлението на множество уеб страници наведнъж.
- Външните стилови таблици ще се съхраняват в CSS файлове.
Обяснете различни свойства на шрифта на CSS
По-долу са различните свойства на шрифта CSS:
Колекция шрифтове: В CSS можете да изберете шрифта, който искате да използвате за текста вътре в даден елемент, като зададете свойството на семейството на шрифта в правило за стил, но преди да навлезем в подробности за семейството на шрифтовете, ще трябва да разберем как да използваме имена на шрифтове, защото когато създаваме уеб страница, не винаги знаем какво ще използва нашият потребител, за да види уеб страницата.
Определете петте категории шрифтове в CSS стандарти
- Първата от тези категории са категориите серифни шрифтове. Пример за конкретен шрифт, който да се побере в тази категория, е Times или Times New Roman, както и Baskerville, Century и Schoolbook
- Това са специфични имена на шрифтове, като Baskerville, Century и Schoolbook; това са имената на шрифтове, които може да видите в падащ списък, когато избирате шрифт в текстовия процесор, защото текстовият процесор знае точно какво е инсталирано на вашата машина. Но за CSS всички тези шрифтове биха попаднали в категорията на серифните шрифтове.
- Има и набор от шрифтове без серифи и популярен шрифт, попадащ в тази категория, е Arial. В случай, че не сте знаели, сериф, така че има малки линии в края на писмо, те правят буквите да изглеждат малко фантазия и украсени. Можете да видите разликата в буквите R, които са по-долу.
- R вляво е Arial, който е sans-serif, буквално без разкрасяванията, докато R вдясно е Times New Roman и съдържа няколко допълнителни малки щриха тук и там. Най-общо хората намират шрифтовете без серифи за по-лесно четене на LCD и LED дисплей.
- Има и категории за курсивни шрифтове, които приличат малко на ръкописни букви и шрифтове за фантазия, които могат да приличат на каквото и да е, но повечето дизайни няма да използват тежко тези шрифтове, защото те могат да бъдат трудно четими, а също и малко непредвидим.
- И накрая, има категория за еднократни шрифтове. Това са шрифтовете, които дават еднакво разстояние на всяка буква и това вероятно е шрифта, който искате да използвате в текстовия си редактор, който използвате за създаване на CSS, а също и шрифта, който бихте искали да използвате на уеб страница за показване на код в уеб страница.
Резултати в уеб браузъра:
изход:
Резултати в уеб браузъра:
изход:
Резултати в уеб браузъра:
изход:
Резултати в уеб браузъра:
изход:
Резултати в уеб браузъра:
изход:
Семейства на шрифтовете
По-долу обяснението показва семействата шрифтове:
- Много CSS дизайни ще зададат свойството на семейството шрифтове на името на конкретен шрифт като Arial. Винаги обаче има шанс конкретният шрифт, който искате като Arial, да не е наличен в системата на даден потребител. И това е една от причините да посочите толкова много шрифтове, колкото бихте искали в списъка, ограничен със запетая, и браузърът ще използва първия, който съвпада.
Съгласно горната снимка на екрана имаме първи избор, втори избор и ако не е наличен нито един от тези шрифтове, ние се връщаме към общия sans-serif, защото дори ако браузърът няма някой от другите шрифтове, той трябва да предостави шрифт по подразбиране за тази категория. Разбира се, това повдига въпроса кои шрифтове са безопасни за използване при уеб дизайн. Най-общо казано, не можете да сбъркате с Arial, Verdana, Times и Courier, но ние също така предоставихме списък с други шрифтове, които обикновено са достъпни на множество платформи.
- Helvetica е често срещан шрифт, който виждате изброени в много таблици със стилове, но Helvetica не е наличен в Windows. Вместо това Windows предоставя Arial.
- Семейството на шрифтовете е едно от онези свойства, които се наследяват. Така че, ако го зададем на нивото на тялото, тогава абзаците и divs и котвите, които са вътре в това тяло, ще вземат по подразбиране това семейство шрифтове, освен ако не го отменим. Така например, това заглавие тук, този h1 маркер, наследява семейството на шрифтовете от тялото, но не е необходимо да бъде по този начин.
изход:
Можем да кажем, че за h1 семейството шрифтове трябва да бъде Times New Roman, Serif и ако обновите уеб страниците, промяната се отрази.
Оразмеряване на шрифта и стилове
По-долу подробна информация за размера и стиловете на шрифта:
- Друга характеристика на шрифтовете, които ще искате да контролирате, е размерът и когато задавате размера, първо трябва да изберете между абсолютни или относителни единици.
- Абсолютните размери обикновено са посочени в пиксели, а пикселите ви дават много прецизен контрол върху размера на шрифта.
- Относителните единици като проценти или ключовите думи по-големи или по-малки или ems, ви позволяват да зададете размер на шрифта въз основа на някаква базова линия, така че 2em ще бъде два пъти по-голям от основната линия и 0. 8em ще бъде 80% от базовата линия. Много хора днес използват ems за относително оразмеряване на шрифтове. Една от причините е, че относителните размери позволяват на потребителя да мащабира текста, използвайки браузъра си, и това е нещо, което може да искат да направят, защото текстът им е трудно да го видят. Относителните размери позволяват това да работи.
Резултати в уеб браузъра:
изход:
- Някои от другите свойства на шрифта, които можете да зададете, са стила на шрифта, за да принудят курсив или теглото на шрифта, за да направи шрифта удебелен. И свойството вариант на шрифта ще въведе шрифт, който използва само главни букви.
Резултати в уеб браузъра:
изход:
- Първото нещо, което искаме да направим, е да деемфазираме този h1 елемент малко. Той трябва да бъде h1 елемент, защото той е основният заглавие на тази страница, но е малко прекалено голям за нашата гледна точка. Така че нека да настроя размера на шрифта на 1, 2ems. Това ще намали това малко, защото обикновено h1 тагът ще бъде далеч над 1, 2ems. Следващият брой, който искаме да разгледаме, е списъкът с кодове тук. Искаме това да е моноспектър шрифт и има няколко различни искания да постигнем това. За код, както е посочено по-долу.
Резултати в уеб браузъра:
изход:
Резултати в уеб браузъра:
изход:
Тук искаме да използваме предварителния маркер, което означава, че това е предварително форматиран текст и моля, не се опитвайте да го манипулирате.
Резултати в уеб браузъра:
изход:
Това са стенограмни свойства на стила на шрифта. Като курсив в шрифт, размер на шрифта 0.9em и сериф на семейството шрифтове;
Резултати в уеб браузъра:
изход:
заключение
Как да зададете шрифтове с помощта на CSS и разликата между конкретен шрифт като Arial и общите категории на уеб шрифтове като serif и sans-serif. Ние също така управляваме оразмеряването на шрифта, плюсовете и минусите на относителните размери спрямо абсолютните размери, накрая, използваме свойствата на шрифта и научаваме да зареждаме шрифтове с фамилията шрифтове.
Препоръчителни статии
Това е ръководство за CSS Font Properties. Тук сме обсъдили различни свойства на шрифта на CSS и пет категории шрифтове в стандартните CSS с резултати и резултати от браузъра. можете също да прегледате и другата ни предложена статия, за да научите повече-
- Какво е CSS?
- Въведение в CSS
- Кариера в CSS
- Предимства на CSS