Съдържанието е това, което прави една уеб страница уникална. То може ще бъде под формата на текст, изображения, видео и други, или комбинация от всичко това, но от решаващо значение е неговата достъпност. Ако посетителя, поради една или друга причина, не може да открие и да се възползва от това страхотно съдържание, то неговата уникалност остава неоценена.
В днешно време има много уеб страници, които са изключително трудни за използване. Въпреки полезното им съдържание те просто не са създадени да бъдат в полза на посетителя. Тези страници обикновено имат прекалено малък размер на текста, цвят, който е в слаб контраст с фона или труден за четене шрифт.
В следващите две части на този урок ще разгледаме CSS свойството font, което ни предоставя по-добър контрол върху текста на нашата страница.

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

font-family

В урока “Работа с параграфи” използвахме свойството font-family, но без допълнително разяснение. Тук е мястото да хвърлим малко повече светлина върху него.
Свойството font-family ни позволява да зададем списък с шрифтове, подредени по преоритет от най-висок към най-нисък, които да бъдат приложени върху текстовото съдържание на даден елемент и/или уеб страницата като цяло.
Всяко име в списъка трябва да бъде разделено със запетая. Ако в името на шрифта има разстояние, то цялото име трябва да се огради в кавички – например “Times New Roman”.
Важно е да се отбележи, че браузъра ще използва първият шрифт, който е на разположение, а не задължително първият в списъка. Затова е добра идея последната стойност в листа да бъде името на една от общите групи шрифтове (виж списъка по-долу).
Това свойство може да приеме няколко стойности:




    

  1. font-family: { family name, ... | inherit };
    2. 









    

  • family name - Това може да бъде име на шрифт, който е част от дадено “шрифтово семейство” или ключова дума съответстваща на определена обща група шрифтове
    • 

  • inherit – Унаследява стойността приложена върху родителския елемент
    • 




Общите групи шрифтове (Generic family name) са:


    

  • serif (например “Times”)
    • 

  • sans-serif (например “Arial”)
    • 

  • cursive (например “Zapf-Chanery”)
    • 

  • fantasy (например “Critter”)
    • 

  • monospace (например “Courier”)
    • 




Виж следващото изображение:



Пример за два font-family списъка.



В първият пример шрифта Verdana (1) е с най-висок преоритет, защото е на първо място в списъка. Браузъра ще потърси измежду инсталираните шрифтове такъв с име Verdana и в случай, че го открие ще го приложи върху текста на елемента или страницата. В случай че не го открие, ще използва втория шрифт в списъка – Arial (2) и ще направи същата проверка. При съвпадение ще използва него, а ако не го открие, ще използва един от sans-serif (3) шрифтовете, който е на разположение.



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



Във вторият пример процеса е абсолютно същия.



Добра идея е да ограничим списъка до максимум 3-4 шрифта като първи поставим този, който най-добре пасва в страницата, а последния винаги да бъде някоя обща група (виж списъка по-горе).



Упражнение



Ще създадем нова уеб страница и ще приложим към нея външен CSS файл. 



Добре би било да добавим и малко текст, върху който да приложим всички тези свойства. За целта ще използвам част от разказа на Елин Пелин - “На браздата”.



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



Стъпка 1



Това е html кода, с който ще работим в този урок:



index.html












    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <link href="style.css" rel="stylesheet" type="text/css" />
    4. 

  4. </head>
    5. 

  5.     <body>
    6. 

  6.         <h1>На браздата</h1>
    7. 

  7.         <h4>Автор: Елин Пелин</h4>
    8. 

  8.         <p>Като заваля дъжд, та цяла неделя! 
    9. 

  9.         Тихо, кротко, ден и нощ....</p>
    10. 

  10.         <p>Ехото се обади живо из гората.</p>
    11. 

  11.     </body>
    12. 

  12. </html>
    13. 










Стъпка 2



В CSS файла ще използвам за селектор елемента body, за да променя шрифта на цялата страницата. След това ще приложа друг шрифт само върху заглавията h1 и h4. Кода изглежда така:



style.css












    

  1. body {
    2. 

  2.     font-family: Verdana, Arial, sans-serif;
    3. 

  3.     width:450px;
    4. 

  4. }
    5. 

  5. h1, h4 {
    6. 

  6.     font-family: "Century Gothic", Verdana, sans-serif;
    7. 

  7. }
    8. 










Стъпка 3



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



Чрез font-family можем да променим шрифта на нашата страница.



Шрифта на текстовите параграфи е Verdana, а този на заглавията h1 и h4 е Century Gothic. В случай, че няма инсталиран Century Gothic като резервен вариант (fallback) ще бъде използван Verdana. В случай, че и той липсва браузъра ще избере някой sans-serif шрифт зададен по подразбиране.



font-style



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



Свойството font-style може да приеме няколко стойности:












    

  1. font-style: { italic | normal | oblique | inherit };
    2. 









    

  • italic - Тази стойност избира шрифт, който е определен като italic в датабазата с шрифтове на посетителя (user-agent). В случай, че такъв шрифт не съществува се избира друг, който е определен като oblique
    • 

  • normal – Стойност по подразбиране. Тази стойност избира шрифт, който е определен като normal в датабазата с шрифтове на посетителя (user-agent)
    • 

  • oblique – Тази стойности избира шрифт, който е определен като oblique в датабазата с шрифтове на посетителя (user-agent)
    • 

  • inherit – Унаследява стойността приложена върху родителския елемент
    • 




Упражнение



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



Отново ще използвам селектора h1, h4, върху които ще приложа свойството font-style. Кода изглежда така:



style.css












    

  1. ...
    2. 

  2. h1, h4 {
    3. 

  3.     font-family: "Century Gothic", Verdana, sans-serif;
    4. 

  4.     font-style:italic;
    5. 

  5. } 
    6. 










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



Чрез font-style можем да променим стила на шрифта в нашата страница.



font-variant



Някои “шрифтови семейства” съдържат различни варианти на един и същ шрифт. Всеки от тях има точно определени качества. Пример за такъв шрифт е small-caps. При този шрифт малките букви изглеждат почти колкото главните, но са с по-малък размер и различни пропорции. Целта на свойството font-variant е да избере точно този шрифт и да го приложи върху текстовото съдържание на елемента.



Може да приеме 3 стойности:












    

  1. font-variant: { normal | small-caps | inherit };
    2. 









    

  • normal – Стойността по подразбиране. Тази стойност уточнява, че шрифта, който ще използваме не е small-caps шрифт.
    • 

  • small-caps – Както казах по-горе, тази стойност търси да избере small-caps шрифта от желаното “шрифтово семейство”.
    • 

  • inherit – Унаследява стойността приложена върху родителския елемент
    • 




Упражнение



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



Отвори CSS файла и добави следния код:



style.css












    

  1. ...
    2. 

  2. h1 {
    3. 

  3.     font-variant:small-caps;
    4. 

  4. }
    5. 










Тази декларация уголемява малките букви в h4 заглавието и ги направи да изглеждат почти колкото главните. Запази промените и виж резултата в браузър.



Чрез font-variant можем да изберем шрифт, който променя размера на малките букви в текста.







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 и в отварящия таг на първия параграф направи следната промяна:






    

  1. Преди
    2. 

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

  3. 

  4. След
    5. 

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










Ако запазиш промените и отвориш страницата в браузър, ще видиш, че няма никаква промяна. Това е така, защото самото добавяне на атрибут 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;
}