CSS Font пропъртитата, определят „семейството“ на шрифта, дебелината, размера и стила на текста.
Разлика между Serif и Sans Serif шрифтове
CSS Font Family (различни шрифтове)
В CSS, има два вида имена на font-family-та:
- generic family – (основно семейство) група font families със подобен външен вид (като „Serif“ или „Monospace“)
- font family – специфично семейство (като „Times New Roman“ или „Arial“)
| Основно Семейство | Специфично Семейство | Описание |
|---|---|---|
| Serif | Times New Roman Georgia | Серифните шрифтове имат малки линийки по краищата на някои символи |
| Sans-serif | Arial Verdana | „Sans“ означава „без“ – тези шрифтове нямат линийките по краищата на символите |
| Monospace | Courier New Lucida Console | Всички символи заемат еднакво място |
Забележка: На компютърните екрани, не-серифните шрифтове се смятат за по-лесно четими от серифните.
Font Family
Семейството на шрифта се избира чрез свойството font-family.
В пропъртито трябва да се включат няколко различни шрифта, в случай, че уеб браузърът не поддържа първия избран.
Той ще премине на втория, и така нататък докато намери работещ шрифт. Започнете с шрифта, който искате, а завършете списъка с родовото семейство.
Така браузъра ще избере подобен шрифт на избрания от вас.
Забележка:
Ако името на шрифта е повече от една дума, то трябва да се сложи в кавички – „Times New Roman“.
Посочените шрифтове се разделят със запетайка:
За по-често използваните шрифтови комбинации, погледнете Web Safe Font Combinations.
Font Style
Най-често font-style пропъртито се използва, за да направим част от текста italic. Това пропърти има 3 стойности:
- normal – Текстът се показва нормално
- italic – Текстът се показва в курсив
- oblique – Текстът е „облегнат“ (oblique е много подобен на курсив, но по-малко се поддържа)
Font Size
font-size пропъртито определя размера на шрифта. Важно е да може да регулирате размера на шрифта, за да изглежда страницата ви добре и прегледно. Но, не трябва да използвате font-size, за да направите част от текста да изглежда като заглавие или нещо подобно. Винаги използвайте подходящи HTML тагове като <h1> – <h6> за рубрики и <p> за параграфи. Стойността на шрифта може да бъде в абсолютен или относителен размер. Абсолютен размер:
- Задава точно определен размер за текста
- Не позволява на потребителя да промените размера на текста във всички браузъри (лош от съображения за достъпност)
- Този начин е полезен, когато знаем със сигурност как физически трябва да изглежда крайния резултат
Относителен размер:
- Задава размер спрямо околните елементи
- Позволява на потребителя да промените размера на текста в браузърите
Забележка: Ако не укажете размер на шрифта, размера по подразбиране за нормален текст, като параграфи, е 16px (16px = 1em).
Задаване на Font Size чрез Пиксели
Този тип настройка ви дава пълен контрол върху размера на текста:
Горния код позволява на някои браузъри да променят размера на текста.
Забележка: Горният пример не работи в IE, преди версия 9.
Текстът може да се преоразмерява, във всички браузъри с помощта на инструмента за увеличение (обаче, това променя размера на цялата страница, а не само на текста).
Задаване Font Size чрез Em
За да се избегне проблемът, с преоразмеряването с по-стари версии на Internet Explorer, много фирми ги използват вместо пиксели. Единицата за мярка em се препоръчва от W3C. 1em е равна на текущия размер на шрифта. Размер на текста по подразбиране в браузърите е 16px. Така че, размера по подразбиране на 1em е 16px. Размерите могат да се изчислят от пиксели към em, по следната формула: пиксела / 16 = им
В горния пример, размера е същия колкото и на предишния пример с пикселите. Той, обаче, позволява на всички браузъри да го оразмерят. За съжаление, все още има проблем с по-старите версии на IE. Текстът не се оразмерява правилно и често става по-голям или по-малък от колкото трябва.
Използвайте комбинация от Percent и Em
Най-доброто решение, за да нямате проблеми със шрифта е, да определите размер по подразбиране в <body> елемент:
По този начин кога работи идеално!
Размера е един и същ във всички браузъри и те могат да си го оразмеряват сами.
Така се предпазвате от счупвания, които могат да направят сайта ви неприятен на външен вид!
Задава се bold на шрифта Примера показва как се удебелява шрифт.
Задайте вариант на шрифта Как да създадем различен вариант на шрифта.
Всички свойства на шрифта в една декларация
Как да заявим всички пропъртита в една декларация.
Всички CSS Font Пропъртита
| Пропърти | Описание |
|---|---|
| font | Заявява всички пропъртита в една декларация |
| font-family | Определя шрифтовото семейство |
| font-size | Определя големината на шрифта |
| font-style | Определя стила на шрифта |
| font-variant | Определя дали шрифта да се покаже във small-caps вариант |
| font-weight | Дефинира дебелината на шрифта |