Ópoê 4:
Øpèôòû

Oãëaâëeíèe (â íoâoì oêíe)
Bíèç

B ýòoì ypoêe âû èçy÷èòe paáoòy co øpèôòaìè c ïoìoùüþ CSS. Mû paccìoòpèì òaêæe âoïpoc o òoì, ÷òo êoíêpeòíûé øpèôò, âûápaííûé äëÿ web-caéòa, ìoæeò oòoápaæaòücÿ òoëüêo â òoì cëy÷ae, ecëè ýòoò øpèôò ycòaíoâëeí ía PC, c êoòopoão âûïoëíÿeòcÿ äocòyï ê ýòoìy web-caéòy. Äaío oïècaíèe cëeäyþùèx CSS-câoécòâ:

Ceìeécòâo øpèôòa [font- family]

Câoécòâo font-family yêaçûâaeò ïpèopèòeòíûé cïècoê øpèôòoâ, ècïoëüçyeìûx äëÿ oòoápaæeíèÿ äaííoão ýëeìeíòa èëè web-còpaíèöû. Ecëè ïepâûé øpèôò cïècêa íe ycòaíoâëeí ía êoìïüþòepe, c êoòopoão âûïoëíÿeòcÿ äocòyï ê caéòy, èùeòcÿ cëeäyþùèé øpèôò cïècêa, ïoêa íe áyäeò íaéäeí ïoäxoäÿùèé.
Äëÿ êaòeãopèçaöèè øpèôòoâ ècïoëüçyþòcÿ äâa òèïa èìeí: èìÿ ceìeécòâa/family-name è oáùee/poäoâoe ceìeécòâo/generic family. Ýòè äâa òepìèía oáúÿcíÿþòcÿ äaëee.
Family-name
Ïpèìep family-name (÷acòo íaçûâaeìoe ïpocòo "øpèôò") ýòo, íaïpèìep,
"Arial",
"Times New Roman"
"Tahoma".
Generic family
Eão ìoæío ïpoùe oïècaòü êaê ãpyïïy family-names, èìeþùèx xapaêòepíûe oáùèe ÷epòû. Ïpèìep - sans-serif, íaáop øpèôòoâ áeç "çace÷eê/feet".
Ïpè yêaçaíèè øpèôòoâ äëÿ âaøeão web-caéòa âû, ecòecòâeíío, ía÷èíaeòe c ïpeäïo÷òèòeëüíoão øpèôòa, a çaòeì ïepe÷ècëÿeòe aëüòepíaòèâíûe. Peêoìeíäyeì â êoíöe cïècêa yêaçûâaòü poäoâoe èìÿ. Toãäa còpaíèöa, êaê ìèíèìyì, áyäeò oòoápaæeía øpèôòoì òoão æe ceìeécòâa, ecëè oòcyòcòâyþò âce cïeöèôèöèpoâaííûe êoíêpeòíûe øpèôòû.
Cïècoê øpèôòoâ ìoæeò âûãëÿäeòü òaê:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Çaãoëoâêè <h1> áyäyò oòoápaæaòücÿ øpèôòoì "Arial". Ecëè oí íe ycòaíoâëeí ía ïoëüçoâaòeëücêoé ìaøèíe, áyäeò ècïoëüçoâaòücÿ "Verdana". Ecëè íeäocòyïíû oáa øpèôòa, äëÿ ïoêaça çaãoëoâêoâ áyäeò ècïoëüçoâaí øpèôò ceìeécòâa sans-serif.
Oápaòèòe âíèìaíèe, ÷òo èìÿ øpèôòa "Times New Roman" coäepæèò ïpoáeëû, ïoýòoìy yêaçaío â äâoéíûx êaâû÷êax.

Còèëü øpèôòa [font-style]

Câoécòâo font-style oïpeäeëÿeò normal , italic èëè oblique . B ïpèìepe âce çaãoëoâêè <h2> áyäyò ïoêaçaíû êypcèâoì italic.

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font- style: italic; }

Bapèaíò øpèôòa [font- variant]

Câoécòâo font-variant ècïoëüçyeòcÿ äëÿ âûáopa ìeæäy âapèaíòaìè normal è small-caps . Øpèôò small- caps ècïoëüçyeò ìaëûe çaãëaâíûe áyêâû (upper case) âìecòo áyêâ íèæíeão peãècòpa.

Ecëè font-variant èìeeò çía÷eíèe small-caps , a øpèôò small-caps íeäocòyïeí, ápayçep, cêopee âceão, oòoápaçèò òeêcò áyêâaìè âepxíeão peãècòpa.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Bec øpèôòa [font-weight]

Câoécòâo font-weight oïècûâaeò, íacêoëüêo òoëcòûì, èëè "òÿæeëûì", äoëæeí oòoápaæaòücÿ øpèôò. Øpèôò ìoæeò áûòü normal èëè bold . Heêoòopûe ápayçepû ïoääepæèâaþò äaæe ÷ècëoâûe çía÷eíèÿ 100-900 (â coòíÿx) äëÿ oïècaíèÿ âeca øpèôòa.

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

Paçìep øpèôòa [font-size]

Paçìep øpèôòa ycòaíaâëèâaeòcÿ câoécòâoì font-size.
Ècïoëüçyþòcÿ paçëè÷íûe eäèíèöû èçìepeíèÿ (íaïpèìep, ïèêceëû è ïpoöeíòû) äëÿ oïècaíèÿ paçìepa øpèôòa. B äaííoì y÷eáíèêe ìû áyäeì ècïoëüçoâaòü caìûe pacïpocòpaíeííûe è yäoáíûe eäèíèöû èçìepeíèÿ. Boò ïpèìepû:

h1 {font-size: 30px ;}
h2 {font- size: 12pt ;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Ecòü oäío oòëè÷èe â yêaçaííûx eäèíèöax èçìepeíèÿ: ' px ' è ' pt ' äaþò aácoëþòíoe çía÷eíèe paçìepa øpèôòa, a ' % ' è ' em ' - oòíocèòeëüíûe. Míoãèe ïoëüçoâaòeëè íe ìoãyò ÷èòaòü ìeëêèé òeêcò, ïo paçíûì ïpè÷èíaì. ×òoáû cäeëaòü âaø web-caéò äocòyïíûì äëÿ âcex , âû äoëæíû ècïoëüçoâaòü oòíocèòeëüíûe çía÷eíèÿ, òaêèe êaê ' % ' èëè ' em '.

Boò èëëþcòpaöèÿ òoão, êaê íacòpoèòü paçìep øpèôòa â Mozilla Firefox è Internet Explorer. Ïoïpoáyéòe caìè - ïpeêpacíoe câoécòâo, êaê âû ïoëaãaeòe?

Coêpaùeííaÿ çaïècü [font]

Ècïoëüçyÿ coêpaùeííyþ çaïècü font, ìoæío yêaçûâaòü âce câoécòâa øpèôòa â oäíoì còèëeâoì ïpaâèëe.
Haïpèìep, âoò ÷eòûpe còpoêè oïècaíèÿ câoécòâ øpèôòa äëÿ <p>:

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

Ècïoëüçyÿ coêpaùeííyþ çaïècü, êoä ìoæío yïpocòèòü:

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

Ïopÿäoê câoécòâ font òaêoâ:

Peçþìe

Bû ïoçíaêoìèëècü c íeêoòopûìè câoécòâaìè øpèôòoâ. Ïoìíèòe, ÷òo oäíoé èç âaæíûx âoçìoæíocòeé ïpè ècïoëüçoâaíèè CSS ÿâëÿeòcÿ òo, ÷òo âû ìoæeòe èçìeíèòü øpèôò äëÿ âceão web-caéòa âceão ça íecêoëüêo ìèíyò. CSS ýêoíoìèò âpeìÿ è oáëeã÷aeò âaì æèçíü. B cëeäyþùeì ypoêe ìû paçáepeìcÿ c òeêcòoì.

Cëeäyþùèé ypoê: Teêcò

Haçaä

Bâepx