font-family հատկությունը

font-family հատկությունը սահմանում է տառատեսակի տեսակը:

Շարահյուսություն

cssընտրիչ {
  font-family: տառատեսակի անուն;
}

Ծանոթություն

Եթե տառատեսակի անվան մեջ կան բացատներ, օրինակ, Times New Roman, այն պետք է տեղադրվի միակ կամ կրկնակի չակերտների մեջ:

Ծանոթություն

Մի քանի նմանատիպ տառատեսակներ կարելի է թվարկել ստորակետով առանձնացնելով: Երբ բրաուզերը հանդիպում է ցանկի առաջին տառատեսակին, այն ստուգում է դրա առկայությունը օգտատիրոջ համակարգչում: Եթե նման տառատեսակ չկա, վերցվում է հաջորդ տառատեսակը ցանկից և նույնպես ստուգվում է առկայության համար: Այսպիսով, մի քանի տառատեսակներ մեծացնում են հավանականությունը, որ դրանցից գոնե մեկը կգտնվի կլիենտական համակարգչում:

Ցանկը սովորաբար ավարտվում է հիմնաբառով, որը նկարագրում է տառատեսակի տեսակը (բոլոր տառատեսակները պատկանում են ինչ-որ տեսակի) - serif, sans-serif, cursive, fantasy կամ monospace: Եթե բրաուզերը չի գտնում օգտատիրոջ համակարգչում նշված տառատեսակներից ոչ մեկը, ապա այն կընտրի նշված տեսակի տառատեսակներից մեկը:

Տառատեսակների տեսակներ

Տեսակ Նկարագրություն
serif Տառատեսակ հավելախազերով:
sans-serif Տառատեսակ առանց հավելախազերի:
cursive Շեղագիր տառատեսակ:
fantasy Դեկորատիվ տառատեսակ գեղեցիկ ոլորուններով և անսովոր էֆեկտներով:
monospace Մոնոշիրինային տառատեսակ, որտեղ յուրաքանչյուր նիշի լայնությունը նույնն է:

Լռելայն արժեքը. բրաուզերում լռելայն սահմանված տառատեսակը: Սովորաբար դա Times New Roman-ն է:

Օրինակ

Տառատեսակին նշանակենք Arial ընտանիքը:

html<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  font-family: Arial;
}

Результат:

Օրինակ

Տառատեսակին նշանակենք Times New Roman ընտանիքը: Քանի որ տառատեսակի անունը բաղկացած է մի քանի բառից, այն վերցնում ենք չակերտների մեջ:

html<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  font-family: "Times New Roman";
}

Результат:

Օրինակ

Տառատեսակին նշանակենք serif խմբի տառատեսակ (ամենայն հավանականությամբ կվերցվի Times New Roman):

html<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  font-family: serif;
}

Результат:

Օրինակ

Տառատեսակին նշանակենք sans-serif խմբի տառատեսակ (ամենայն հավանականությամբ կվերցվի Arial):

html<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  font-family: sans-serif;
}

Результат:

Օրինակ

Տառատեսակին նշանակենք fantasy խմբի տառատեսակ (հնարավոր է, որ չաշխատի նման տառատեսակի բացակայության պատճառով):

html<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  font-family: fantasy;
}

Результат:

Օրինակ

Տառատեսակին նշանակենք monospace խմբի տառատեսակ (տառերը կդառնան նույն չափի):

html<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  font-family: monospace;
}

Результат: