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

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

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

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

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

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

Свойството 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”)

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

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

В първият пример шрифта 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

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

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

Шрифта на текстовите параграфи е 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-style можем да променим стила на шрифта в нашата страница.

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-variant можем да изберем шрифт, който променя размера на малките букви в текста.

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

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

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

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

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

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

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

Начало

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

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

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