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";
}
: