Դաս 3: Fonts (Տառատեսակներ)

0

Այս դասի ընթացքում Դուք կսովորեք font-երի մասին և թե ինչպես դրանք կիրառել CSS oգտագործելիս: Մենք կդիտարկենք նաև  այն հարցը, թե ինչ է պետք անել, երբ որևէ կայքի համար ընտրված որոշ սպեցիֆիկ font-եր տեսանելի են լինում միայն այն դեպքում, երբ Install արված են տվյալ համակարգչի վրա: Կներկայացվեն նաև CSS-ի հետևյալ property-ները ՝

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

Font family [font-family]

font-family property-ն  կիրառվում է որևէ էլեմենտ կամ կայք ցուցադրելու համար նախընտրելի font-երի ցուցակը հաստատելիս: Եթե ցուցակի առաջին font-ը Install արված չէ համակարգչի վրա, ապա կփորձարկվի հաջորդը մինչև որ գտնվի համապատասխան font-ը:

font-երի տեսակավորման համար կան երկու անվանումներ՝ family-names և generic families: Այդ տերմինները բացատրվում են ստորև՝

Familyname

family-name-ի օրինակ (հաճախ անվանվում է “font”) կարող են լինել “Arial”-ը, “Times New Roman”-ը կամ “Tahoma”-ն:

Generic family

Generic families կարող են նկարագրվել որպես family-name-երի խմբեր, որոնք ունեն նմանություններ արտաքին տեսքում: Դրա օրինակ է sans-serif-ը, որը առանց <ոտքերի> font-երի հավաքածու է:

Տարբերությունը կարող է պատկերվել նաև այսպես՝

figure005

Երբ Ձեր կայքի համար font-երի ցուցակ եք պատրաստում, բնականաբար, սկսում եք նախընտրելի տարբերակներից: Սակայն խորհուրդ է տրվում ավարտել ցուցակը generic font family-ով: Այդ դեպքում,  անգամ եթե սպեցիֆիկ font-երից ոչ մեկը չաշխատի, միևնույն է Ձեր էջը կարող է ցուցադրվել:

Նախընտրելի font-երի ցուցակը կարող է ունենալ հետևյալ տեսքը՝

               h1 {font-family: arial, verdana, sans-serif;}

               h2 {font-family: “Times New Roman”, serif;}

<h1>-ով նշված Headline-երը կցուցադրվեն օգտագործելով “Arial” font: Եթե այն install արված չէ տվյալ համակարգչի վրա, ապա կկիրառվի Verdana-ն: Եթե երկուսն էլ հասանելի չեն, ապա headline-երը ցուցադրելու համար կկիրառվի sansserif family-ից որևէ font:

Ուշադրություն դարձրե՛ք որ “Times New Roman” Font-ի անվանումը պարունակում է space-եր և այդպիսով գրվում չակերտների մեջ:

Font style [font-style]

font-style property-ն պատասխանատու է ընտրված  font-ի  normalitalic կամ oblique տեսքի համար:

Ներքևի օրինակում <h2> -ով նշված headline-երը ցուցադրվում են italics-ով:

               h1 {font-family: arial, verdana, sans-serif;}

               h2 {font-family: “Times New Roman”, serif; font-style: italic;}

Font variant [font-variant]

font-variant property-ն կիրառվում է font-ի normal կամ smallcaps տարբերակները ընտրելիս: smallcaps font-ը  օգտագործում է փոքր չափի մեծատառեր գրելու համար: Ահա օրինակը՝

figure006

Եթե font-variant-ը դրված է  smallcapsի վրա, սակայն ոչ մի այդպիսի  font հասանելի չէ, ապա browser-ը ամենայն հավանականությամբ դրա փոխարեն ցույց կտա տեքստը  մեծատառերով:

               h1 {font-variant: small-caps;}

               h2 {font-variant: normal;}

Font weight [font-weight]

font-weight property-ն  նկարագրում է թե ինչքան  bold կամ “ծանր” է  font-ը: font-ը կարող է լինել normal կամ bold: Որոշ browser-ներ անգամ ապահովում են 100-900 թվերի կիրառումը font-ի weight-ը (կշիռը) հաստատելու համար:

               p {font-family: arial, verdana, sans-serif;}

               td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Font size [font-size]

Font-ի չափը որոշվում է font-size property-ի միջոցով:

Font-ի չափը ընտրելու համար կան շատ տարբեր չափման միավորներ (օրինակ՝ պիքսելներ, տոկոսներ և այլն): Այս դասընթացի ընթացքում մենք կկենտրոնանանք դրանցից ամենատարածվածների վրա: Օրինակներն ընդգրկում են՝

               h1 {font-size: 30px;}

               h2 {font-size: 12pt;}

               h3 {font-size: 120%;}

               p {font-size: 1em;}

Վերևի չորս չափման միավորների միջև կա մեկ հիմնական տարբերություն՝ ‘px‘-ը և ‘pt‘-ն font –ի չափը դարձնում են բացարձակ (absolute), մինչդեռ ‘%-ը և ‘em‘-ը թույլ են տալիս համապատասխանեցնել font-ի չափը ըստ օգտվողի ցանկության:

Շատ օգտատերեր վատ տեսողություն ունեն կամ պարզապես ոչ լավ որակի մոնիտոր են օգտագործում: Ձեր կայքը բոլորի համար հարմար դարձնելու համար կարող եք դիմել 2-րդ տարբերակին:

Compiling [font]

Օգտագործելով font-ի short hand property-ն՝ հնարավոր է միանգամից օգտվել font-ի տարբեր property-ներից:

Օրինակ՝ պատկերացրե՛ք կոդերի այս չորս տողերը օգտագործվում են <p>-ի font property-ները նկարագրելու համար:

               p {

                               font-style: italic;

                               font-weight: bold;

                               font-size: 30px;

                               font-family: arial, sans-serif;

               }

Այս հնարքի միջոցով կոդը կարող է պարզեցվել՝

               p {

                               font: italic bold 30px arial, sans-serif;

               }

Font-ի value-ների հերթականությունը հետևյալն է՝

font-style | font-variant | font-weight | font-size | font-family

Summary

Այժմ Դուք սովորեցիք font-երի հետ կապված որոշ հնարքներ: Հիշե՛ք, որ CSS օգտագործելու ամենամեծ առավելություններից մեկը այն է, որ ցանկացած պահին կարող եք մի քանի րոպեում փոխել ամբողջ կայքի font-երը: CSS-ը խնայում է ժամանակ և հեշտացնում Ձեր աշխատանքը:

 

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.