ßê âèêîðèñòîâóâàòè ñâ³é øðèôò íà ñàéò³

Ïðè ðîçðîáö³ äèçàéíó ñàéòó ÷àñòî âèíèêຠíåîáõ³äí³ñòü â ï³äêëþ÷åíí³ ñòîðîíí³õ øðèôò³â.  CSS äàíà ìîæëèâ³ñòü çä³éñíþºòüñÿ ÷åðåç àòðèáóò font-face. Ôàéë ñàìîãî øðèôòó ïîâèíåí ìàòè ñòàíäàðòíå äëÿ Windows ðîçøèðåííÿ TrueType (ttf) àáî OpenType (otf).
ßê âèêîðèñòîâóâàòè ñâ³é øðèôò íà ñàéò³

Âàì çíàäîáèòüñÿ

  • - ôàéë øðèôòó TrueType àáî OpenType.

²íñòðóêö³ÿ

1
Ñòâîð³òü ôàéë òàáëèö³ êàñêàäíèõ ñòèë³â (.css) ³ â³äêðèéòå éîãî çà äîïîìîãîþ Áëîêíîòà ÿê çâè÷àéíèé òåêñòîâèé ôàéë. Äàë³ âïèø³òü ðÿäêè: @ font-face {font-family: "Íàçâà øðèôòó" -src: url ( "øëÿõ äî ôàéëó øðèôòó") - font-size: 12px; } Çíà÷åííÿ ïàðàìåòðà font-family ìຠçá³ãàòèñÿ ç íàçâîþ âàøîãî øðèôòó. ßê url ìîæíà âêàçóâàòè ÿê àáñîëþòíèé, òàê ³ â³äíîñíèé øëÿõ äî ôàéëó ttf àáî otf. Ó font-size âêàæ³òü ðîçì³ð áóêâ â ïóíêòàõ, â³äñîòêàõ àáî ï³êñåëÿõ. ³äïîâ³äíî äî ñïåöèô³êàö³¿ CSS âè äîäàòêîâî ìîæåòå çàäàòè áóäü-ÿê³ äîñòóïí³ ïàðàìåòðè íàêðåñëåííÿ (íàïðèêëàä, font-weight àáî font-style).


2
Çáåðåæ³òü ôàéë. Òåïåð ï³äêëþ÷³òü éîãî äî âàøî¿ HTML-ñòîð³íö³ çà äîïîìîãîþ òåãà, ÿêèé çàçâè÷àé ïðîïèñóºòüñÿ â ðîçä³ë³: íå âèìàãຠçàêðèâຠäåñêðèïòîðà.
3
Äëÿ âèêîðèñòàííÿ øðèôòó íåîáõ³äíî ïðîïèñàòè äîäàòêîâ³ ïàðàìåòðè. Ñêîðèñòàéòåñÿ ïàðàìåòðîì font-family: h1 {font-family: "íàçâà ï³äêëþ÷åíîãî øðèôòó" -} Òåïåð âñå çàãîëîâêè ïåðøîãî ð³âíÿ áóäóòü íàïèñàí³ ë³òåðàìè ç âàøîãî ôàéëó. ßêùî âè õî÷åòå íàäàòè âëàñíå íàêðåñëåííÿ âñ³ì ñëîâàìè íà ñàéò³, òî âêàæ³òü ïàðàìåòð font-family àíàëîã³÷íèì ÷èíîì â body: body {font-family: "³ì`ÿ øðèôòó" -}
4
Òàêîæ âè ìîæåòå ñòâîðèòè ïåâíèé êëàñ êîðèñòóâàòèñÿ íèì ïðè íåîáõ³äíîñò³ âæå â ñàìîìó HTML: .myfont {font-family: "íàçâó øðèôòó" -} Ó êîä³ ñòîð³íêè öå áóäå âèãëÿäàòè òàê:

Òåìà 1

ïðîñòèé çàãîëîâîê

Çâåðí³òü óâàãó
Íå âñ³ áðàóçåðè çìîæóòü îäíàêîâî äîáðå â³äîáðàçèòè ñòîðîíí³é øðèôò. Äëÿ äèçàéíó íàéêðàùå êîðèñòóâàòèñÿ ñòàíäàðòíèìè ìîæëèâîñòÿìè, âäàâàòèñÿ äî çîâí³øí³õ ôàéë³â âàðòî ò³ëüêè â ðàç³ êðàéíüî¿ íåîáõ³äíîñò³. Òàêîæ âîíè ìîæóòü ìàòè á³ëüøó âàãó, à çíà÷èòü ÷àñ çàâàíòàæåííÿ ñàéòó ìîæå çíà÷íî çá³ëüøèòèñÿ, ³ îñîáëèâî öå áóäå ïîì³òíî ïðè ïîâ³ëüíîìó ³íòåðíåò-ç`ºäíàíí³.


Óâàãà, ò³ëüêè ÑÜÎÃÎÄͲ!


Îö³í³òü, áóäü ëàñêà ñòàòòþ
Âñüîãî ãîëîñ³â: 120
Óâàãà, ò³ëüêè ÑÜÎÃÎÄͲ!