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òâ:
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â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; }
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;}
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
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?
È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â:
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ò