css pripojenie písma ttf. Nastaviť písma v css

Písma zohrávajú obrovskú úlohu v dizajne webových stránok. Ten istý text napísaný rôznymi typmi písma môže na človeka vyvolať opačné dojmy.

Presvedčte sa sami:

Niektoré fonty vyzerajú presvedčivejšie, iné pútavejšie.

Ale ako pripojiť ľubovoľné písma k stránke a použiť ich kdekoľvek chcete?

V tomto článku I Ukážem vám 3 spôsoby, s ktorým môžete na svoju stránku pripojiť akékoľvek, najrozmanitejšie a neštandardné fonty. A je jedno, ktorý CMS používate: WordPress, Joomla, Drupal alebo Open Cart.

Uvidíte, že pri pripájaní fontov na stránku nie je nič zložité.

Naučíš sa:

Metóda číslo 1. Rýchle pripojenie písiem na stránku WordPress (náročnosť: ⭐ ⭐ ⭐)

Ak je na vašom webe nainštalovaná prémiová téma, môžete pripojiť písma za 2 minúty.

Napríklad:

Chcete zmeniť písmo názvov článkov. Pre to:

1. Na správcovskom paneli prejdite do časti Možnosti motívu. V závislosti od vašej šablóny sa táto sekcia môže nazývať trochu inak, ale význam je vždy rovnaký – „nastavenia témy“.

2. Prejdite do časti Typografia.

3. Vyberte prvok, ktorého písmo chcete zmeniť (nadpisy, odseky):

Ak váš web beží na inom nástroji alebo váš motív takéto nastavenia neposkytuje, prejdite na nasledujúcu metódu.

Metóda číslo 2. Využite silu Google Fonts
(náročnosť: ⭐ ⭐ ⭐ ⭐)

Počuli ste už o Google Fonts? V skratke ide o službu, s ktorou môžete na svoju stránku prepojiť viac ako 700 fontov.

Krok 1. Prejdite na oficiálnu webovú stránku služby.

Krok 2. Nájdite písma, ktoré vám vyhovujú v kolekcii písiem Google. V pravom menu môžete zúžiť kruh nastavením jazyka, štýlu a obľúbenosti písma:

Ak chcete, aby služba zobrazovala písma s podporou ruského jazyka, vyberte v položke Jazyky azbuku.

Krok 3 Povedzme, že sa vám páči písmo Roboto. Kliknite na ikonu „+“:

Kliknutím na znamienko „+“ môžete pridať ľubovoľné písma.

Krok 4. Potom musíte rozbaliť košík s vybranými typmi písma:

Keď prejdete na kartu Prispôsobiť, môžete si vybrať štýly a jazyky. Pokiaľ ide o štýly, odporúčam vám vybrať si štandardnú sadu - normálne (400), kurzíva (400 kurzíva), tučné (700) a kurzíva-tučné (tučné 700 kurzíva):

Ale ak chcete iba tučné písmo (pre nadpisy), vyberte len to.

Pamätajte, že čím viac štýlov vyberiete, tým väčšia bude veľkosť nahrávaného súboru.

Aby ste nespomalili rýchlosť načítania stránky, voľte čo najmenej štýlov písma.

Krok 5. Vráťte sa do sekcie Vložiť a vyberte kartu @IMPORT. Potom skopírujte riadok kódu obsahujúci „@import“ a prilepte ho na prvý riadok súboru CSS vašej lokality:

Ak máte web WordPress, súbor CSS sa s najväčšou pravdepodobnosťou nachádza tu: wp_content/themes/"yourtheme"/css/... V priečinku CSS sa s najväčšou pravdepodobnosťou bude nachádzať súbor Fonts, do ktorého musíte preniesť kód na vloženie z Googlu:

Nezáleží na tom, na akom CMS beží vaša stránka, stačí vložiť kód a všetko bude 👌

Keďže najskôr sa musia načítať fonty, až potom všetko ostatné – umiestnite kód spojenia fontu na úplný začiatok súboru CSS.

V rovnakom súbore CSS môžete definovať písmo pre určité prvky lokality.

Napríklad:

Aby som dal font Roboto všetkým odsekom, napíšem toto: p ( rodina fontov: Roboto;)

Metóda číslo 3. Pripojenie vlastného písma pomocou CSS (náročnosť: ⭐ ⭐ ⭐ ⭐ ⭐)

Ak ste dostatočne zruční, najlepšie urobíte, ak si fonty zahrniete sami prostredníctvom CSS. V tomto prípade budú fonty umiestnené na vašom serveri v špeciálnom priečinku. Najprv ich však musíte niekde zohnať.

Kde získať webové písma pre stránku

Vedeli ste, že na používanie webových fontov si musíte zakúpiť samostatnú licenciu?

Pripojte písma pomocou bezplatnej licencie. Najjednoduchší spôsob, ako ich nájsť, je pomocou služby Fontsquirrel, čo urobíme.

Krok 1. Prejdite na oficiálnu webovú stránku služby

Krok 2. V pravej ponuke v časti Jazyky vyberte cyriliku.

Krok 3. Nájdite vhodné písmo. Dávajte pozor na počet fontov.

Napríklad, ak existujú 4 štýly, napíšu sa 4 štýly:

Označenie štýlov písma - normálne (400/bežné), kurzíva (kurzíva), tučné (700/tučné), tučné kurzíva (700 kurzíva).

Krok 5. Kliknite na názov písma a prejdite na stránku nastavení.

Krok 6. Prejdite do časti Webfont Kit. Vyberte všetky formáty písma a kliknite na Stiahnuť @FONT-FACE KIT. Ak sú k dispozícii iba 1-2 formáty, nie je to strašidelné.

Ak chcete zahrnúť písma, použite @Font-face

Prostredníctvom direktívy @font-face môžete na svoju stránku zahrnúť jedno alebo viacero písiem. Ale táto metóda má svoje klady a zápory.

výhody:

  • Prostredníctvom CSS môžete zahrnúť fonty ľubovoľného formátu: ttf, otf, woff, svg.
  • Súbory písiem budú umiestnené na vašom serveri - nebudete závislí od služieb tretích strán.

mínusy:

  • Pre správne pripojenie písma pre každý štýl je potrebné napísať samostatný kód.
  • Bez znalosti CSS je ľahké sa zmiasť.

Môžete len skopírovať môj hotový kód a tam, kde potrebujete umiestniť svoje hodnoty.

Krok 1. Preneste stiahnuté súbory písiem na svoju stránku. Môžete to urobiť cez ovládací panel vášho hostingu alebo cez FTP.

Navrhujem vytvoriť priečinok s písmami v rovnakom adresári ako váš súbor CSS. Presuňte všetky súbory písiem do tohto priečinka.

Krok 2. Na úplný začiatok súboru CSS napíšte nasledujúci záznam:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") formát("eot"),
url("../fonts/WebFont.woff") formát("woff"),
url("../fonts/WebFont.ttf") formát("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
váha písma: normálna
štýl písma: normálny
}

Kde MyWebFont je názov písma a hodnota vlastnosti src (údaje v zátvorkách v úvodzovkách) je ich umiestnenie (relatívne odkazy). Musíme špecifikovať každý štýl zvlášť.

Keďže najprv zahrnieme normálne písmo, nastavíme vlastnosti font-weight a font-style na normálne.

Krok 3. Pri pripájaní štýlu kurzívy napíšte nasledovné:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") formát("eot"),
url("../fonts/WebFont-Italic.woff") formát("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
váha písma: normálna
štýl písma: kurzíva;
}

Tam, kde je všetko rovnaké, len vlastnosti font-style sme dali hodnotu kurzíva.

Krok 4. Ak chcete povoliť tučný štýl, pridajte nasledujúci kód:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") formát("eot"),
url("../fonts/WebFont-Bold.woff") formát("woff"),
url("../fonts/WebFont-Bold.ttf") formát("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
váha písma: tučné;
štýl písma: normálny
}

Kde nastavíme vlastnosť font-weight na tučné.

Uistite sa, že ste pre každý štýl určili správne umiestnenie súborov písiem.

Krok 5. Ak chcete povoliť tučnú kurzívu, napíšte nasledovné:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") formát("eot"),
url("../fonts/WebFont-Italic-Bold.woff") formát("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") formát("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
váha písma: tučné;
štýl písma: kurzíva;
}

No a je to :) Práve ste pridali 4 štýly písma na vašu stránku.

Je tu ale jedna poznámka – toto spojenie písiem sa nebude správne zobrazovať v prehliadači Internet Explorer 8. Útechou je, že ich zostalo veľmi málo.

Ako pripojiť fonty pre stránky na rôznych CMS

Nezáleží na tom, na akom engine je vaša stránka (WordPress, Joomla, Drupal, Opencart) – ak máte prístup k súboru CSS, môžete fonty prepojiť buď cez Google Fonts, alebo ich nahrať na váš server cez Fontsquirrel.

Dobre, teraz je po všetkom. Ak si myslíte, že tento článok môže byť užitočný pre iných správcov webu, zdieľajte ho na sociálnych sieťach.

Ako aj:

Prihláste sa na odber môjho newslettera aby ste nezmeškali užitočné a zaujímavé blogové príspevky.

Mnoho dizajnérov, ktorí vytvárajú seriózne a zaujímavé rozloženia, má k dispozícii množstvo jedinečných a krásnych písiem. Vďaka takýmto fontom získava dizajn šmrnc a exkluzivitu. Neštandardné písma sa však zobrazia iba na počítači, na ktorom sú už nainštalované, a preto, aby s nimi mohol správne pracovať, musí vám dizajnér poskytnúť všetky písma, ktoré používa vo svojom rozložení. Pretože pri rozvrhnutí rozloženia budete musieť tieto písma nainštalovať do počítača. Používateľ vašej stránky si však nestiahne všetky písma pre seba a nenainštaluje si ich do svojho počítača, takže musíte prinútiť prehliadač, aby si potrebné písma vytiahol sám. Tu pomôže pravidlo, stále existujú možnosti použiť Cufon alebo stiahnuť písma z Google Webfonts alebo Fontsquirrel, ale Google Webfonts a Fontsquirrel nemusia potrebovať písmo, takže zvážte najlepšiu možnosť - pripojenie jedinečných písem pomocou @font-face.

Najjednoduchší spôsob, ako zahrnúť písmo, je napísať ho do šablóny štýlov:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, bezpätkové ;)

Tu je názov písma 'PF Din CompPro' a potom môžete toto písmo určiť pre potrebné prvky lokality a fonts/pfdintextcomppro-medium-webfont.ttf je cesta k vášmu písmu, ktoré sa nachádza v priečinku s písmami. dôležité, že v názve neboli v súbore písma žiadne medzery, radšej ich nahraďte pomlčkami.

Toto je najjednoduchší spôsob, ale jednoducho to nefunguje vo všetkých prehliadačoch a to je veľký problém.

Každý prehliadač podporuje svoje vlastné formáty písma:
pravý typ Fonty pre Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT písma pre Internet Explorer 4+
WOFF písma pre Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Písma pre iPad a iPhone

Preto budete musieť z jedného z vašich fontov vo formáte .ttf urobiť niekoľko ďalších rovnakých fontov, len v inom formáte. Tu sa hodí generátor fontov na fontsquirrel.com. Na tejto stránke nahrajte svoje písmo, vyberte optimálne nastavenia, začiarknite políčko potvrdzujúce legálnosť stiahnutého písma (niektoré písma stoja veľa peňazí a musíte mať povolenie na ich použitie), potom kliknite na tlačidlo „Stiahnuť svoju súpravu“ a dostanete požadovaný archív so všetkými formátmi vášho písma.

Stiahnite si všetky formáty svojich fontov z archívu, teoreticky sú to 4 súbory s príponami .eot, .svg, .ttf a .woff, skopírujte tieto súbory do priečinka fonts na vašom webe, súbor stylesheet.css bude tiež byť v archíve - v ňom už budú napísané všetky pravidlá pre pripojenie písiem, môžete ich bezpečne skopírovať do svojej šablóny štýlov, len nezabudnite zadať svoje cesty k súborom s písmom, napríklad do priečinka s písmami. Príklad toho, čo sa stalo na jednej z mojich stránok:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif; )

S týmito nastaveniami sa písma zobrazujú vo všetkých prehliadačoch, vrátane obľúbeného IE-7-8-9.

Ak používate neštandardné fonty pre cyriliku, teda pre ruské znaky a font sa na stránke zobrazuje nesprávne, potom môže pomôcť vygenerovanie fontu s pokročilými nastaveniami na stránke http://www.fontsquirrel.com/tools /webfont-generator stiahnite si svoje písmo a vyberte nastavenia "Expert". Je tam veľa nastavení, neviem všetko, ale pozorne čítajte a vyberajte potrebné a pre podporu azbuky vyberte v bloku Podnastavenia: časť Vlastné podnastavenie ... a zaškrtnite políčko Cyrilika a tiež označte jazyky a formáty, ktoré potrebujete.

Tu je príklad toho, čo som dostal:

Čo vlastne vidí návštevník stránky pri použití neštandardného webového písma v tejto fáze vývoja prehliadača?

Mnohí pri vytváraní stránky trpia. V mnohých prípadoch stránka vyžaduje použitie neštandardného písma alebo hieroglyfu. Stiahnete si krásny font a začnete rozkladať stránku, no nie všetci používatelia majú takéto fonty. Niektorí sa nehanbia a jednoducho vytvoria grafický súbor pomocou písma, ktoré potrebujú, no doplnková grafika sa nie vždy hodí na stránku a mnohí ich majú aj tak dosť. Existuje však jedna vhodná cesta von! Týmto východiskom je použitie technológie CSS (Cascading Style Sheets) alebo jednoducho „Cascading Style Sheets“. CSS je zvyčajne zahrnuté v samotnom vytvorenom súbore, stránke, ale súbor CSS (.css) môžete vytvoriť samostatne a pripojiť ho vložením medzi značku takto:

A pomocou CSS musíme automaticky stiahnuť a nainštalovať súbor s písmom True Type Font (.ttf), ale k inštalácii dôjde len vtedy, ak počítač používateľa nezistí požadované písmo. V prvom rade musíme špecifikovať umiestnenie písma. Za týmto účelom píšeme medzi značky a Takže:

Na svojej stránke teda môžete použiť akékoľvek písma. Radím vám však, aby ste neboli príliš sofistikovaní, pretože proces sťahovania a inštalácie písma tiež vyžaduje určitý čas. A ak vaše písmo samotné "váži" 500 kb alebo viac, potom sa v tomto prípade neodporúča používať.

Aby som bol úprimný, je to jednoduchšie a správnejšie:


Hoci webové fonty podporuje väčšina prehliadačov, v Opere sú od začiatku chybné. Na niektorých systémoch nefungujú vôbec, na tých, ktoré fungujú, stránky môžu alebo nemusia fungovať pri opätovnom načítaní:

Preto by sa to nemalo používať vo serióznych projektoch, iba v osobných blogoch a iba pre text väčší ako 30 pixelov, aby ste nevideli zázraky anti-aliasingu a kerningu.

Zároveň Google poskytuje - API na prepojenie neštandardných fontov medzi prehliadačmi.







Robte web krásnym!



Google rozpozná prehliadač a vydá preň platný CSS a písmo.

SÚVISIACE ČLÁNKY