Maqola, shrift ko‘rinishlari va matnlarni shriftini o‘zgartirish haqidagi mavzuga bag‘ishlanadi.  CSS, shriftlar bilan qanday ishlay olishini ko‘ramiz. Foydalanuvchiga biror matnni o‘qish uchun qulay qilib berish, veb sahifa unumdorligini oshiradi, shuning uchun bu maqolani puxta o‘zlashtirib oling.

Shriftlar deganda, yozuv qanday  shriftlar oilasida yozilganligi, uning o‘lchami, rangi va yana bir necha xususiyati tushuniladi. Shriftlarga quyidagi stil xususiyatlari javob bradi:

font-family;

font-style;

font-variant;

font-weight;

font-size;

— font.

Bularning barchasini birma-bir ko‘rib chiqamiz.

Font-family — shriftlar oilasi.  Shriftlar ko‘rinishiga qarab ma’lum bir oilalarga bo‘linadi, asosiylari quyidagilar:

1. Serif. Quyidagi shriftlar bu oilaga tegishli: Times, Times New Roman, New York.

2. Sans-serif. Quyidagi shriftlar bu oilaga tegishli: Verdana, Geneva, Arial.

3. Monospace. Quyidagi shriftlar bu oilaga tegishli: Courier, Courier New.

Odatda, agar shrift nomida bo‘sh joy bo‘lsa, bu shrift qo‘shtirnoqga olinadi. Misol ko‘ramiz,

<html>
<head>
<title>Shrift_1</title>
<style type="text/css">
.sh{
font-family: verdana, Arial, Helvetica;
}
</style>
</head>
<body>
<h3 class="sh">AkmX.uz - IT Site</h3>
</body>
</html>

5css_2

Nimaga bir necha shrift yozilmoqda? Sababi agar kompyuterda kerakli shrift bo‘lmasa, brouzer ikkinchi turgan shriftni qidiradi va shu orqali yozuvni chiqaradi, misoldan, agar «Verdana» shrifti bo‘lmasa, yozuv «Arial» shriftida yoziladi, agar u ham bo‘lmasa, «Helvetica» shriftida. Shriftlar oilasi orqali ham berish mumkin:

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

Font-style — bu xususiyat shriftga stil beradi va uch xil qiymatni qabul qilishi mumkin:

1. Normal — oddiy ko‘rinish.

2. Italic — biroz qiyshaygan ko‘rinish.

3. Oblique — bu ham qiyshaygan ko‘rinish, lekin ma’lum bir burchakka, suniy yaratilgan.

Barcha shriftlarning oddiy biroz qiyshaygan va qalin yozuvli ko‘rinishi bo‘ladi, qiyshaygan ko‘rinishi bu «Italic«, «Oblique» esa suniy ravishda yaratilgan qiyshayish.

<html>
<head>
<title>Shrift_2 </title>
<style type="text/css">
h1{
font-family: verdana, arial, sans-serif;
font-style:normal;
}
h2{
font-family: verdana, arial, sans-serif;
font-style:italic ;
}
.sun{
font-family: verdana, arial, sans-serif;
font-style:oblique;
}
</style>
</head>
<body>
<h1>Oddiy yozuv ko'rinishi</h1>
<h2>Biroz qiyshaygan ko'rinish</h2>
<h2 class="sun">Suniy qiyshaytirilgan ko'rinish</h2>
</body>
</html>

5css_1

Font-variant — bu stil xususiyati, kichik harflarni tanlangan variant asosida yozib beradi. 2 xil qiymati mavjud:

1. Normal — oddiy hol, yozuv odatiy ko‘rinishda chiqadi(odatiy hol).

2. Small-caps — kichik harflar, kichiklashtirilgan katta harf ko‘rinishida namoyon bo‘ladi.

Misol ko‘ramiz,

<html>
<head>
<title>Shrift_3 </title>
<style type="text/css">
h1{
font-family: verdana, arial, sans-serif;
font-variant:small-caps;
}
h2{font-family: verdana, arial, sans-serif;}
</style>
</head>
<body>
<h1>Akmx.uz - it Site</h1>
<h2>Akmx.uz - it Site</h2>
</body>
</html>

Natija esa quyidagicha

5css_3

Font-weight — shrift qalinligini kattalashtirish uchun ishlatiladi. Kalit so‘zli qiymatlari 2 ta:

1. Normal — oddiy ko‘rinish.

2. Bold — qalinlashtirilgan ko‘rinish.

Ba’zi brauzerlar raqamli qiymatlarni ham qabul qiladi: 100, 200, 300, 400, 500, 600, 700, 800, 900. Ma’lumot uchun 400 qiymat «normal» bilan bir hil. Misol ko‘ramiz,

<html>
<head>
<title>Shrift_4 </title>
<style type="text/css">
#sh1{
font-weight: normal;
font-family:verdana;
}
#sh2{
font-family:verdana;
font-weight: bold;
}
</style>
</head>
<body>
<p id="sh1">Manchester United</p>
<p id="sh2">Manchester United</p>
</body>
</html>

5css_4

Font-size — yozuv o‘lchamini berish xususiyati, pikselda berishni maslahat beraman, shunda barcha brauzerlarda bir xil ko‘rinadi.

<html>
<head>
<title>Shrift_5 </title>
<style type="text/css">
h1 {
font-family: arial, verdana, sans-serif;
font-size: 18px;
}
h2{
font-family: arial, verdana, sans-serif;
font-size: 36px;
color: red;
}
</style>
</head>
<body>
<h1>Manchester United</h1>
<h2>Old Trafford</h2>
</body>
</html>

5css_5

Font — yuqoridagi barcha stil xususiyatlarini mana shu birgina xususiyat bilan amalga oshirish mumkin, biroz tushunarsiz bo‘lishi mumkin(boshlovchilar uchun), lekin juda qulay hisoblanadi.

P{
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Shu CSS kodini quyidagi bilan almashtirib ishlatish mumkin:

P{ font : italic normal bold 30px arial,sans-serif; }