15.- Shriftlar bilan ishlash: FONT, FONT-

Shriftlar bilan ishlash: FONT, FONT-*

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,

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">eduproger.uz - edu Site< /h3>

< /body>

< /html>

 

 

 

eduproger.uz - edu Site

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>

Oddiiy yozuv ko’rinishi

Biroz qiyshaygan ko’rinish

Suniy qiyshaytirilgan ko’rinish

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>eduproger.uz < /h1>

< h2> eduproger.uz < /h2>

< /body>

< /html>

Natija esa quyidagicha

eduproder.uz -

eduproger.uz -

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>

Manchester United

Manchester United

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>

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

---