CSS-TEXT AND FONT (ՄԱՍ-1)
@font-face
@font-face – սահմանում է հեղինակային կամ սեփական տառատեսակներ։
Հեղինակային անվտանգ տառատեսակները օգտվողի համակարգչի օպերացիոն համակարգում զետեղված ստանդարտ տառատեսակներն են, իսկ սեփականը՝ երբ ծրագրավորողը ներբեռնել է համացանցից նախընտրելի տառատեսակ։
Սեփական տառատեսակը վեբ կայքի ամբողջ տվյալների հետ միասին բեռնվում է սերվերում, որպեսզի բրաուզերը անրաժեշտ ֆայլերի հետ ներբեռնի նաև տվյալ տառատեսակը։
Սերվերից ներբեռնվող տառատեսակի հասցեն( src:url(…); ) և անվանումը( font-family: someFont; ) սահմանվում է @font-face կանոնում։ Դրանք պարտադիր են, իսկ տեքստին վերաբերող այլ css հատկություններ սահմանվում է ըստ ցանկության։
Կարելի է սահմանել line-gap-override հատկությունը նույնպես։ Այն վերասահամանում է տողերի միջև ընկած կանխադրված հեռավորությունը։ Օգտագործվում է, երբ անհրաժեշտ է՝ երկու տարբեր տառատեսակներ ունենան տողերի միջև նույն հեռավորությունը։
Բրաուզերներն աջակցում են տառատեսակների տարբեր ֆորմատներ, ուստի src հատկության մեջ, իրարից ստորակետներով առանձնացված, պետք է սահմանել տառատեսակի ֆորմատների մի քանի հասցեներ՝ մի քանի url(…)-ներ։ Օրինակ՝ “ internet explorer ” բրաուզերի մինչև 9-րդ տարբերակն աջակցում է տառատեսակի .eot ֆորմատը, որը ցանկալի է ավելացնել հին տարբերակից օգտվողների համար։
@font-face {
font-family: heinrich;
src: url('fonts/heinrich.ttf'), url('fonts/heinrich.eot');
}
div {
font-family: heinrich;
font-size: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat
scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet
ac, aliquam sit amet justo nunc tempor, metus vel.
<i>Placerat suscipit, orci nisl iaculis eros,</i> a tincidunt nisi odio
eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut
metus a risus iaculis scelerisque eu ac ante. Fusce non varius purus
aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin
lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui
ornare nisl, sollicitudin interdum turpis nunc eget.
</div>
</body>
</html>
box-decoration-break
սահմանում է` ինչպես ձևավորել տեքստի այն հատվածները, որոնք տեղափոխվել են հաջորդ տող։
Սրա հետ գործում են հետևյալ հատկությունները՝ background, border, border-image, box-shadow, clip-path, margin, padding :
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | slice |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
slice – տողը ընդհանուր տեքստի ոճից կտրվում է։ Հիմնականում կտրված մասում չի պատկերվում սահմանագիծը, ստվերը և կլորացման շառավիղը, այսինքն՝ տեքստը դեռ չի ավարտվել և ունի շարունակություն։
clone – յուրաքանչյուր տող պատկերվում է առանձին, այսինքն՝ կտրված հատվածում պատկերվում է սահմանագիծը, ստվերը և կլորացման շառավիղը։
q {
background: #fffdeb;
text-decoration: none;
border: 1px solid #86af61;
border-radius: 10px;
padding: 0 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
box-decoration-break: slice;
-webkit-box-decoration-break: clone;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id ipsum
pellentesque, dignissim erat et, faucibus urna. Maecenas vel pharetra
augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos.
<q>Nullam ipsum mi, aliquet id nibh in, porttitor tristique dui. Mauris
quis blandit orci. Aliquam dignissim massa ut metus imperdiet, at
ultrices risus bibendum. Suspendisse laoreet luctus rutrum. Morbi lorem
ante, dictum vel massa vitae, imperdiet porttitor diam. Aenean mollis
felis a leo maximus tempor. Vivamus quis aliquet purus.</q
>.
</p>
</body>
</html>
slice
clone
caret-color
caret-color – սահմանում է տեքստային տեղացույցի(курсор – հատուկ թարթվող(мигающая) նշան, որը ցույց է տալիս՝ որտեղ պետք է տպվի հաջորդ սիմվոլը) գույնը, որը հայտնվում է տեքստային դաշտերում(<input>, <textarea>) և այն էլեմենտներում, որոնք ունեն contenteditable ատրիբուտը։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
auto – սովորաբար բրաուզերներն օգտագործում են currentColor արժեքը(որը համապատասխանում է տվյալ տեքստին վերաբերող color հատկության արժեքին), բայց հնարավոր է հարմարեցնել տեղացույցի գույնը ավելի լավ տեսանելիություն ապահովելու համար՝ հիմք վերցնելով ֆոնի կամ այլ հատկության արժեքները։
որևէԳույն – նշվում է գույնի կոդը ցանկացած գունային ֆորմատով՝ օրինակ՝ #ff8800(նարնջագույն)։
p {
caret-color: #ff8800;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</body>
</html>
direction
direction-ը նախատեսված է այն կայքերի համար, որտեղ տեքստի ուղղությունը կարևոր է․ օրինակ արաբական տեքստը կարդացվում է աջից ձախ։
direction -նն ունիվերսալ հատկություն է և ունի հետևյալ առանձնահատկությունները՝
-փոխում է տեքստի ուղղությունը՝ ձախից աջ կամ աջից ձախ։
-աղյուսակում կարող է սյունակների հերթականությունը փոխել՝ 1 2 3 4 5 -ից դարձնել՝ 5 4 3 2 1:
-երբ բրաուզերի պատուհանը(կամ որևէ բլոկ տեսակի էլեմենտ) սովորականից նեղ է կամ կարճ, ապա վեբ էջը տեղաշարժվում է վերև-ներքև տանող կոճակով(полосы прокрутки), որը գտնվում է բրաուզերի պատուհանի աջակողմյան մասում։ direction հատկության միջոցով կոճակները հնարավոր է տեղավորել բրաուզերի պատուհանի ձախակողմյան կամ աջակողմյան մասում։
-որոշում է տեքստային բլոկում(պարտադիր պետք է ունենա text-align: justify հատկությունը) ամենավերջին կարճ տողի դիրքը՝ ձախ կամ աջ կողմից։
Եթե direction-ը օգտագործելվելու է տող տեսակի էլեմենտում(օրինակ՝ <q>, <span>, <a> և այլն), ապա անհրաժեշտ է սահմանել unicode-bidi: embed կամ bidi-override արժեքով հատկույունը։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | ltr |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
ltr – տեքստի ուղղությունը սահմանում է ձախից աջ։
rtl – տեքստի ուղղությունը սահմանում է աջից ձախ։
div {
width: 800px;
height: 250px;
padding: 5px;
border: 10px inset rgb(255, 166, 0);
}
.p02 {
direction: rtl;
}
.p03 {
direction: rtl;
width: 800px;
height: 200px;
padding: 5px;
border: 10px inset rgb(255, 166, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p contenteditable="true">
1 2 3 4 5 6 <br />
Հին աշխարհն ամեն օր հազար մարդ է մտնում նոր, հազար տարվա փորձն ու գործը
սկսում է ամեն օր.
</p>
<br />
<p class="p02" contenteditable="true">
1 2 3 4 5 6 <br />
<br />
Հին աշխարհն ամեն օր հազար մարդ է մտնում նոր, հազար տարվա փորձն ու գործը
սկսում է ամեն օր. <br />
<br />
։րօ նեմա է մւոսկս ըծրոգ ւո նձրոփ ավրատ րազահ, րոն մւոնտմ է դրամ րազահ րօ
նեմա նհրախշա նիՀ <br />
<br />
<br />
</p>
<p class="p03">
كل يوم يدخل ألف شخص إلى العالم القديم ، ويبدأ كل يوم ألف عام من الخبرة
والعمل.
</p>
</div>
</body>
</html>
1.Թվերը, ինչպես նաև տեքստը դասավորված է նորմալ՝ ձախից աջ։
2. Թվերը դասավորվել են աջից ձախ։ Նույնը կատարվում է նաև տեքստերի հետ։
3. Առաջին տողը պետք է կարդացվի աջից ձախ, այսինքն ” օր ” բառից։ Աջից ձախ կարդալու համար ավելի տրամաբանական է երկրորդ տողը․ քանի որ հայերեն լեզուն ձախից աջ է, ապա direction-նն օգտագործելը սխալ է։
4. direction-ի միջոցով արաբական տեքստը բերվել է իր ճիշտ դիրքին՝ աջից ձախ։
unicode-bidi
Եվրոպական լեզուներ տեքստը կարդացվում է ձախից աջ, իսկ արաբական երկրների լեզուները՝ աջից ձախ։
Եթե նույն տեքստում կան թե ձախակողմյան և թե աջակողմյան հատվածներ, դրանց ուղղությունը սահմանվում է բրաուզերների կողմից « unicode » կոդավորման ալգորիթմով։ unicode-bidi հատկությունը հնարավորություն է տալիս վերասահմանել ալգորիթմն այնպես, ինչպես ծրագրավորողն է ցանկանում։
unicode-bidi -ն սովորաբար օգտագործվում է տող տեսակի էլեմենտների համար և անհրաժեշտ է այն սահմանել direction հատկության հետ միասին։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
normal – բրաուզերն ինքն է որոշում ինչպես ցուցադրել տեքստը՝ հիմք ընդունելով unicode կոդավորման սիմվոլները։
embed – եթե տող տեսակի էլեմենտի պարունակության ուղղությունը պետք է փոխել, անհրաժեշտ է direction-ի հետ սահմանել նաև unicode-bidi հատկությունը։
Օրինակ, եթե բլոկ տեսակի էլեմենտի ուղղությունը ձախակողմյան է(direction: ltr), իրենում գտնվող տող տեսակի էլեմենտը չի դառնա աջակողմյան, քանի դեռ նրանում direction: rtl -ի հետ չսահմանվի նաև unicode-bidi հատկութոյւնը։
embed արժեքով սահմանվում է, որ տեքստի ուղղությունը պետք է լինի ըստ direction -ի արժեքի։
bidi-override – նման է embed-ին, բայց նաև փոխում է տողի բառերի և նաև տառերի հերթականությունը՝ ըստ direction-ի արժեքի։
isolate – embed-ի պարագայում բլոկ տեսակի էլեմենտը հաշվի է առնում իրենում գտնվող տող տեսակի էլեմենտի պարունակության ուղղությունը։
isolate-ի դեպքում այլևս հաշվի չի առնվում տող տեսակի էլեմենտին սահմանած ուղղությունը, այսինքն տող տեսակի էլեմենտը իզոլացվում է ընդհանուրից և իր վայրի փոփոխության խնդիր չի առաջանում։
isolate-override –տեքստում մեկուսացված հատվածի բառերի և տառերի հաջորդականությունը փոխում է։
plaintext –ուղղությունները որոշվում են ավտոմատ՝ առանց հաշվի առնելու բլոկին կամ տող տեսակին սահմանած direction-ի արժեքը։
p {
width: 500px;
}
.p01 {
font-size: 15px;
color: orange;
}
.p01 span {
font-size: 15px;
color: red;
}
.p02-not {
font-size: 15px;
color: orange;
direction: rtl;
}
.p02-not span {
font-size: 15px;
color: red;
direction: ltr;
}
.p02-yes {
font-size: 15px;
color: orange;
direction: rtl;
}
.p02-yes span {
font-size: 15px;
color: red;
direction: ltr;
unicode-bidi: embed; /* <span>-նն իր ուղղությունը չի փոխի, եթե դրան չավելացվի այս հատկությունը։*/
}
.p03-not {
font-size: 15px;
color: orange;
direction: rtl;
}
.p03-not span {
font-size: 15px;
color: red;
direction: ltr;
}
.p03-yes {
font-size: 15px;
color: orange;
direction: rtl;
}
.p03-yes span {
font-size: 15px;
color: red;
direction: ltr;
unicode-bidi: isolate;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hayti</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body style="background: black; color: white;">
<div>
<h4>Հիմնական տեքստի թարգմանությունը՝</h4>
<p class="p01"> 1 2 3 4 5 6 7 8 9 <span> 1 2 3 4 5 6 7 8 9 </span> 11 12 13 14 15 16 17 18 19 <span> 21 22 23 24 25 </span> </p>
<p class="p01"> По-английски машина называется <span>"car..."</span>, а по-армянски <span>"մեքենա..."</span>.</p>
</div>
<div style="display: flex; margin-top:50px">
<div style="width: 520px; border: 2px solid black; margin-right: 20px;">
<h4>Ինչպիսիսն է տեքստն առանց " embed "-ի և դրա դեպքում՝</h4>
<p class="p02-not"> 1 2 3 4 5 6 7 8 9 <span> 1 2 3 4 5 6 7 8 9 </span> 11 12 13 14 15 16 17 18 19 <span> 21 22 23 24 25 </span> </p>
<p class="p02-not"> في اللغة الإنجليزية ، تسمى السيارة <span>"car...",</span> ، وفي الأرمينية تسمى <span>"մեքենա..."</span>. </p>
<br>
<p class="p02-yes"> 1 2 3 4 5 6 7 8 9 <span> 1 2 3 4 5 6 7 8 9 </span> 11 12 13 14 15 16 17 18 19 <span> 21 22 23 24 25 </span> </p>
<p class="p02-yes"> في اللغة الإنجليزية ، تسمى السيارة <span>"car...",</span> ، وفي الأرمينية تسمى <span>"մեքենա..."</span>. </p>
</div>
<br><br>
<div style="width: 520px; border: 2px solid black;">
<h4>Ինչպիսիսն է տեքստն առանց " isolate "-ի և դրա դեպքում՝</h4>
<p class="p03-not"> 1 2 3 4 5 6 7 8 9 <span> 1 2 3 4 5 6 7 8 9 </span> 11 12 13 14 15 16 17 18 19 <span> 21 22 23 24 25 </span></p>
<p class="p03-not"> في اللغة الإنجليزية ، تسمى السيارة <span>"car...",</span> ، وفي الأرمينية تسمى <span>"մեքենա..."</span>. </p>
<br>
<p class="p03-yes"> 1 2 3 4 5 6 7 8 9 <span> 1 2 3 4 5 6 7 8 9 </span> 11 12 13 14 15 16 17 18 19 <span> 21 22 23 24 25 </span></p>
<p class="p03-yes"> في اللغة الإنجليزية ، تسمى السيارة <span>"car...",</span> ، وفي الأرمينية تسمى <span>"մեքենա..."</span>. </p>
</div>
</div>
</body>
</html>
Առանց embed -ի չի կատարվել ուղղության փոփոխություն և բոլորը շարադրվել են աջից ձախ՝ հիմնական բլոկին համապատասխան։
embed -ի դեպքում կարմիրների ոչ միայն հերթականությունն է փոխվել, այլ նաև շարադրվել է ամենաձախ կողմից, քանի որ կարմիրների ուղղությունը ձախակողմյան է(direction: ltr), իսկ հիմնականը՝ բլոկ էլեմենտի պարունակության սկիզբը, շարադրվել է ամենաաջ կողմից, քանի որ դրա ուղղությունը աջակողմյան է(direction: rtl):
isolate -ի դեպքում, քանի որ կարմիրները իզոլացված են ընդհանուրից, տեքստում իրենց վայրը չեն փոխել, այլ փոխվել է միայն թվերի հերթականությունը՝ ձախից աջ։ Այս մեկը պահպանել է իր ճիշտ հերթականությունը՝ այնպիսին է ինչպիսին որ տեքստն է։
Այս հատկությունը սովորաբար օգտագործվում է DTD ծրագրավորողների կողմից։ Որպես Frontend ծրագրավորողներ, անհրաժեշտ է ուղղակի իմանալ, թե ինչ գործողություն է այն կատարում և կարիք չկա խորանալու, թե ինչպես է unicode կոդավորման ալգորիթմն աշխատում։
font
font – ունիվերսալ է և ընդունում է տառատեսակի համար մի քանի արժեքներ։
Կարող է նշվել նաև հատուկ բառ և տեքստին սահմանել տառատեսակ, որն օգտագործվում է համակարգչի օպերացիոն համակարգի կողմից։
font -նն ունիվերսալ է հետևյալ հատկությունների համար՝ font-style, font-variant, font-weight, font-stretch, font-size / line-height, font family։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | ․․․․ |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
font-ի բանալի բառերն են՝
caption – այն տառատեսակն է, որն օպերացիոն համակարգում օգտագործվում է հրահանգման կոճակների և այլնի համար։
icon – այն տառատեսակն է, որն օպերացիոն համակարգում օգտագործվում է պատկերանշանների հետ(icon):
menu – այն տառատեսակն է, որն օպերացիոն համակարգում օգտագործվում է բացվող մենյուների համար։
message-box – այն տառատեսակն է, որն օպերացիոն համակարգում օգտագործվում է դիալոգային պատուհանների համար։
small-caption – նույնն է ինչ caption-ը, բայց համեմատաբար ավելի փոքր։
status-bar – այն տառատեսակն է, որն օպերացիոն համակարգում օգտագործվում է որևէ պատուհանի կարգավիճակը ցուցադրելու համար։
p {
font: caption;
}
font-ը որպես ունիվերսալ հատկություն օգտագործելու համար անհրաժեշտ է հետևել մի քանի կանոնների՝
-font-size և font-family հատկությունների արժեքները պարտադիր է նշել։
-տողերի իրար մեջ ընկած հեռավորությունների չափը(line-height) պետք է նշվի անմիջապես տառատեսակի չափից հետո(font-size)՝ այդ երկուսն իրարից առանձնացնելով « / » սիմվոլով։
-եթե նշված են font-style, font-variant և font-weight հատկությունների արժեքները, ապա դրանք պետք է լինեն font-size -ից առաջ։
-font-family հատկության արժեքը սահմանվում է ամենավերջում։
p {
font: italic normal 900 expanded 30px/1 arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello World!!!</p>
</body>
</html>
font-style
font-style – սահմանում է տառատեսակի ոճը: Սովորաբար այն լինում է ձեռագիր թեք կամ տեքստը միքիչ թեքված։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
normal – տեքստը՝ սովորականի պես։
italic –բրաուզերը փորձում է գտնել տվյալ տառատեսակի թեքված տարբերակը և չգտնելու դեպքում օգտագործում է oblique -ն․ դա էլ չգտնելու դեպքում կօգտագործի իր ալգորիթմը տեքստը ոճավորելու և թեքելու համար։
oblique – տառատեսակն ուղղակի թեքված է մի փոքր աջ՝ ինչպես բրաուզերը կսահմաներ։ Եթե չկա այդ տարբերակը, ապա կօգտագործվի italic-ը․ դա էլ չտնելու դեպքում բրաուզերն իր ալգորիթմով այն կթեքի։
oblique-ն աստիճանով – տվյալ տառատեսակում ընտրում է oblique-ի համար նախատեսվածը և լրացուցիչ ավելացնում է տեքստի թեքության աստիճանը։ Եթե տեսակների մեջ հասանելի է մի քանի թեքության տառատեսակներ, ընտրվում է այն, որն ավելի մոտ է մեր կողմից նշված աստիճանին։
Եթե տվյալ տառատեսակը թեք տարբերակ չունի, ապա բրաուզերը թեքում է տեքստը մեր նշած աստիճանի չափով։
Թույլատրելի է սահմանել -90deg-ից մինչև 90deg ներառյալ։
Եթե աստիճանը մեր կողմից սահմանված չէ, ապա տեքստին կսահմանվի 14deg։ Դրական թիվը տեքստը կթեքի տողերի ավարտի ուղղությամբ, իսկ բացասականը՝ տողերի սկզբի ուղղությամբ։
Այս տարբերակը ներկայումս աջակցվում է միայն FireFox բրաուզերի կողմից:
p {
font-style: oblique 50deg;
}
p {
font-style: italic;
}
font-variant
font-variant – սահմանում է տեքստում փոքրատառերի տեսակը՝ թողնել այդպիսին, կամ ամբողջ տեքստը սահմանել մեծատառ սիմվոլներով, բայց փոքրատառի չափով։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
normal – տեքստը սովորականի պես։
small-caps – փոխում է բոլոր փոքրատառերը մեծատառերով, բայց թողնում է փոքրատառի չափով։
.p01 {
font-variant: normal;
}
.p02 {
font-variant: small-caps;
}
font-weight
font-weight – սահմանում է տառատեսակի հագեցվածությունը` մգությունը կամ նեղությունը։
Արժեքը նշվում է թվով՝ 100-ից 900(100, 200․․․․․ և այլն) , կամ հատուկ բառերով։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
normal – սովորական մգություն։ Նույնն է ինչ 400-ը։
bold – սովորականից բարձր մգություն։ Նույնն է ինչ 700-ը։
bolder – մգությունն ավելացնում է հաշվի առնելով ծնող էլեմենտին սահմանածը։ Դուստր էլեմենտին սահմանում է ծնողից մեկով ավել։
lighter –մգությունը նեղացնում է հաշվի առնելով ծնող էլեմենտին սահմանածը։ Դուստր էլեմենտին սահմանում է ծնողից մեկով պակաս։
Ոչ բոլոր տառատեսակներն ունեն մգացման և նեղացման տարբերակները, այսինքն 100-ից 900-ը։ Սովորաբար տառատեսակները սահմանափակվում են 400-normal և 700-bold տարբերակներով։
Եթե տառատեսակը չի ապահովում հագեցվածության բոլոր մակարդակները, ապա բրաուզերը հետևում է որոշակի կանոնների՝
-եթե 500-ից բարձր է նշված, ապա կօգտաործվի առաջին հանդիպած մուգ տարբերակը։
-եթե 400-ից պակաս է, ապա կօգտագործվի առաջին հանդիպած նեղ տարբերակը։
Հետևյալ տառատեսակը, որը օգտագործված է օրինակում, ունի նեղանալու կամ մգանալու որոշակի մակարդակներ՝
.p01 {
font-family: 'Open Sans';
font-size: 30px;
font-weight: 600;
}
.p02 {
font-family: 'Open Sans';
font-size: 30px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="p01">Hello World!!!
<p class="p02">Hello World!!!</p>
</p>
</body>
</html>
Տառատեսակի մակարդակները հերթականությամբ՝
body {
padding: 0 20px;
font-family: 'Open Sans';
}
.w100 {
font-weight: 100;
}
.w200 {
font-weight: 200;
}
.w300 {
font-weight: 300;
}
.w400 {
font-weight: 400;
}
.w500 {
font-weight: 500;
}
.w600 {
font-weight: 600;
}
.w700 {
font-weight: 700;
}
.w800 {
font-weight: 800;
}
.w900 {
font-weight: 900;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="w100">This is 100 weight</p>
<p class="w200">This is 200 weight</p>
<p class="w300">This is 300 weight (Հասանելի է)</p>
<p class="w400">This is 400 weight (Հասանելի է)</p>
<p class="w500">This is 500 weight</p>
<p class="w600">This is 600 weight (Հասանելի է)</p>
<p class="w700">This is 700 weight (Հասանելի է)</p>
<p class="w800">This is 800 weight (Հասանելի է)</p>
<p class="w900">This is 900 weight</p>
</body>
</html>
font-stretch
font-stretch – տառատեսակի համար սահմանում է տարբեր լայնություններ, եթե այն ունի տարբերակներ։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
Հնարավոր է լայնության չափը սահմանել տոկոսով։ Թույլատրելի է նշել 50%-ից 200% ներառյալ։ Բացասական արժեքն արգելվում է։
Օրինակ՝ p { font-stretch: 65%; } :
ultra-condensed – նեղացնում է տեքստը մաքսիմալ հնարավոր չափով։ Նույնն է ինչ 50%-ը։
extra- condensed – տեքստն ավելի նեղ է հաջորդից(condensed), բայց ավելի լայն նախորդից(ultra-condensed)։ Նույնն է ինչ 62.5%-ը։
condensed – տեքստն ավելի նեղ է հաջորդից(semi-condensed), բայց ավելի լայն նախորդից(extra- condensed)։ Նույնն է ինչ 75%-ը։
semi-condensed – տեքստն ավելի նեղ է հաջորդից(normal), բայց ավելի լայն նախորդից(condensed)։ Նույնն է ինչ 87.5%-ը։
normal – տեքստը՝ սովորականի պես։ Նույնն է ինչ 100%-ը։
semi-expanded – տեքստն ավելի լայն է նախորդից(normal), բայց ավելի նեղ հաջորդից(expanded)։ Նույնն է ինչ 112.5%-ը։
expanded – տեքստն ավելի լայն է նախորդից(semi-expanded), բայց ավելի նեղ հաջորդից(extra-expanded)։ Նույնն է ինչ 125%-ը։
extra-expanded – տեքստն ավելի լայն է նախորդից(expanded), բայց ավելի նեղ հաջորդից(ultra-expanded)։ Նույնն է ինչ 150%-ը։
ultra-expanded – Լայնացնում է տեքստը մաքսիմալ հնարավոր չափով։ Նույնն է ինչ 200%-ը։
body {
padding: 0 20px;
font-family: 'League Mono';
font-size: 50px;
font-weight: bold;
width: 1000px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">Armenia</span>
<span style="font-stretch: extra-condensed">Armenia</span>
<span style="font-stretch: condensed">Armenia</span>
<span style="font-stretch: semi-condensed">Armenia</span>
<span style="font-stretch: normal">Armenia</span>
<span style="font-stretch: semi-expanded">Armenia</span>
<span style="font-stretch: expanded">Armenia</span>
<span style="font-stretch: extra-expanded">Armenia</span>
<span style="font-stretch: ultra-expanded">Armenia</span>
</p>
</body>
</html>
font-size
font-size – սահմանում է տառատեսակի չափը։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Արժեքը նշվում է հետևյալ տարբերակներից մեկով՝
Հատուկ բառեր, որոնք կոչվում են « բացարձակ » արժեքներ։ Բացարձակ արժեքները հիմնված են օգտվողի բրաուզերի և օպերացիոն համակարգի կանխադրված արժեքներից։
Դրանք են`
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large – medium-ը օգտվողի բրաուզերի և օպերացիոն համակարգի կողմից սահմանած չափն է։ medium-ից ձախ գնալով փոքրանում է, դեպի աջ՝ գնալով մեծանում։
Հատուկ բառեր, որոնք կոչվում են « հարաբերական » արժեքներ։
Դրանք են՝
larger, smaller – սովորաբար օգտագործվում են դուստր էլեմենտներում և նշանակում են՝ դուստր էլեմենտի տառատեսակն ավելի մեծ կամ ավելի փոքր պետք է լինի համեմատած ծնողի տառատեսակի հետ։
Սահմանվում է նաև Css-ի չափման միավորներով։
Եթե արժեքը սահմանվի տոկոսով, ապա հաշվի կառնվի ծնողի տառատեսակի չափը։
body {
padding: 0 10px;
font-family: 'League Mono';
font-weight: bold;
width: 1000px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
<span style="font-size: xx-small">Armenia</span>
<span style="font-size: x-small">Armenia</span>
<span style="font-size: small">Armenia</span>
<span style="font-size: medium">Armenia</span>
<span style="font-size: large">Armenia</span>
<span style="font-size: x-large">Armenia</span>
<span style="font-size: xx-large">Armenia</span>
<span style="font-size: xxx-large">Armenia</span>
</p>
</body>
</html>
line-height
line-height – բլոկ տեսակի էլեմենտների համար սահմանում է տեքստի տողերի միջև հեռավորությունը՝ վիրտուալ դատարկ տարածությունը և ըստ այդմ որոշվում է տողային բլոկների բարձրությունը։
Տող տեսակի էլեմենտների համար նույնպես սահմանում է տողերի միջև հեռավորություն, որը հաշվի կառնվի բլոկ տեսակի էլեմենտի տողային բլոկի բարձրությունը սահմանելու ժամանակ։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
normal – տողերի միջև հեռավորությունը սահմանվում է ավտոմատ՝ հաշվի առնելով տառատեսակն ու բրաուզերը։
Արժեքը կարող է սահմանվել տարբեր կերպ՝
որևէ թիվ – սահմանված թիվը բազմապատկվում է տառատեսակի չափին և ստացվում է տողի ընդհանուր բարձրությունը։ Օրինակ, եթե նշված է` 1.5, իսկ font size-ը հավասար է 20px-ի, տեքստի տողերի բարձրությունը կլինի՝ 20×1.5=30px։ Սովորաբար օգտագործվում է այս տարբերակը ավելորդ ժառանգականությունից խուսափելու համար։
չափման միավորներով – em տեսակի չափման միավորն օգտագործելիս կունենանք անցանկալի արդյունքներ։
տոկոսով – տոկոսը հաշվարկվում է ըստ տառատեսակի չափի։ Եթե font-size-ը հավասար է 40px-ի, իսկ line-height-ը՝ 150%-ի, ապա տողի բարձրությունը կլինի` 40×150/100 = 60px:
Ի՞նչ է նշանակում « տողային բլոկներ » տերմինը(box-line): Բլոկ տեսակի էլեմենտում տեքստի ամեն տողը գտնվում է տողային բլոկում։ Այսպիսով բլոկ տեսակի էլեմենտում նշված տեքստն ունի այնքան բլոկներ, որքան ունի տողեր։ Ամեն բլոկը կարող է պարունակել թե սովորական սիմվոլներ և թե տող տեսակի էլեմենտներ, որոնք բաղկացած են պարունակությունից և վիրտուալ դատարկ տարածությունից, որը նույնպես սահմանվում է line-height-ով։
Եթե բլոկ տեսակի էլեմենտի տողային բլոկը պարունակում է տող տեսակի էլեմենտ, ապա տվյալ տողային բլոկի բարձրությունը կարող է որոշվել՝ հաշվի առնելով տող տեսակի էլեմենտի վիրտուալ դատարկ տարածությունը՝ line-height-ը։
p {
font-size: 50px;
line-height: 55px;
}
span {
font-size: 50px;
}
.a {
line-height: 55px;
}
.b {
line-height: 100px;
}
.c {
line-height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Lorem ipsum dolor amet.
<span class="a">Ba</span>
<span class="b">Ba</span>
<span class="c">Ba</span>
Nullam eget pulvinar enim.
</p>
</body>
</html>
կամ՝
Երկրորդ նկարում « p » էլեմենտը(որը ցուցադրված է սև շրջանակով) բաղկացած է տողային բլոկներից(որոնք ցուցադրված են սպիտակ շրջանակներով՝ երեք հատ)։
Առաջին և երրորդ տողային բլոկները պարունակում են միայն սիմվոլներ(որոնք ցուցադրված են գծավոր շրջանակներում), իսկ երկրորդը՝ սիմվոլներ և երեք տող տեսակի էլեմենտներ(որոնք ցուցադրված են սև փոքր շրջանակներում)։
Մեջտեղի տող տեսակի էլեմենտի line-height-ը հավասար է 100px-ի, ուստի « p » էլեմենտի երեք տողային բլոկներից միայն երկրորդը կլինի 100px, առաջինն ու երրորդը՝ 55px:
font-family
font-family – սահմանում է տեքստի տառատեսակը։
Կարելի է տառատեսակը նշել երկու տարբերակով՝
1-տառատեսակի անվանումը, օրինակ՝ Arial կամ Helvetica և այլն։ Եթե տառատեսակի անվանումը պարունակում է պրոբելներ, ապա այն անհրաժեշտ է վերցնել միատեսակ կամ երկտեսակ չակերտների մեջ։ Օրինակ՝ “ Times New Roman ” :
2-տառատեսակի ընտանիքի անվանումը։ Բոլոր նրանք, որոնք պատկանում են որևէ ընտանիքի, ունեն ընդհանուր հատկանիշներ։ Տառատեսակի այն ընտանիքները, որոնք կթվարկվեն այստեղ, հասանելի են ցանկացած օպերացիոն համակարգում։ Դրանք են՝ serif, sans-serif, cursive, fantasy, monospace:
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | Բրաուզերի կողմից կանխադրված տառատեսակը․ հիմնականում՝ « Times New Roman »։ |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
serif – այն տառատեսակներն են, որոնց սիմվոլներն ավարտվում են փոքր գծիկներով։
sans-serif – այն տառատեսակներն են, որոնց սիմվոլներն առանց գծիկների է։
cursive – այն տառատեսակներն են, որոնք քիչ թե շատ նման են ձեռագիր տեքստի։
fantasy – այն տառատեսակներն են, որոնք ունեն գեղարվեստական կամ դեկորատիվ տեսք։
monospace – այն տառատեսակներն են, որոնց բոլոր սիմվոլների լայնությունը հավասար է։
.span01 {
font-family: serif;
}
.span02 {
font-family: sans-serif;
}
.span03 {
font-family: cursive;
}
.span04 {
font-family: fantasy;
}
.span05 {
font-family: monospace;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<span class="span01">Hello World!!!</span>
<br />
<span class="span02">Hello World!!!</span>
<br />
<span class="span03">Hello World!!!</span>
<br />
<span class="span04">Hello World!!!</span>
<br />
<span class="span05">Hello World!!!</span>
</body>
</html>
Օրինակ կարող է բրաուզերի համար կանխադրված լինի « Times New Roman » տառատեսակը, որը պատկանում է serif ընատնիքին, իսկ « Helvetica »-ն՝ sans-serif -ին։
Ցանկացած օպերացիոն համակարգում կան թվարկված ընտանիքներին պատկանողներ, բայց ծրագրավորողը կարող է ինտերնետից ներբեռնել ստանդարտ մի տառատեսակ և այն օգտագործել վեբ էջում։
Այն, հավանական է, գտնվի որոշ հաճախորդների համակարգիչներում, բայց ոչ բոլորի։ Ուստի font-family-ի մեջ սահմանվում է մի քանի տառատեսակի անվանում կամ տառատեսակի ընտանիքի անվանումը՝ դրանք առանձնացելով ստորակետներով։
Այդպիսով, եթե բրաուզերը չգտնի առաջին տառատեսակը օգտվողի համակարգչում, ապա կդիմի հաջորդին և այդպես շարունակ։
Ցանկալի է ամենավերջում նշել font-family-ի ստանդարտ արժեքներից մեկը, որպեսզի թվարկվածներից ոչ մեկը չգտնելու դեպքում դիմի ստանդարտին։ Եթե չգտնվի ոչ մեկը, ապա բրաուզերը տեքստին կսահմանի օպերացիոն համակարգի համար կանխադրված տառատեսակը։
Եթե ծրագրավորողը տեքստի համար օգտագործել է յուրահատուկ տառատեսակ, որը ներբեռնել է ինտերնետից, այն կօգտագործվի @font-face– կանոնի միջոցով։ Դրա միջոցով սահմանվում է սերվերում գտնվող տառատեսակի հասցեն(Տես՝ @font-face)։
vertical-align
vertical-align – բլոկ տեսակի էլեմենտի տողային բլոկում(տես՝ line-eight) սահմանում է տող տեսակի էլեմենտի ուղղահայաց դիրքը, ինչպես նաև աղյուսակում արկղների պարունակության դիրքը։
Այս հատկությունն օգտագործվում է միայն տող տեսակի էլեմենտների համար, կամ այն բլոկ տեսակների, որոնց display հատկությունը հավասար է inline, inline-block և table-cell-ի։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | baseline |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Տող տեսակի էլեմենտների կամ աղյուսակի արկղների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Մինչ հիմնական արժեքներին անցնելը նայենք մի քանի օրինակների։
Տարբեր տառատեսակներ ունեն սիմվոլների տարբեր բարձրություններ(ինչպես նաև տարբեր չափի դատարկ տարածություն(content area) առանց line-height-ի), ուստի font-size-ը չի որոշում սիմվոլի բարձրությունը, այլ դրա բարձրությունը ըստ իր տառատեսակի, որոնք նույն չափով կարող են տարբերվել միմյանցից։
Բացի սիմվոլից և սիմվոլի դատարկ տարածությունից(content-area), կա նաև սիմվոլին սահմանած վիրտուալ դատարկ տարածություն, որը նշվում է line-height-ի միջոցով․ դա հաշվի է առնվում տողային բլոկի բարձրությունը որոշելու համար(line-box)։
Երբ տեքստում նշվում է որևէ հատված, կապույտ ֆոնի չափը սիմվոլի և դրա դատարկ տարածությունն է, կամ վիրտուալ դատարկ տարածությունը։
Առաջին օրինակում սիմվոլների և դրանց դատարկ տարածության օրինակն է՝ առանց վիրտուալ դատարկ տարածության, քանի որ line-height-ը հավասար է normal-ի՝
<span style=" font-size: 40px ; line-height: normal; ">Yellow red green </span>
Երկրորդ օրինակում line-height-ը հավասար է 100px-ի․ արդյունքում` սիմվոլը, դատարկ տարածությունը և վիրտուալ դատարկ տարածությունը՝
<span style=" font-size: 40px ; line-height: 100px; ">Yellow red green </span>
Ուստի սիմվոլները չեն սահմանափակվում միայն իրենց չափով, այլ ունեն նաև դատարկ տարածություն ըստ իրենց տառատեսակի։
Օրինակ, որտեղ պատկերված է տառատեսակի չափերի անվանումները՝
Իսկ հիմա՝ vertical-align-ի մասին։ Արժեքներն են՝
| Արժեքը | Նկարարությունը | Տեսքը |
|---|---|---|
baseline |
Էլեմենտի baseline-ը հավասարեցնում է ծնող էլեմենտի տեքստի baseline-ին։ |
 |
bottom |
Էլեմենտի bottom-ը հավասարեցնում է ծնող էլեմենտի bottom-ին։ |
 |
middle |
Էլեմենտի մեջտեղը հավասարեցնում է ծնող էլեմենտի baseline-ին և հետո բարձրացնում «x» սիմվոլի կեսի չափով։ |
 |
sub |
Էլեմենտի baseline-ը իջեցնում է, որպեսզի ստանա «subscript», այսինքն սիմվոլներ, որոնք օգտագործվում են մաթեմատիկայում, քիմիայում և այլն։ |
 |
super |
Էլեմենտի baseline-ը բարձրացնում է, որպեսզի ստանա «superscript», գործողությունը նույնն է, բայց վերևի կողմից։ |
 |
text-bottom |
Էլեմենտի bottom-ը հավասարեցնում է ծնող էլեմենտի տառատեսակի ներքևի մասին՝ descender-ին։ |
 |
text-top |
Էլեմենտի top-ը հավասարեցնում է ծնող էլեմենտի տառատեսակի վերևի մասին՝ ascender-ին։ |
 |
top |
Էլեմենտի top -ը հավասարեցնում է ծնող էլեմենտի top -ին։ |
 |
Աղյուսակի օրինակները կոդով՝
p {
line-height: 2;
}
.class01 {
vertical-align: baseline;
font-size: 12px;
line-height: 12px;
}
.class02 {
vertical-align: bottom;
font-size: 12px;
line-height: 12px;
}
.class03 {
vertical-align: middle;
font-size: 9px;
line-height: 9px;
}
.class04 {
vertical-align: sub;
font-size: 12px;
line-height: 12px;
}
.class05 {
vertical-align: super;
font-size: 12px;
line-height: 12px;
}
.class06 {
vertical-align: text-bottom;
font-size: 12px;
line-height: 12px;
}
.class07 {
vertical-align: text-top;
font-size: 12px;
line-height: 12px;
}
.class08 {
vertical-align: top;
font-size: 12px;
line-height: 12px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>yellow <span class="class01">green!!!</span></p>
<p>yellow <span class="class02">green!!!</span></p>
<p>yellow <span class="class03">green!!!</span></p>
<p>yellow <span class="class04">green!!!</span></p>
<p>yellow <span class="class05">green!!!</span></p>
<p>yellow <span class="class06">green!!!</span></p>
<p>yellow <span class="class07">green!!!</span></p>
<p>yellow <span class="class08">green!!!</span></p>
</body>
</html>
Որպես արժեք հնարավոր է նաև որևէ չափման միավոր օգտագործել կամ տոկոս՝
Չափման միավոր օգտագործելիս(օրինակ՝ px) դրական արժեքի դեպքում էլեմենտի baseline-ը բարձրանում է ծնողի baseline-ից վերև սահմանված px-ի չափով , իսկ բացասականի դեպքում իջնում է։
Տոկոս օգտագործելիս դրական արժեքի դեպքում էլեմենտի baseline-ը բարձրանում է ծնողի baseline-ից վերև սահմանված տոկոսի չափով, իսկ տոկոսը հաշվարկվում է ծնողի line-height-ի հիման վրա։ Բացասական արժեքի դեպում էլեմենտի baseline-ը իջնում է։
Օրինակ՝ .span01 { vertical-align: 45%; } p { line-height: 40px; } – այս դեպքում vertical-align-ը հավասար կլինի 45×40/100= 18px -ի, այսինքն էլեմենտի baseline-ը ծնողի baseline-ից կբարձրանա վերև 18px -ի չափով ։
font-kerning
font-kerning – Կերնինգը դա որոշակի տառերի համակցության ժամանակ դրանց հեռավորության սահմանումն է իրարից, որպեսզի պահպանվի տեքստում տառերի հարթ դասավորությունը(տվյալ տառերը իրար ավելի է մոտեցնում)։
Սա հատկապես վերաբերում է այն տառերին, որոնք պարունակում են թեք գծեր․ օրինակ՝ A, W, V և այլն։
Կերնինգի տվյալները պետք է լինեն տառատեսակում․ եթե վերջինս չի աջակցում այդ հնարավորությունը, font-kerning հատկությունը տեքստի վրա չի ազդի։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր տեսակի էլեմենտների հետ: |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
auto – բրաուզերը ինքն է որոշում տեքստի մեջ կերնինգի անհրաժեշտությունը։
Փոքր տառատեսակների դեպքում կերնինգն անջատվում է, իսկ մեծի դեպքում՝ ակտիվանում։
normal – եթե տառատեսակն աջակցում է կերնինգ, ապա այն օգտագործվում է։
none – բրաուզերը չի օգտագործում կերնինգը։
Կերնինգի օրինակներ․ վերևի շարքը առանց կերնինգի է, ներքևինը՝ կերնինգով․
p {
font-family: serif;
font-kerning: normal; /* կամ՝ none */
}
font-display
font-display – սահմանում է տառատեսակի ֆայլի ներբեռնման և ցուցադրման միջոցները։
Այս հատկությունն օգտագործվում է @font-face կանոնում։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | @font-face կանոնի հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
@font-face {
font-display: fallback;
}
Մինչ արժեքներին անցնելը ծանոթանանք մի քանի տերմինների։
1. Ո՞րն է տարբերությունը Unicode-ի և տառատեսակի:
Ունենք տարբեր հագուստներ, որոնք օգտագործում ենք տարբեր միջոցառումների կամ եղանակների ժամանակ։ Տառատեսակը հանդիսանում է հագուստը, որը բազմաթիվ է, իսկ Unicode-ը դա սիմվոլների հավաքածուն է, որոնք կարող են հագնել տարբեր տառատեսակներ։
Unicode-ը սիմվոլների և դրանց տասնորդական թվային արժեքների համակարգն է, որը պարունակում է 140.000 սիմվոլներ՝ տարբեր լեզուների մեծատառ և փոքրատառ տառեր, հիրոգլիֆներ, թվեր, մաթեմատիկական սիմվոլներ և այլն։
Ամեն սիմվոլ ունի իր տասնորդական թվային արժեքը: Օրինակ « € » սիմվոլինը ” 8364 ” -ն է, որի երկնիշ թվային արժեքը հետևյալն է՝ « 10000010101100 »։ Երկնիշ թվային արժեքը « թարգմանվում » է UTF-8 կոդավորման ստանդարտի միջոցով։ UTF-8-ը « թարգմանում » է սիմվոլի երկնիշ թվային արժեքը մի ալգորիթմով, որը բաղկացած է երեք փուլերից։
Արդյունքում կունենանք՝
| Unicode սիմվոլը | Տասնորդական թվային արժեքը | Երկնիշ թվային արժեքը | UTF-8 կոդավորման ստանդարտի արդյունքը, որը հասկանալի է դառնալու համակարգչային այն ծրագրին, որն աշխատում է UTF-8 կոդավորման ստանդարտով։ |
| € | 8364 | 10000010101100 | 11100010 10000010 10101100 |
2.Ի՞նչ է նշանակում fallback – ը։
Օրինակ՝ p { font-family: Joanna, Helvetica, Arial; }.
Նշվածը font-fallback-ի օրինակ է, որը նշանակում է՝ եթե բրաուզերը օգտվողի համակարգչում չգտնի Joanna տառատեսակը(font, шрифт), կփնտրի Helvetica-ն, հետո Arial-ը՝ տեքստը վերջնական ցուցադրելու համար։
Հավանական է լինի Joanna տառատեսակը, բայց տեքստը պարունակի սիմվոլներ, որոնք այն չունենա։ Ուստի անհասկանալի սիմվոլները բրաուզերը կփնտրի Helvetica -ում։
Եթե սիմվոլները չգտնվեն նշված երեքից ոչ մեկում, ապա բրաուզերը և օպերացիոն համակարգը գաղտնի կերպով կավելացնեն տառատեսակների մի շարք, որպեսզի վերջապես տեքստը ցուցադրեն ամբողջությամբ։
Եթե դա էլ չօգնի՝ չգտնվի տառատեսակ, որը կարողանա տվյալ Unicode սիմվոլը ցուցադրել, ապա դրա փոխարեն կցուցադրվի դատարկ քառակուսիներ( ☐☐☐☐☐☐ ):
Հիմա՝ font-display հատկության արժեքները՝
auto – բրաուզերն օգտագործում է տառատեսակի ներբեռնման ստանդարտ մեթոդը, որը հաճախ նման է block արժեքին։
block – բրաուզերը տեքստը թաքցնում է մինչ տառատեսակի ներբեռնման ավարտը։ Ավելի շուտ տեքստը դարձնում է թափանցիկ, և ներբեռնման ավարտից հետո այն ցուցադրում։ Այս տեսակին անվանում են նաև « Տեքստի անտեսանելի թարթում »( мигание невидимого текста – МНТ):
swap – բրաուզերը տեքստը ցուցադրում է font-fallback-ի տառատեսակով, մինչև կներբեռնվի այն մեկը, որով պիտի ցուցադրի։ Այս տեսակին անվանում են նաև «Չոճավորված տեքստի թարթում »( мигание нестилизованного текста):
fallback – auto-ի և swap-ի միջակայքում է։ Բրաուզերը թաքցնում է տեքստը մոտավորապես 100 մինիվարկյան․ եթե տառատեսակը չի հասցնում ներբեռնվել, ցուցադրվում է font-fallback-ը, մինչև ամբողջությամբ կներբեռնվի հիմնականը։
optional – ինչպես fallback-ը, բրաուզերը թաքցնում է տեքստը, որից հետո հարթ տեղափոխվում font-fallback-ի տառատեսակին, մինչև ամբողջությամբ կներբեռնվի հիմնականը։ Բացի այդ բրաուզերին թույլ է տալիս որոշել՝ արժե՞ ընդհանրապես օգտագործել հիմնականը։ Դրա որոշման համար հաշվի է առնվում օգտվողի համացանցի արագությունը։ Ինտերնետի թույլ արագության դեպքում հիմնական տառատեսակը չի ներբեռնվի։
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: swap;
}
body {
font-family: 'CustomFont', sans-serif;
}
Օրինակում բրաուզերը տեքստը կցուցադրի “sans-serif” -ով՝ մինչ հիմնական տառատեսակը ներբեռնելը(CustomFont)։
font-feature-settings font-variant-ligatures font-variant-caps font-variant-numeric font-variant-east-asian font-variant-position
սահմանում են OpenType(.otf) ֆորմատի տառատեսակների համար նախատեսված տպագրական ֆունկցիաները։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներից են՝
normal – ակտիվանում են OpenType տառատեսակների համար կանխադրված տպագրական ֆունկցիաները։
none – ամեն տեսակի տպագրական ֆունկցիաները դառնում են անակտիվ։
Հետևյալ օրինակում օգտագործված է OpenType(.otf) ֆորմատի տառատեսակ, որն աջակցում է font-variant-ligatures: common-ligatures ֆունկցիան(նույնն է ինչ՝ font-feature-settings: “liga”, “clig”; ), որը որոշակի տառեր կցում է իրար և կարծես դարձնում մեկ սիմվոլ։
Սա կոդի ամբողջ օրինակն է`
p {
font-family: myriad-pro-condensed, sans-serif;
font-weight: 200;
font-style: normal;
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: "liga", "clig";
-webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="https://use.typekit.net/vca2qbl.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>ff fi fl ffi</p>
</body>
</html>
Այս օրինակն անջատում է որոշակի տառերը իրար կցող ֆունկցիան․
p {
font-family: myriad-pro-condensed, sans-serif;
font-weight: 200;
font-style: normal;
font-variant-ligatures: no-common-ligatures;
color: black;
}
Այս մեկն ակտիվացնում է տվյալ ֆունկցիան.
p {
font-family: myriad-pro-condensed, sans-serif;
font-weight: 200;
font-style: normal;
font-variant-ligatures: common-ligatures;
color: #6ba42d;
}
Հետևյալ երկու օրինակները նույն գործողությունն են անում, ինչ վերը նշվածները:
Սա անջատում է ֆունկցիան`
p {
font-family: myriad-pro-condensed, sans-serif;
font-weight: 200;
font-style: normal;
font-feature-settings: "liga" 0, "clig" 0;
color: black;
}
Սա ակտիվացնում է ֆունկցիան`
p {
font-family: myriad-pro-condensed, sans-serif;
font-weight: 200;
font-style: normal;
font-feature-settings: "liga", "clig";
color: #6ba42d;
}
OpenType(.otf) ֆորմատի ֆունկցիաները բազմաթիվ են, բայց հասկանալու համար շատ պարզ։
Այստեղ կնշվեն վեբ կայքի հասցեներ, որոնք կարող եք ուսումնասիրել Opentype ֆորմատի տառատեսակների որոշակի ֆունկցիաներին ծանոթանալու համար։
Դրանք ավելի շատ դիզայներներին է անհրաժեշտ, իսկ ֆրոնթենդ ծրագրավորողներին, անհրաժեշտ է միայն ծանոթանալ դրանց ընդհանուր տեսքին ու կառուցվածքին։
Նախ կարդացեք հետևյալ էջը, որը կծանոթացնի ձեզ OpenType ֆորմատի հիմնական մասի հետ՝
https://helpx.adobe.com/ru/fonts/using/use-open-type-features.html#
Հետևյալ էջում դուք կարող եք ծանոթանալ OpenType ֆորմատի տառատեսակների որոշակի ֆունկցիաների հետ՝
https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html#liga
Ցանկության դեպքում կարող եք ինտերնետում որոնել և ավելի մանրամասն ծանոթանալ font-variant-ligatures(նույնն է ինչ՝ liga, clig և այլն), font-variant-caps(նույնն է ինչ՝ smcp, c2sc և այլն), font-variant-numeric(նույնն է ինչ՝ lnum, onum, ordn և այլն), font-variant-east-asian(նույնն է ինչ՝ jp78, jp83 և այլն), font-variant-position(նույնն է ինչ՝ sups, subs և այլն) հատկությունների հետ:
Հիմա պարտադիր գրանցվեք https://www.adobe.com/ կայքում և հետո նոր անցեք հետևյալ հասցեն՝
https://fonts.adobe.com/fonts
Նշված հասցեում կգտնեք OpenType ֆորմատի անվճար տառատեսակներ, որոնցով կարող եք անձամբ ուսումնասիրել OpenType ֆորմատի տառատեսակների ֆունկցիաները։
@font-feature-values
@font-feature-values – սահմանում է Opentype ֆունկցիաների ինդեքսների( համարների) անվանումները, որը հետագայում օգտագործվում է font-variant-alternates հատկության մեջ․ կարելի է ասել, որ այն սահմանում է փոփոխական( x=26 -այստեղ x-ը դառնում է փոփոխական․ օրինակ՝ Css-ը x տարեկան է ):
Opentype ֆորմատի ֆունկցիաներից մի քանիսը սիմվոլի համար կարող է սահմանել տարբեր տեսակի գլիֆներ(գլիֆը դա սիմվոլի ալտերնատիվ ոճային տարբերակն է)։ Դա կախված է տվյալ տառատեսակը ստեղծողից՝ արդյո՞ք նա սիմվոլի համար ստեղծել է լրացուցիչ գլիֆներ, թե ոչ։
Օրինակ՝ font-feature-settings: “ss02”, “ss05”; . սա նշանակում է, որ տեքստում օգտագործվելու են 02 և 05 խմբերի գլիֆները և այդ խմբերից յուրաքանչյուրն իր մեջ պարունակում է ոչ թե բոլոր սիմվոլների, այլ որոշակի սիմվոլների համար ոճային տարբերակներ՝ գլիֆներ։
Այսպիսով @font-feature-values-ը կարող է 02 և 05 ինդեքսների համար սահմանել անվանումներ։
Օրինակ՝
@font-feature-values Hypatia Sans Pro {
@styleset {
vochiTesakSS01: 02;
vochiTesakSS02: 05;
}
}
p {
font-variant-alternates: styleset(vochiTesakSS02);
}
Սա նշանակում է՝ Hypatia Sans Pro opentype տառատեսակի ss## ֆունկցիայի(եթե սահմանված է @styleset բլոկը, ապա ինդեքսները վերաբերում են ss##-ներին) 02 և 05 ինդեքսների համար սահմանված են vochiTesakSS01 և vochiTesakSS02 անվանումները։
@font-feature-values կանոնի մեջ սահմանված հատկությունները կոչվում են ֆունկցիայի արժեքների բլոկներ։ Այդ բլոկները ստանում են @-կանոնի ձևը։ Դրանք տառատեսակի, դրա ֆունկցիաների, այդ ֆունկցիաների ինդեքսներին սահմանած անվանումների և ինդեքսների ամբողջական սահմանումն են։
Այսպիսով @font-feature-values կանոնը կարող է պարունակել հետևյալ բլոկները՝
@swash – opentype ֆունկցիաների մեջ վերաբերում է “swsh”, “cswh” ֆունկցիային։ Օրինակ՝ vochiTesakSwash: 2:
@annotation – opentype ֆունկցիաների մեջ վերաբերում է “nalt” ֆունկցիային։ Օրինակ՝ vochiTesakNalt: 2 :
@ornaments – opentype ֆունկցիաների մեջ վերաբերում է “ornm” ֆունկցիային։ Օրինակ՝ vochiTesakOrnm: 2 :
@stylistic – opentype ֆունկցիաների մեջ վերաբերում է “salt” ֆունկցիային։ Օրինակ՝ vochiTesakSalt: 2 4 12 16 , որը կնշանակի՝ ss02, ss04, ss12, ss16:
@styleset – opentype ֆունկցիաների մեջ վերաբերում է “ss##” ֆունկցիային։ Օրինակ՝ vochiTesakSS: 2 :
@character-variant – opentype ֆունկցիաների մեջ վերաբերում է “cv##” ֆունկցիային։ Բլոկի մեջ նշվում է երկու տարբերակով`
1․ օրինակ՝ vochiTesakChar01: 3 – սա կնշանակի cv03=1 ֆունկցիան,
2․ օրինակ՝ vochiTesakChar01: 2 4 – սա կնշանակի cv02=4 ֆունկցիան։
Չենք կարող ունենալ հետևյալ տարբերակը՝ vochiTesakChar01: 2 4 5։
@font-feature-values կանոնը ներկայումս աջակցվում է միայն FireFox բրաուզերի կողմից։
font-variant-alternates
font-variant-alternates – թույլ է տալիս վերահսկել ալտերնատիվ գլիֆների ընտրությունը տվյալ տեքստի opentype ֆորմատի տառատեսակի սիմվոլների համար։
Շատ արժեքներ կախված են տառատեսակից՝ արդյո՞ք դիզայները սիմվոլի համար ստեղծել է որևէ գլիֆ թե ոչ։
Վերը նշված @font-feature-values կանոնի միջոցով որևէ ինդեքսի սահմանած անվանումն օգտագործվում է հենց այստեղ՝ font-variant-alternates – ի մեջ հետևյալ կերպ՝
@font-feature-values Hypatia Sans Pro {
@styleset {
vochiTesakSS01: 02;
vochiTesakSS02: 05;
}
}
p {
font-variant-alternates: styleset(vochiTesakSS02);
}
Սա նշանակում է՝ Hypatia Sans Pro opentype ֆորմատի տառատեսակի ss## ֆունկցիայի(@styleset) 02 և 05 ինդեքսների համար սահմանված են vochiTesakSS01 և vochiTesakSS02 անվանումները, որոնցից vochiTesakSS02 -ը font-variant-alternates: styleset()–ի միջոցով սահմանվել է <p> էլեմենտի համար։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
font-variant-alternates –ի մեջ օգտագործվող հնարավոր արժեքներն են՝
normal – նշում է, որ ներքևում թվարկած ֆունկցիաներից ոչ մեկն ակտիվացված չէ։
stylistic() – համապատասխանում է “salt” ֆունկցիային և ինդեքսի միջոցով ակտիվացնում է սիմվոլների ալտերնատիվ տարբերակը։
historical-forms – համապատասխանում է “hist” ֆունկցիային և ակտիվացնում է տառատեսակի պատմական ոճի տարբերակը:
styleset() – համապատասխանում է “ss##” ֆունկցիային և ինդեքսի միջոցով ակտիվացնում է սիմվոլների խմբին շատ համահունչ գլիֆների խումբը։
character-variant() – համապատասխանում է “cv##” ֆունկցիային և ինդեքսի միջոցով ակտիվացնում է սիմվոլների խմբի ալտերնատիվ տարբերակը։ Նման է styleset() տեսակին, բայց սրա առաջարկած գլիֆները կարող են համահունչ չլինել տվյալ տառատեսակի սիմվոլներին։
swash() -համապատասխանում է “swsh”, “cswh” ֆունկցիային. օգտագործվում է ձեռագիր տառատեսակների մեջ և առաջարկում է ձեռագիր տառատեսակի դեկորատիվ տարբերակը:
ornaments() – համապատասխանում է “ornm” ֆունկցիային և ինդեքսի միջոցով ակտիվացնում է զարդապատկերները։
annotation() – համապատասխանում է “nalt” ֆունկցիային և ինդեքսի միջոցով ակտիվացնում է տվյալ ինդեքսին համապատասխան պատկերով գլիֆները։ Օրինակ գլիֆները կարող են ցուցադրվել շրջանակների, քառակուսիների կլոր փակագծերի, կլորացված ուղղանկյունների մեջ։
font-variant-alternates ատկությունը ներկայումս աջակցվում է միայն FireFox բրաուզերի կողմից։
Եթե համակարգչում ունեք CorelDraw ծրագիրը, ապա դրանով կարող եք ծանոթանալ տառատեսակի ոճային տարբերակներին՝
font-language-override
font-language-override – վերահսկում է գլիֆների օգտագործումը՝ կախված այն լեզվից, որն օգտագործված է տեքստում։
Կանխադրված է, որ բրաուզերն օգտագործի <html>-ի lang ատրիբուտի արժեքը(օրինակ՝ <html lang=”en”>), որպեսզի տեքստը ցուցադրի ատրիբուտում նշված լեզվին համապատասխան կանոններով և գլիֆներով և այս դեպքում « en »-ը անգլերենն է։
Անգլերեն տարբերակում նորմալ է տառատեսակի մեջ օգտագործել որևէ լիգատուրա(որոշակի իրար հաջորդող սիմվոլներ կցում է միմյանց և կարծես դառնում է մեկ սիմվոլ․ օրինակ « fi » իրար հաջորդող սիմվոլները կցվում են իրար և արդյունքում կորչում է « i » տառի կետը)։ Բայց « fi » -ի համար սխալ կլինի լիգատուրա օգտագործել օրինակ թուրքերեն տեքստում, քանի որ այնտեղ « i » տառը կետով այլ իմաստ ունի, իսկ առանց կետի՝ այլ։
font-language-override –ի միջոցով հնարավոր է <html lang=”en”>-ը վերասահմանել և զգուշացնել, որ այդ էլեմենտում օգտագործված է թուրքերեն տեքստ և անհրաժեշտ է հետևել թուրքերեն լեզվի կանոններին, այդպիսով խուսափելով նաև անցանկալի լիգատուրաներից և օգտագործել լեզվին համապատասխան գլիֆներ։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
normal – նշում է բրաուզերին, որ պետք է օգտագործի տառատեսակի գլիֆները, որոնք համապատասխանում են այն լեզվին, որը սահմանված է lang ատրիբուտի մեջ։
երկրիԿոդըՄեծատառերով –նշում է բրաուզերին, որ պետք է օգտագործի տառատեսակի գլիֆները, որոնք համապատասխանում են այն լեզվին, որը սահմանված է այստեղ, օրինակ՝ font-language-override: “HYE” – համապատասխանում է հայերենին։
Երկրների կոդերի ցանկը ըստ opentype-ի կարող ենք գտնել հետևյալ հասցեով՝
https://docs.microsoft.com/en-us/typography/opentype/spec/languagetags
Html Կոդի ընդհանուր օրինակը՝
@font-face {
font-family: 'Bree';
src: url('BreeCYR-Book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
q {
font-family: 'Bree';
font-language-override: "TRK"; /*այստեղ պիտի օգտագործվի թուրքերենի կանոնները։*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<q> Hello fi ...</q>
</body>
</html>
Տեքստը ցուցադրված է առանց font-language-override հատկության՝
q {
font-family: 'Bree';
}
Տեքստը ցուցադրված է font-language-override հատկության հետ՝
q {
font-family: 'Bree';
font-language-override: "TRK";
}
font-language-override հատկությունը ներկայումս աջակցվում է միայն FireFox բրաուզերի կողմից։
font-optical-sizing
Թույլ է տալիս բրաուզերին տեքստի տարբեր չափերի դեպքում(font-size) այն առավելագույնս ընթեռնելի դարձնել։
Օրինակ, եթե տեքստը փոքր է սահմանված, ապա այն կցուցադրվի սովորականից մի փոքր մեծ և մուգ, իսկ մեծ չափի դեպքում այն կարող է ավելի նուրբ տեսք ստանալ։
Այս հատկությունը կաշխատի միայն տառատեսակների հետ, որոնք աջակցում են « օպտիկական » չափին։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
auto – թույլ է տալիս բրաուզերին տառատեսակի տարբեր չափերի դեպքում տեքստը առավելագույնս ընթերնելի դարձնել:
none – թույլ չի տալիս բրաուզերին փոփոխել տեքստը։
Հետևյալ օրինակի տառատեսակն աջակցում է « օպտիկական » չափին․
@font-face {
font-family: 'RobotoDelta';
src: url('RobotoDelta-VF.ttf') format('truetype');
}
q {
font-family: 'RobotoDelta';
font-size: 50px;
font-weight: 900;
font-optical-sizing: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<q>Hello World!!!</q>
</body>
</html>
font-size-adjust size-adjust
Հնարավորություն է տալիս վերահսկել պահեստային տառատեսակի չափը, եթե հիմնականն անհասանելի է։
Երբ font-family -ում նշված առաջին տառատեսակը չգտնվի օգտվողի համակարգչում, բրաուզերը կօգտագործի երկրորդ տարբերակը(font-family: Times, Helvetica, Arial ; ) և այլն։
Նմանատիպ դեպքերում հնարավոր է փոխվի նաև տեքստի չափերը, քանի որ տառատեսակները font-size-ի նույն արժեքով ունեն տարբեր չափեր։
Փոփոխման պատճառով տեքստը հնարավոր է դառնա դժվար ընթեռնելի։ font-size-adjust հատկության միջոցով տարբեր տառատեսակների փոքրատառերը(x -բարձրությունը) հավասարվում են հիմնական տառատեսակի փոքրատառերին։
size-adjust դեսկրիպտորը(այսինքն հատկություն, որը վերաբերում է որևէ @կանոնի, տվյալ դեպքում @font-face-ին) նախատեսված է նույն խնդրի համար ինչ font-size-adjust-ը։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
x և cap բարձրությունը նկարում՝
Կողմերի հարաբերակցությունը(aspect-ratio) որոշվում է՝ տառատեսակի x-բարձրությունը բաժանելով տառատեսակի չափին՝ font-size-ին։
Տառատեսակների x-բարձրությունը տարբեր են լինում, ուստի կողմերի հարաբերակցությունն էլ դրանց տարբեր է։
Եթե կողմերի հարաբերակցությունը տարբեր է, տառատեսակների ընդհանուր չափն էլ տարբեր կլինի նույն font-size -ի դեպքում:
Օրինակ՝
p {
font-family: Verdana, 'Times New Roman', sans-serif;
font-size: 40px;
}
Verdana տառատեսակի x-բարձրությունը հավասար է 25px -ի, իսկ ‘Times New Roman’ -ինը՝ 20px -ի։
Verdana -ի կողմերի հարաբերակցությունը կլինի՝ 25/40= 0.625 -ի;
‘Times New Roman‘ -ի կողմերի հարաբերակցությունը կլինի՝ 20/40= 0.5 -ի;
Եթե Verdana տառատեսակն անհասանելի լինի, կօգտագործվի ‘Times New Roman’ -ը, ուստի font-size-adjust -ը պետք է սահմանվի 0.625 -ի, որպեսզի բրաուզերը տեղյակ լինի հիմնական տառատեսակի կողմերի հարաբերակցությանը։
Այդպիսով երկու տառատեսակի դեպքում էլ փոքրատառերի x-բարձրությունը հավասար կդառնան։
p {
font-family: Verdana, 'Times New Roman', sans-serif;
font-size: 40px;
font-size-adjust: 0.625;
}
‘Times New Roman’ -ի համար տառատեսակի վերջնական չափը կորոշվի հետևյալ բանաձևով՝
с = ( а / а’ ) * s -որտեղ՝
s = տառատեսակի չափը(font-size: 40px)
a = ‘Verdana’ տառատեսակի կողմերի հարաբերակցությունը(font-size-adjust: 0.625).
a’ = ‘Times New Roman’ տառատեսակի կողմերի հարաբերակցությունը(0.5)
c = տառատեսակի վերջնական չափը՝ 40x(0.625/0.5) = 50px -ի։
Տառատեսակի կողմերի հարաբերակցության հաշվարկը կարող է փոխվել՝ x-բարձրությունից cap-բարձրությանը։
Կանխադրված է x-բարձրությունը․ փոխելու համար font-size-adjust -ում անհրաժեշտ է ավելացնել նաև հատուկ բառերից մեկը՝
p {
font-family: Verdana, "Times New Roman", sans-serif;
font-size: 40px;
font-size-adjust: ex-height 0.625;
/*նույնն է ինչ font-size-adjust: 0.625 */
}
cap -բարձրության դեպքում՝
p {
font-family: Verdana, "Times New Roman", sans-serif;
font-size: 40px;
font-size-adjust: cap-height 0.825;
/*cap-բարձրությունը՝ 33px, ուստի՝ 33/40=0.825 */
}
Արժեքներն են՝
none – տառատեսակի չափը կսահմանվի ըստ font-size հատկության։
որևէԹիվ – որևէ թիվ 0- ից 1 ընկած միջակայքում։
ex-height –կհաշվարկվի փոքրատառ « x-բարձրության » չափով։ Բրաուզերի կողմից կանխադրված է այս տարբերակը։
cap-height – կհաշվարկվի մեծատառ « cap-բարձրության » չափով։
ch-width – կհաշվարկվի « 0 » սիմվոլի լայնության չափով։
ic-width կամ ic-height – հիրոգլիֆ տեսակի սիմվոլների համար կհաշվարկվի « 水 » հիրոգլիֆի լայնության կամ բարձրության չափով։
Երկու տարբեր տառատեսակների օրինակ, որտեղ փոքրատառերի չափերը տարբերվում են՝
.spanVerdana {
font-family: verdana;
font-size: 40px;
color: orange;
}
.spanPapyrus {
font-family: papyrus;
font-size: 40px;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HAYTI</title>
<link rel="stylesheet" href="style.css" />
</head>
<body style="background: black;">
<span class="spanVerdana"> Symbols x,a,u,m etc. HAYTI. </span>
<span class="spanPapyrus"> Symbols x,a,u,m etc. HAYTI. </span>
</body>
</html>
Ինչպես տեսնում ենք՝ փոքրատառ x տեսակի սիմվոլները տարբերվում են բարձրությամբ։
Երկրորդ տառատեսակի փոքրատառերի չափը հավասարեցնենք առաջինի չափին՝
.spanVerdana {
font-family: verdana;
font-size: 40px;
color: orange;
}
.spanPapyrus {
font-family: papyrus;
font-size-adjust: 0.625;
font-size: 40px;
color: red;
}
font-size-adjust հատկությունը ներկայումս աջակցվում է միայն FireFox բրաուզերի կողմից։
font-synthesis
font-synthesis – թույլատրում կամ արգելում է բրաուզերին տեքստի տեսքի փոփոխությունը(մգություն, թեքություն, փոքր մեծատառեր)։
Կան տառատեսակներ, որոնք ունեն սիմվոլների մգության կամ թեքության սեփական տարբերակները․
բայց կան այնպիսիները, որոնք չունեն իրենց սեփականը։
Դրանց համար բրաուզերը կարող է սիմվոլների արհեստական մգություն կամ թեքություն սահմանել, որը կատարվում է font-weight և font-style հատկությունների միջոցով։
font-synthesis -ով բրաուզերին թույլատրում կամ արգելում ենք տեքստը արհեստական փոփոխել։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | weight style |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
none – հերոգլիֆներ օգտագործող լեզուների համար ճիշտ չէ դրանց սիմվոլները արհեստական փոփոխել, քանի որ կդառնան անըթեռնելի իրենց մգության պատճառով։ none արժեքի միջոցով արգելում ենք բրաուզերին ավտոմատ փոփոխել տեքստի տեսքը։
weight – թույլ է տալիս բրաուզերին տեքստին արհեստական մգություն սահմանել։
style – թույլ է տալիս բրաուզերին տեքստին արհեստական թեքություն սահմանել։
small-caps – թույլ է տալիս, որ բրաուզերը տեքստի բոլոր սիմվոլները մեծատառ դարձնի։
body {
font-family: 'Fredericka the Great', serif;
font-size: 50px;
color: orange;
font-weight: bold;
font-style: italic;
}
.off {
font-synthesis: none;
}
.on {
font-synthesis: weight style;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link
href="//fonts.googleapis.com/css?family=Fredericka+the+Great"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<span class="off">Hello world!!!</span>
<span class="on">Hello world!!!</span>
</body>
</html>
font-variation-settings
font-variation-settings – փոփոխվող(կամ հարմարեցվող(вариативный / настраиваемый)) տառատեսակները OpenType ֆորմատի ավելի ընդարձակ տարբերակն է, որը թույլ է տալիս մեկ ֆայլի միջոցով տարատեսակ ոճեր հաղորդել սիմվոլներին։
Սրանց որևէ ոճ հաղորդելու համար անհրաժեշտ չէ նշել տառատեսակի լրացուցիչ ֆայլեր(օրինակ՝ տառատեսակի ավելի մուգ կամ թեք տարբերակը)։ Այդ ամենը կատարվում է մեկ ֆայլի միջոցով՝ դրան սահմանելով տարբեր կարգավորումներ։
Ներկայումս աջակցվում է միայն FireFox բրաուզերի կողմից։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Այո |
| Կիրառվում են | Բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո – transform |
Այսպիսի տառատեսակի ֆունկցիաները երկու տեսակի են՝
Գրանցված ֆունկցիաներ – նրանք են, որոնք արժանի են համարվել ընդգրկվելու ստանդարտների ցանկում(սովորաբար սահմանվում են փոքրատառերով)։
Դրանցից են՝
| Ֆունկցիան | Դրան համարժեք CSS հատկությունը |
| “wght” 500 | font-weight: 500; |
| “wdth” 40 | font-stretch: 49%; |
| “slnt” 1 | font-style: oblique; |
| “ital” 1 | font-style: italic; |
| “opsz” 25 | font-optical-sizing: 25; |
Օգտատերի ֆունկցիաներ – այն ֆունկցիաներն են, որոնք պատրաստվում են տառատեսակը ստեղծողի կողմից։ Եթե ֆունկցիան ձեռք է բերում բավարար հայտնիություն, կարող է ընդգրկվել ստանդարտների ցանկում։
Օգտատերի ֆունկցիաները սովորաբար սահմանվում են մեծատառերով։
Տառատեսակը ստեղծողը կարող է չընդգրկել « ստանդարտ ֆունկցիաները»։ Եթե ընդգրկված չեն, տվյալ տառատեսակում չենք կարող օգտագործել դրանք։
Փոփոխվող տառատեսակի ֆունկցիոնալ հնարավորությունները տեսնելու համար կարող եք օգտվել հետևյալ կայքից, որը կպատկերի նաև դրանք օգտագործելուց հետո տառատեսակի վերջնական տեսքը՝
https://wakamaifondue.com/
p {
font-family: 'Decovar Alpha';
font-size: 40px;
font-variation-settings: "BLDA" 306.07, "TRMD" 553.9, "TRMC" 746.27,
"SKLD" 200.35, "TRML" 474.18, "SKLA" 117.16, "TRMF" 105.03, "TRMK"
105.03, "BLDB" 266.2, "WMX2" 472.44, "TRMB" 888.39, "TRMA" 621.49,
"SKLB" 637.09, "TRMG" 860.66, "TRME" 1000;
}
<!DOCTYPE html>
<html>
<head>
<title>HAYTI</title>
</head>
<body>
<p>The five boxing wizards jump quickly</p>
</body>
</html>
Armenian 
Russian