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

Синтаксис

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

Размерът на шрифта може да бъде относителен или абсолютен.

азбука с цифри

Абсолютен размер

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

Относителен размер

Използва се за задаване на размера на текста спрямо съседните му елементи. С относителния размер е възможно да промените размера на текста в браузърите.

ЗАБЕЛЕЖКА: Ако не дефинираме размер на шрифта, тогава за нормален текст като параграфи, размерът по подразбиране е 16px, което е равно на 1em.

Размер на шрифта с пиксели

Когато задаваме размера на текста с пиксели, това ни осигурява пълен контрол върху размера на текста.

Пример

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Размер на шрифта с em

Използва се за преоразмеряване на текста. Повечето разработчици предпочитат в вместо пиксели . Препоръчва се от консорциума на световната мрежа (W3C). Както беше посочено по-горе, размерът на текста по подразбиране в браузърите е 16px. Така че можем да кажем, че размерът по подразбиране на 1ем е 16px .

jvm

Формулата за изчисляване на размера от пиксели да се в е em = пиксели/16 .

Пример

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Адаптивен размер на шрифта

Можем да зададем размера на текста, като използваме a vw единица , което означава „ ширина на прозореца за изглед '. Прозорецът за изглед е размерът на прозореца на браузъра.

1vw = 1% от ширината на прозореца за изглед.

Ако ширината на прозореца за изглед е 50 cm, тогава 1vw е равно на 0,5 cm.

numpy сумиране

Пример

Първият абзац е с ширина 5vw.

Вторият абзац е с ширина 10vw.

Font-size със свойството length

Използва се за задаване на размера на шрифта по дължина. Дължината може да бъде в cm, px, pt и др. Отрицателни стойности на дължина свойство не са разрешени в font-size.

Синтаксис

 font-size: length; 

Пример

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>