Всичко за CSS свойството font (част 1)
Съдържанието е това, което прави една уеб страница уникална. То може ще бъде под формата на текст, изображения, видео и други, или комбинация от всичко това, но от решаващо значение е неговата достъпност. Ако посетителя, поради една или друга причина, не може да открие и да се възползва от това страхотно съдържание, то неговата уникалност остава неоценена.
В днешно време има много уеб страници, които са изключително трудни за използване. Въпреки полезното им съдържание те просто не са създадени да бъдат в полза на посетителя. Тези страници обикновено имат прекалено малък размер на текста, цвят, който е в слаб контраст с фона или труден за четене шрифт.
В следващите две части на този урок ще разгледаме CSS свойството font, което ни предоставя по-добър контрол върху текста на нашата страница.
Свойството font е разделено на няколко части:
- font-family
- font-style
- font-variant
- font-weight (във втора част на урока)
- font-size (във втора част на урока)
- font (съкратено) (във втора част на урока)
font-family
В урока “Работа с параграфи” използвахме свойството font-family, но без допълнително разяснение. Тук е мястото да хвърлим малко повече светлина върху него.
Свойството font-family ни позволява да зададем списък с шрифтове, подредени по преоритет от най-висок към най-нисък, които да бъдат приложени върху текстовото съдържание на даден елемент и/или уеб страницата като цяло.
Всяко име в списъка трябва да бъде разделено със запетая. Ако в името на шрифта има разстояние, то цялото име трябва да се огради в кавички – например “Times New Roman”.
Важно е да се отбележи, че браузъра ще използва първият шрифт, който е на разположение, а не задължително първият в списъка. Затова е добра идея последната стойност в листа да бъде името на една от общите групи шрифтове (виж списъка по-долу).
Това свойство може да приеме няколко стойности:
- font-family: { family name, ... | inherit };
- family name - Това може да бъде име на шрифт, който е част от дадено “шрифтово семейство” или ключова дума съответстваща на определена обща група шрифтове
- inherit – Унаследява стойността приложена върху родителския елемент
Общите групи шрифтове (Generic family name) са:
- serif (например “Times”)
- sans-serif (например “Arial”)
- cursive (например “Zapf-Chanery”)
- fantasy (например “Critter”)
- monospace (например “Courier”)
Виж следващото изображение:
В първият пример шрифта Verdana (1) е с най-висок преоритет, защото е на първо място в списъка. Браузъра ще потърси измежду инсталираните шрифтове такъв с име Verdana и в случай, че го открие ще го приложи върху текста на елемента или страницата. В случай че не го открие, ще използва втория шрифт в списъка – Arial (2) и ще направи същата проверка. При съвпадение ще използва него, а ако не го открие, ще използва един от sans-serif (3) шрифтовете, който е на разположение.
Вторият шрифт в списъка се нарича fallback т.е. шрифт, който ще бъде използван, само когато първият по една или друга причина не е на разположение. Третият шрифт в списъка е fallback на втория и т.н.
Във вторият пример процеса е абсолютно същия.
Добра идея е да ограничим списъка до максимум 3-4 шрифта като първи поставим този, който най-добре пасва в страницата, а последния винаги да бъде някоя обща група (виж списъка по-горе).
Упражнение
Ще създадем нова уеб страница и ще приложим към нея външен CSS файл. Ако имаш затруднения, разгледай урока “Прилагане на CSS чрез външен файл”.
Добре би било да добавим и малко текст, върху който да приложим всички тези свойства. За целта ще използвам част от разказа на Елин Пелин - “На браздата”.
За да не удължавам излишно страницата, ще въведа само първите няколко изречения от началото на разказа. В работните файлове към урока обаче, текста ще бъде в пълният си вид.
Стъпка 1
Това е html кода, с който ще работим в този урок:
index.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;
- charset=utf-8" />
- <title>Усвояване на font</title>
- <link href="style.css" rel="stylesheet"
- type="text/css" />
- </head>
- <body>
- <h1>На браздата</h1>
- <h4>Автор: Елин Пелин</h4>
- <p>Като заваля дъжд, та цяла неделя!
- Тихо, кротко, ден и нощ....</p>
- <p>Ехото се обади живо из гората.</p>
- </body>
- </html>
Стъпка 2
В CSS файла ще използвам за селектор елемента body, за да променя шрифта на цялата страницата. След това ще приложа друг шрифт само върху заглавията h1 и h4. Кода изглежда така:
style.css
- body {
- font-family: Verdana, Arial, sans-serif;
- width:450px;
- }
- h1, h4 {
- font-family: "Century Gothic", Verdana, sans-serif;
- }
Стъпка 3
Запази промените и виж резултата в браузър.
Шрифта на текстовите параграфи е Verdana, а този на заглавията h1 и h4 е Century Gothic. В случай, че няма инсталиран Century Gothic като резервен вариант (fallback) ще бъде използван Verdana. В случай, че и той липсва браузъра ще избере някой sans-serif шрифт зададен по подразбиране.
font-style
Това свойство ни позволява да използваме шрифт с определен стил, който е част от определено “шрифтово семейство”. Този стил може да се приложи върху текстовото съръжание на даден елемент и/или уеб страницата като цяло.
Свойството font-style може да приеме няколко стойности:
- font-style: { italic | normal | oblique | inherit };
- italic - Тази стойност избира шрифт, който е определен като italic в датабазата с шрифтове на посетителя (user-agent). В случай, че такъв шрифт не съществува се избира друг, който е определен като oblique
- normal – Стойност по подразбиране. Тази стойност избира шрифт, който е определен като normal в датабазата с шрифтове на посетителя (user-agent)
- oblique – Тази стойности избира шрифт, който е определен като oblique в датабазата с шрифтове на посетителя (user-agent)
- inherit – Унаследява стойността приложена върху родителския елемент
Упражнение
Тук ще продължа с кода, който създадохме в предишното упражнение.
Отново ще използвам селектора h1, h4, върху които ще приложа свойството font-style. Кода изглежда така:
style.css
- ...
- h1, h4 {
- font-family: "Century Gothic", Verdana, sans-serif;
- font-style:italic;
- }
Запази промените и виж резултата в браузър. Браузъра ще потърси в датабазата с шрифтове този, който е определен като italic и ще го приложи върху заглавията h1 и h4.
font-variant
Някои “шрифтови семейства” съдържат различни варианти на един и същ шрифт. Всеки от тях има точно определени качества. Пример за такъв шрифт е small-caps. При този шрифт малките букви изглеждат почти колкото главните, но са с по-малък размер и различни пропорции. Целта на свойството font-variant е да избере точно този шрифт и да го приложи върху текстовото съдържание на елемента.
Може да приеме 3 стойности:
- font-variant: { normal | small-caps | inherit };
- normal – Стойността по подразбиране. Тази стойност уточнява, че шрифта, който ще използваме не е small-caps шрифт.
- small-caps – Както казах по-горе, тази стойност търси да избере small-caps шрифта от желаното “шрифтово семейство”.
- inherit – Унаследява стойността приложена върху родителския елемент
Упражнение
В това упражнение ще продължа с кода от предишната точка. Ще използвам h1 заглавието като селектор и ще приложа върху него новия стил.
Отвори CSS файла и добави следния код:
style.css
- ...
- h1 {
- font-variant:small-caps;
- }
Тази декларация уголемява малките букви в h4 заглавието и ги направи да изглеждат почти колкото главните. Запази промените и виж резултата в браузър.
Надявам се, че всичко до тук е ясно и разбираемо. Ако имаш затруднения или въпроси, задай ги в коментарите след урока.
Във втора част на този урок ще разгледаме останалите три font свойства. Не го пропускай!