Matn shriftlari

CSS shrift turlari ikkiga bo'linadi

generic family - "Sherif" yoki "Monospace" shrift turlariga o'xshash Shriftlar.
font family - Maxsus Shriftlar, "Times New Roman" yoki "Arial" ga o'xshash.

Shriftlar
Matn shriftini o'zgartirish uchun font-family tegi ishlatiladi.

... Agar CSS shriftlari nomi bir so'zdan ortiq bo'lsa, uni qo'shtirnoq ichida yozish shart

Element uchun 1 dan ortiq shriftlar "vergul" bilan yoziladi

Namuna:
p
{
font-family: "Times New Roman", Times, serif;
}


Font Style xususiyati

font-style xususiyati odatda matnni italic shriftga o'zgartirishda ishlatiladi

Bu tegning 3 ta qiyamti bor

normal - oddiy matndagi shrift.
italic - o'nga ozgina bukilgan shrift
oblique italic ga o'xshash lekin kam ishlatiladi

Namuna:

p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

Shrift O'lchami
font-size tegi matn o'lchamini belgilashda ishlatiladi

font-size Mutlaq yoki Nisbiy bo'lishi mumkin

Mutlaq(Absolyut) o'lcham

Matn o'lchamini aniq qiymati beriladi
Barcha brauzerlarda, foydalanuvchilarga matn o'lchamini o'zgartirishni taqidlaydi

Nisbiy o'lcham

Atrofidagi elementlarga nisbatan o'lcham belgilanadi
Barcha brazerlarda, foydalanuvchilarga matn o'lchamini o'zgartirishga ruhsat beradi

... Agar siz matn o'lchamini kiritmasangiz, matn o'lchami default o'lchamida yani 16px da qoladi

Matn o'lchamini Piksel yordamida belgilash
piksel bilan matnga o'lcham berilganda siz, matn o'lchami ustidan to'liq boshqaruvga ega bo'lasiz

Namuna:
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

Agar siz pixelda o'lchamni kiritsangiz, brazerda butun havolani yaqinlashtirishingiz(zoom) mumkin.

Matn o'lchamini EM yordamida belgilash
Foydalanuvchilarga matnni o'lchamini o'zgartirishga imkon beradi, ko'p dasturchilar pixelga nisbatan avzal ko'rishadi

1em bu 16px bo'lib default matn o'lchami. EM quyidagi formula bilan topish mumkin pixel/16 = em

Namuna:
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

Foiz va EM juftligi yordamida belgilash
Code ning body qismiga foiz belgilash orqali siz em ni barcha brauzerlarda qo'llash imkoniga ega bo'lasiz

Namuna:
body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

Matn shrifti qalinligi
Namuna:
p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Matn Shrift Variant
font-variant tegi matn kichik hariflar bilan korinishi yoki korinmasligini taminlaydi

font-variant tegi small-caps qiymatini olganda matndagi barcha kichik hariflar katta hariflarga o'tadi lekin ko'rinishi jihatidan ular baribir katta hariflardan kichik bo'ladi

Namuna:

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

Fontlar xususiyati