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

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

• font-family (в първа част на урока)
• font-style (в първа част на урока)
• font-variant (в първа част на урока)
• font-weight
• font-size
• font-съкратено

font-weight

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

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

 

1. font-weight: { 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800
2. | 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 и в отварящия таг на първия параграф направи следната промяна:

1. Преди
2. <p>Като заваля дъжд, та цяла неделя!...</p>
3.  
4. След
5. <p id="paragraph">Като заваля дъжд, та цяла неделя!...</p>

 

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

Стъпка 2

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

 

1. ...
2. #paragraph {
3.     font-weight:bold;
4. }

 

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

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

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

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

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

font-size

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

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

1. font-size: { absolute-size | relative-size | length |
2.     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 и направете следните промени:

 

1. body {
2.     ...
3.     font-size:14px;
4. }
5. ...
6. h4 {
7.     font-size:0.9em;
8. }
9. #paragraph {
10.     font-weight:bold;
11.     font-size:120%;
12. }

 

Стъпка 2

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

Използвахме 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 елемента, кода би изглеждал така:

 

1. body {
2.     font-family:Verdana, Arial, sans-serif;
3.     font-style:italic;
4.     font-variant:small-caps;
5.     font-weight:bold;
6.     font-size:14px;
7. }

 

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

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

 

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

 

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

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

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

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

 

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

 

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

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

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