В font-sizeимота указва размера, или височината, на шрифта. font-sizeзасяга не само шрифта, към който е приложен, но се използва и за изчисляване на стойностите на мерните единици em, rem и ex.
p ( font-size: 20px; )font-sizeможе да приеме ключови думи, единици за дължина или проценти като стойности. Важно е обаче да се отбележи, че когато е декларирано като част от fontстенографското свойство, font-sizeе задължителна стойност. Ако не е включен в стенограмата, целият ред се игнорира.
Стойностите на дължината (напр. Px, em, rem, ex и т.н.), към които се прилагат, font-sizeне могат да бъдат отрицателни.
Абсолютни ключови думи и стойности
.element ( font-size: small; )Той приема следните абсолютни стойности на ключови думи:
xx-smallx-smallsmallmediumlargex-largexx-large
Тези абсолютни стойности се съпоставят с конкретни размери на шрифта, изчислени от браузъра. Но можете също да използвате две стойности на ключови думи, които са относителни към размера на шрифта на родителския елемент.
Други абсолютни стойности включват mm(милиметри), cm(сантиметри), in(инчове), pt(точки) и pc(picas). Една точка е равна на 1/72 инча, докато една пика е равна на 12 точки - тези стойности обикновено се използват за отпечатани документи.
Относителни ключови думи
.element ( font-size: larger; )largersmaller
Например, ако родителският елемент има размер на шрифта small, дъщерният елемент с дефиниран относителен размер на largerще направи размера на шрифта равен mediumна дочерния елемент.
Процентни стойности
.element ( font-size: 110%; )Стойностите в проценти, като например задаване на размер на шрифта от 110%, също са спрямо размера на шрифта на родителския елемент, както е показано в демонстрацията по-долу:
Вижте Pen qdbELL от CSS-Tricks (@ css-tricks) на CodePen.
Ем единицата
.element ( font-size: 2em; )Единицата em е относителна единица въз основа на изчислената стойност на размера на шрифта на родителския елемент. Това означава, че дъщерните елементи винаги зависят от родителя си, за да зададе размера на шрифта си. Например:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )В горния пример абзацът ще има размер на шрифта 16px, защото 1 x 16 = 16px, докато заглавието ще бъде 32px, защото 2 x 16 = 32px. Има много предимства при увеличаване на размера в зависимост от размера на шрифта на родителския елемент, а именно ние можем да увиваме елементи в контейнер и да знаем, че всички деца винаги ще бъдат относително едно към друго:
Вижте писалката, за да разберете как работи модулът em чрез CSS-Tricks (@ css-tricks) на CodePen.
Rem единицата
В случай на rem единици обаче размерът на шрифта зависи от стойността на основния елемент (или htmlелемента).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )В горния пример rem единицата е равна на 16px (тъй като е наследена от html/ root елемента) и по този начин размерът на шрифта за всички елементи на абзаца ще се изчисли на 24px (1.5 x 16 = 24). За разлика от em единиците, абзацът ще игнорира стила на всичките си родители освен root.
Това устройство се поддържа от следните браузъри:
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Върши работа | Върши работа | Върши работа | Върши работа | 10+ | Върши работа | Върши работа |
Бившата единица
.element ( font-size: 20ex; )За бивши единици 1ex ще бъде равна на изчислената височина на малката буква x на основния елемент. Така че в примера по-долу htmlелементът е зададен на 20pxи всички останали размери на шрифта се определят от височината на х на този конкретен шрифт.
Вижте писалката, за да разберете как работи предишното устройство чрез CSS-трикове (@ css-трикове) на CodePen.
Експериментирайте с демо-горе ми заменяйки font-familyна htmlелемент, за да се види как другата шрифт-размери на климата.
Единици за изглед
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Единиците на Viewport, като vwи vh, задават размера на шрифта на елемент спрямо размерите на viewport:
- 1vw = 1% от ширината на прозореца за гледане
- 1vh = 1% от височината на прозореца
Така че, ако вземем следния пример:
.element ( font-size: 100vh; )Тогава това ще посочи, че размерът на шрифта на елемента винаги трябва да бъде 100% от височината на прозореца за гледане по всяко време (50vh би било 50%, 15vh би било 15% и т.н.). В демонстрацията по-долу опитайте да преоразмерите височината на примера, за да гледате типа на разтягане:
Вижте типа оразмеряване на писалката с vh единици от CSS-трикове (@ css-трикове) на CodePen.
vw единици се различават по това, че задава височината на буквените форми по ширината на прозореца за гледане, така че в демонстрацията по-долу ще трябва да преоразмерите прозореца на браузъра хоризонтално, за да видите тези промени:
Вижте типа оразмеряване на писалката с vw единици от CSS-трикове (@ css-трикове) на CodePen.
Тези единици се поддържат от следните браузъри:
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Важно е да се отбележи, че има още две единици за изглед: vminи vmax. Първият ще намери стойностите на vhи vwи ще зададе размера на шрифта като най-малкия от двете, докато vmaxразмерът на шрифта ще бъде най-големият от тези две стойности.
Единицата ch
.element ( font-size: 24ch; )В chустройството е подобен на exустройството, тъй като ще определи шрифта на елемент по отношение на ширината на 0 (нула) глиф на шрифта:
Вижте типа оразмеряване на писалката с ch единици от CSS-трикове (@ css-трикове) на CodePen.
Това устройство се поддържа от:
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Върши работа | 10+ | Върши работа | 9+ | Върши работа | Върши работа |