Урок за CSS размер на шрифта - Как да промените размера на текста в HTML

Използвайте font-sizeсвойството CSS, за да определите размера на вашия текст.

.container { font-size: 33px; } 

Това свойство приема няколко типа стойности:

  • Ключови думи (ключови думи с абсолютен размер и относителни размери),
  • Дължина (като пиксели (px) и em единици) и
  • Проценти.
.container { font-size: xx-large; } 

Въпросът е: кой тип стойност трябва да изберете и защо?

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

Стойности на ключовите думи

Има два типа стойности на ключови думи, които можете да използвате с размера на шрифта: absolute-sizeи relative-sizeключови думи. Да започнем с абсолютно.

Ключови думи с абсолютен размер

Кодът по-долу използва ключовата дума smallс абсолютен размер за оразмеряване на HTML текста.

.childElement { font-size: small; } 

Има повече опции за ключови думи с абсолютен размер, от които можете да избирате:

  • хх-малък
  • х-малък
  • малък
  • средно
  • голям
  • х-голям
  • xx-голям
  • ххх-голям

Стойността на ключова дума с абсолютен размер се определя от размера на шрифта по подразбиране на браузъра. Обикновено този размер е среден.

Ключови думи с относителен размер

Ключовите думи с относителен размер са друга възможност за разглеждане на ключови думи. Имате две възможности за избор: smallerи larger.

.parentElement { font-size: smaller; } 

Размерът на шрифта на елемент с ключова дума със относителен размер е относителен - по-голям или по-малък - спрямо размера на шрифта на родителя.

Казано по друг начин, размерът на шрифта на родителския елемент влияе върху размера на шрифта на дъщерния елемент, както можете да видите по-долу.

В този пример ключовата дума относителен размер smallerсе прилага към дъщерния елемент, а стойността абсолютен размер largeсе прилага към родителския елемент.

Стойности на дължината

font-sizeприема няколко различни стойности на дължината. Ще изследваме три от тях: пиксели (px) и единици em и rem. Въпреки вашия избор, стойността на дължината, която използвате, трябва да е положителна.

.parentElement { font-size: 60px; } 

Пиксели

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

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

Забележете, че дъщерните елементи използват pixelsи имат еднакъв размер на шрифта в горната примерна извадка.

ЕМ

Въпреки че можете да мислите за пикселите като фиксирани, мислете за стойностите на em като променливи.

Това е така, защото стойностите em са относителна единица дължина. Размерът на шрифта на елемент, който използва стойност em, е съответен на размера на шрифта на неговия родител.  

Кажете обаче, че не сте задали размер на шрифта за родителския елемент. Нито сте задали такава другаде по-нагоре в DOM. В този случай стойността на em се изчислява, като се използва стандартната настройка на браузъра (често 16px).

Нека направим тази идея конкретна.

Да кажем, че родителският елемент е зададен на 30px, а дъщерният елемент е зададен на 2em. След това размерът на изобразения шрифт на дъщерния елемент е 60px (2 x 30px = 60px). Можете да видите този сценарий в кода по-долу.

Стойностите на em могат да бъдат проблематични поради техния комбиниращ ефект, който е демонстриран в следващия пример.

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

REM

Въведете rem стойности, които са създадени за справяне със сложния проблем на ems.

Спомнете си, че стойностите em са относителни към родителския елемент. За разлика от това, стойностите на rem са спрямо размера на шрифта на елемента root (html).  

Това означава, че можете да приложите rem стойност към елемент и това няма да бъде засегнато от размера на шрифта на родителя. Това избягва смесителния ефект, който имахме по-горе.

Този пример използва font-sizeсвойството с rem стойност.

Ето ключова точка от горния пример: размерът на шрифта на родителския елемент не влияе върху размера на шрифта на дъщерните елементи.

Проценти

Процентите предлагат още един начин за задаване на размера на шрифта спрямо размера на шрифта на родителския елемент.

Елементът с процента се отнася до своя родителски елемент, за да определи размера на шрифта. Процентната стойност трябва да е положителна.

Ето един пример.

Както можете да видите, що се отнася до размера на шрифта, имате много възможности, които да отговарят на вашите нужди.

Пиша за учене на програмиране и най-добрите начини да го направя на amymhaddad.com. Също такапишаза програмиране, обучение и производителност: @amymhaddad.