Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Всичко за CSS свойството font (част 2) 0

Сподели урока

В първа част на този урок разгледахме подробно три font свойства и успяхме чрез няколко примера да добием представа за начина им на работа. Във втора част ще довършим започнатото като обърнем внимание на други три font свойства и правилната им употреба.

Свойството font е разделено на няколко части:

font-weight

Това свойство определя тежестта на шрифта, която ще бъде приложена върху текстовото съдържание на елемента.

Може да приеме голямо разнообразие от стойности, но поддръжката им зависи от възможностите на избрания шрифт:

font-weight: { 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 
| 900 | bold | bolder | lighter | normal | inherit } ;
  • 100 – 900 – Тези стойности формират скала като всяка следваща е по-тежка (по-тъмна) от предишната. 100 е най-светлия вариант на шрифта докато 900 се счита за най-тъмния. 400 се приема за нормална.
  • bold – Тази стойност отговаря на 700 от предишната точка.
  • bolder – Избира шрифт, който е по-тъмен от шрифта унаследен от родителския елемент.
  • lighter – Избира шрифт, който е по-светъл от шрифта унаследен от родителския елемент.
  • normalСтойност по подразбиране. Обикновено отговаря на 400 от скалата по-горе.
  • inherit - Унаследява стойността приложена върху родителския елемент;

Упражнение

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

За да видим нагледно работата на font-weight, ще променя малко html документа като използвам id атрибута. В урока “Същност и приложение на id атрибута” съм описал подробно неговите функции и предимства. Разгледай го, ако не си напълно сигурен/-на за какво точно служи този атрибут. Най-важното, което трябва да знаеш обаче е, че атрибута id ни позволява да дадем уникално име на определен елемент от страницата, което име може да бъде използвано по-късно като селектор в CSS.

Стъпка 1

Отвори файла index.html и в отварящия таг на първия параграф направи следната промяна:

Преди
<p>Като заваля дъжд, та цяла неделя!...</p>

След
<p id="paragraph">Като заваля дъжд, та цяла неделя!...</p>

Ако запазиш промените и отвориш страницата в браузър, ще видиш, че няма никаква промяна. Това е така, защото самото добавяне на атрибут id не влияе по никакъв начин на документа. Промяната настъпва едва когато изрично променим стила чрез CSS.

Стъпка 2

След като направихме нужните промени в html документа, нека се прехвърлим към прилагането на CSS. Отвори style.css и добави следния код:

...
#paragraph {
	font-weight:bold;
}

Както виждаш, можем да използваме стойността на id атрибута като селектор като преди това поставим знака #. Няма да навлизам в подробности, защото ще създам специален урок посветен изцяло на атрибута id. Важното тук е принципа на работа на свойството font-weight.

Запази промените и виж резултата в браузър.

Резултат от използването на свойството font-weight

Може би забелязваш, че работата на font-weight е идентична с работата на елемента strong (разгледан в Стъпка 7 към урока Работа с параграфи) и това е почти вярно.

Font-weight избира точно определен шрифт, който очакваме да бъде част от шрифтовото семейство и го прилага върху текста. Strong от своя страна удебелява текста и освен това добавя симентично значение към документа, което има за цел да направи уеб страницата по-достъпна и разбираема за браузъра, търсачките, устройствата за четене и т.н.

За да видиш работата на останалите стойности е добра идея да експериментираш. Не всяка от тях ще има видимо отражение върху резултата като това до голяма степен зависи от възможностите на шрифта и неговото семейство.

font-size

Мисля, че името на това свойство ясно ни подсказва неговото предназначение. То се използва, винаги когато искаме да променим размера на текста на определен елемент или уеб страницата като цяло.

Може да приеме няколко стойности:

font-size: { absolute-size | relative-size | length | 
	percentage | inherit } ;
  • absolute-size (абсолютен размер) - Тази стойност се определя чрез използването на една от следните ключови думи:
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
    Няма точнен размер, който да отговаря на всяка от тези ключови думи, но всяка от тях трябва да бъде по-голяма или равна на стойността, която е преди нея.
  • relative-size (относителен размер) - Тази стойност се определя чрез използването на една от следните ключови думи:
    • smaller
    • larger
    Smaller прави размера по-малък, а larger – по-голям от унаследената от родителския елемент стойност.
  • length (дължина) – Можеш да използваш различни стойности (mm, cm, em, px и др.). В случаите, когато решиш да използваш em или ex, имай в предвид, че те се изчисляват на базата на размера унаследен от родителския елемент. Това важи и за използването на проценти. Негативните стойности не са разрешени.
  • percentage (процент) – В сила са същите правила от предишната точка. Негативните стойности не са разрешени.
  • inherit - Унаследява стойността приложена върху родителския елемент;

Най-често използваните мерки за определяне на размера са px, em и процент (%).

Упражнение

В урока “Работа с параграфи” разгледахме това свойство, но без допълнително разяснение. Сега обаче ще използваме няколко различни стойности, за да видим нагледно начина му на работата.

В следващото упражнение ще променим размера на текста в цялата страница. Тъй като първият параграф служи за въведение, ще направим размера му малко по-голям в сравнение с останалия текст. Също така ще променим размера на заглавието h4.

Стъпка 1

Няма да създавам нова страница, а ще подобря кода, който имаме в наличност до сега.

Отвори style.css и направи следните промени:

body {
	...
	font-size:14px;
}
...
h4 {
	font-size:0.9em; 
}
#paragraph {
	font-weight:bold;
	font-size:120%;
}
Стъпка 2

Запази и виж резултата в браузър.

Резултат от използването на свойството font-size

Използвах 3 начина за определяне на размера:

  • px – Стойностите в px се използват, когато искаме размера да бъде винаги един и същ без значение от устройство, на което ще бъде видяна нашата уеб страницата. Чрез прилагането на font-size:14px върху body изрично установих, че искам размера на текста в цялата страница да бъде с големина 14px.
  • em – Стойностите в em се използват, когато искаме размера да бъде променлив и да се адаптира към средата, в която разглеждаме уеб страницата. Крайният размер се изчислява като се умножи приложената стойноста по тази, която се унаследява от родителския елемент.

    В случая родителския елемент е body и неговия font-size е 14px. Тази стойност се унаследява от всички елементи в body. В h4 обаче имаме нова промяна на размера, която е 1.2em. Стойността от body ще се умножи по стойността на h4 – 14 х 1.2 = 16.8 т.е. реалният размер на h4 е 16.8px. По-късно, ако решим, че текста в страницата е прекалено голям и го променим, размера на h4 ще се промени пропорционално.

  • проценти (%) – Начина на работа е идентичен с този на em стойностите, защото ни дава гъвкав размер. Крайният размер обаче се изчислява по малко по-различен начин. Тук стойността преди знака за процент (%) се умножава по размера унаследен от родителския елемент и получената стойност се дели на 100.

    В случая родителския елемент е body и неговия font-size е 14px. Върху елемента с id=“paragraph” прилагаме font-size:120%, което ни дава (14 * 120) / 100 = 16.8 т.е. реалният размер на този параграф също е 16.8px.

font (съкратено)

Това свойство е така нареченото “shorthand” или свойство, което обединява всички свойства от групата (“фамилията”) font.

Друго подобен пример е съкратеното background свойство, което разгледахме в урока “Усвояване на CSS background, част 2”.

До тук усвоихме свойствата font-family, font-style, font-variant, font-weight и font-size, като всяко от тях поставяхме на нов ред със своя собствена декларация.

Общото свойство font ни позволява да комбинираме всички тези свойства в едно.

Упражнение

Ако решим да използваме всяко font свойство поотделно за стилизиране на шрифта в body елемента, кода би изглеждал така:

body {
	font-family:Verdana, Arial, sans-serif;
	font-style:italic;
	font-variant:small-caps;
	font-weight:bold;
	font-size:14px;
}

Проблема тук е, че кода заема твърде много място (цели 5 реда), думата font се повтаря няколко пъти, лесно може да се допусне грешка и отнема значително повече време за писане.

Посредством съкратеното свойство font, можем да сведем целия този код до един единствен ред, който е по-лесен за поддръжка.

body {
	font:italic small-caps bold 14px Verdana, Arial, sans-serif;
}

Реда на задаване на свойствата е следния:

Ред на задаване на font свойствата в общата декларация

За да бъде интерпретирана правилно, декларацията трябва да съдържа поне font-size и font-family. Пропускането им довежда до грешка и декларацията може да бъде игнорирана изцяло от браузъра. Свойствата font-style, font-variant и font-weight не са задължителни и могат да бъдат въведени в призволен ред преди свойството font-size.

Освен всички font свойства, в декларацията можем да включим и свойството line-height (разгледано в урока Стилизиране на текст чрез CSS), което се използва за определяне на височината на реда. То може да бъде определено като поставим дясно наклонена черта след font-size и въведем неговата стойност. Например:

Добавяне на line-height към свойството font

Не е проблем, ако пропуснем едно или повече свойства. В такъв случай, пропуснатите свойства приемат стойността си по подразбиране. Например:

body {
	font: bold 14px/21px Verdana, Arial, sans-serif;
}

Тук съм пропуснал стойностите на font-style и font-variant, които ще приемат стойност normal.

Това е краят на урока за свойството font. Постарах се да опиша всичко подробно и достатъчно разбираемо. Надявам се тези два урока да ти послужат за по-доброто усвояване на това свойство.

Ако мислиш, че урока ще бъде от полза на някой от твоите приятели, ще ти бъда благодарен, ако го споделиш с тях. Също така можеш да споделиш мнението си или да зададеш всякакви въпроси в коментарите след урока.

Използвани снимки

Снимка към урока: PixelsAway

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

Няма коментари. Коментирай пръв!

Твоят коментар

* - задължителни полета