Font-size хусусияти
font-size хусусияти матн шрифтининг ўлчамини
белгилайди. Хусусият қиймати сифатида
ҳар қандай ўлчов бирликлари
(оддата, бу px, em
ёки rem) ёки махсус калит сўзлар
(жуда кам ишлатилади) хизмат қилади.
Синтаксис
селектор {
font-size: қиймат;
}
Калит сўзлар кўринишидаги қийматлар
| Қиймат | Тасниф |
|---|---|
xx-small |
Энг кичик. Мисол: Lorem ipsum dolor sit amet. |
x-small |
Жуда кичик. Мисол: Lorem ipsum dolor sit amet. |
small |
Кичик. Мисол: Lorem ipsum dolor sit amet. |
medium |
Ўртача. Мисол: Lorem ipsum dolor sit amet. |
large |
Катта. Мисол: Lorem ipsum dolor sit amet. |
x-large |
Жуда катта. Мисол: Lorem ipsum dolor sit amet. |
xx-large |
Энг катта. Мисол: Lorem ipsum dolor sit amet. |
larger |
Ота-она шрифтидан маълум қийматга катта. |
smaller |
Ота-она шрифтидан маълум қийматга кичик. |
Стандарт қиймат: medium.
Мисол
Абзацлар учун шрифт ўлчамини
20px қиламиз:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Мисол
Бу мисолда абзац учун ўлчам
16px, унинг ичидаги span учун эса 150%
белгиланган. Бунда span учун шрифт ўлчами
унинг ота-онасидан, яъни абзацдан 150%
бўлиб, унинг ҳақиқий ўлчами
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Мисол
Бу мисолда абзац учун ўлчам
16px, унинг ичидаги span учун эса larger
белгиланган. Бунда span учун шрифт ўлчами
унинг ота-онаси (абзац)дан катта бўлади:
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Мисол
Диққат қилинг, турли
font-family
ва бир хил font-size га эга бўлган шрифтлар визуал
жиҳатдан умуман бир хил ўлчамда бўлмаслиги мумкин
(бу муаммони ҳал этиш учун font-size-adjust
хусусиятига қаранг).
Қуйидаги мисолда ҳар икки абзац учун font-size
16px қилиб белгиланган, лекин font-family
турлича:
<p id="elem1">
Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
Lorem ipsum dolor sit amet.
</p>
#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
:
