css-fondi ühendus ttf. Fontide määramine css-is

Fontidel on veebisaidi kujundamisel suur roll. Üks ja sama tekst, mis on kirjutatud erinevates kirjatüüpides, võib jätta inimesest vastupidise mulje.

Vaata ise:

Mõned fondid näevad veenvamad, teised intrigeerivamad.

Kuid kuidas ühendada saidiga mis tahes fonte ja rakendada neid kõikjal, kus soovite?

Selles artiklis I Näitan teile 3 võimalust, millega saate oma saidiga ühendada mis tahes, kõige mitmekesisemad ja mittestandardsemad fondid. Ja pole vahet, millist CMS-i te kasutate: WordPress, Joomla, Drupal või Open Cart.

Näete, et fontide saidiga ühendamisel pole midagi keerulist.

Sa õpid:

Meetod number 1. Fontide kiire ühendamine WordPressi saidiga (raskused: ⭐ ⭐ ⭐)

Kui teie saidile on installitud esmaklassiline teema, saate fonte ühendada 2 minutiga.

Näiteks:

Soovite muuta oma artiklite pealkirjade fonti. Selle jaoks:

1. Minge administraatoripaneelil jaotisesse Teema valikud. Sõltuvalt teie mallist võib seda jaotist nimetada veidi erinevalt, kuid tähendus on alati sama - "teema sätted".

2. Minge jaotisse Tüpograafia.

3. Valige element, mille fonti soovite muuta (pealkirjad, lõigud):

Kui teie sait töötab mõnel muul mootoril või teie teema selliseid sätteid ei paku, minge järgmise meetodi juurde.

Meetod number 2. Kasutage Google Fontsi võimsust
(raskusaste: ⭐ ⭐ ⭐ ⭐)

Kas olete kunagi kuulnud Google Fontsist? Lühidalt öeldes on see teenus, mille abil saate oma saidiga ühendada rohkem kui 700 fonti.

1. samm. Minge teenuse ametlikule veebisaidile.

2. samm. Leidke Google'i fondikogust endale sobivad fondid. Parempoolses menüüs saate ringi kitsendada, määrates fondi keele, stiili ja populaarsuse:

Selleks, et teenus näitaks vene keele toega fonte, valige üksuses Keeled kirillitsa.

3. samm Oletame, et teile meeldib Roboto font. Klõpsake ikooni "+":

Saate lisada mis tahes fonte, klõpsates märgil "+".

Samm 4. Pärast seda peate ostukorvi laiendama valitud fontidega:

Vahekaardil Kohanda minnes saate valida stiile ja keeli. Stiilide osas soovitan teil valida standardkomplekti - tavaline (400), kaldkiri (400 kaldkiri), paks (700) ja kaldkiri-paks (paks 700 kaldkiri):

Aga kui soovite ainult paksu kirja (pealkirjade jaoks), valige ainult see.

Pidage meeles, et mida rohkem stiile valite, seda suurem on üleslaaditava faili suurus.

Et saidi laadimiskiirust mitte aeglustada, valige võimalikult vähe kirjastiile.

Samm 5. Naaske jaotisse Manusta ja valige vahekaart @IMPORT. Järgmisena kopeerige koodirida, mis sisaldab "@import" ja kleepige see oma saidi CSS-faili esimesele reale:

Kui teil on WordPressi sait, asub CSS-fail tõenäoliselt siin: wp_content/themes/"yourtheme"/css/... CSS-i kaustas on tõenäoliselt fail Fonts, kuhu peate Google'ilt manustamiskoodi üle kandma:

Pole tähtis, millises CMS-is teie sait töötab, lihtsalt kleepige kood ja kõik on olemas 👌

Kuna enne tuleb laadida fondid, siis alles siis kõik muu – aseta fondi ühenduse kood CSS-faili päris algusesse.

Saate määratleda saidi teatud elementide fondi samas CSS-failis.

Näiteks:

Kõigile lõikudele Roboto fondi andmiseks kirjutan järgmise: p ( font-family: Roboto;)

Meetod number 3. Kohandatud fondiühendus CSS-i abil (raskusaste: ⭐ ⭐ ⭐ ⭐ ⭐)

Kui olete piisavalt osav, on parim valik lisada fondid ise CSS-i kaudu. Sel juhul asuvad fondid teie serveris spetsiaalses kaustas. Kuid kõigepealt peate need kuskilt hankima.

Kust saada saidi jaoks veebifonte

Kas teadsite, et veebifontide kasutamiseks peate ostma eraldi litsentsi?

Ühendage fonte tasuta litsentsiga. Lihtsaim viis neid leida on Fontsquirrel teenusega, mida me ka teeme.

1. samm. Minge teenuse ametlikule veebisaidile

Samm 2. Parempoolses menüüs jaotises Keeled valige kirillitsa.

Samm 3. Leidke sobiv font. Pöörake tähelepanu fontide arvule.

Näiteks kui on 4 stiili, kirjutatakse 4 stiili:

Kirjastiilide tähistus - tavaline (400/tavaline), kaldkiri (kaldkiri), paks (700/paks), paks kaldkiri (700 kaldkiri).

Samm 5. Klõpsake fondi nimel ja minge seadete lehele.

Samm 6. Minge jaotisse Webfont Kit. Valige kõik fondivormingud ja klõpsake nuppu Laadi alla @FONT-FACE KIT. Kui saadaval on ainult 1-2 vormingut, pole see hirmutav.

Fontide kaasamiseks kasutage @Font-face

@font-face direktiivi kaudu saate oma saidile lisada ühe või mitu fonti. Kuid sellel meetodil on oma plussid ja miinused.

Plussid:

CSS-i kaudu saate lisada mis tahes vormingus fonte: ttf, otf, woff, svg.
Fondifailid asuvad teie serveris – te ei sõltu kolmandate osapoolte teenustest.

Miinused:

Iga stiili fondi õigeks ühendamiseks peate kirjutama eraldi koodi.
Ilma CSS-i tundmata on lihtne segadusse sattuda.

Saate lihtsalt kopeerida minu valmis koodi ja selle, kuhu peate oma väärtused panema.

1. samm. Teisaldage allalaaditud fondifailid oma saidile. Seda saab teha oma hostimise juhtpaneeli või FTP kaudu.

Soovitan luua fontide kausta CSS-failiga samasse kataloogi. Teisalda kõik fondifailid sellesse kausta.

2. samm. Kirjutage CSS-faili algusesse järgmine kirje:

@font-face(
fondiperekond: "MyWebFont";
src: url(../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") formaat("eot"),
url(../fonts/WebFont.woff") vorming ("woff"),
url(../fonts/WebFont.ttf") vorming ("truetype"),
url("../fonts/WebFont.svg#webfont") formaat("svg");
fondi kaal: tavaline
fondi stiil: tavaline
}

Kus MyWebFont on fondi nimi ja atribuudi src väärtus (andmed sulgudes jutumärkides) on nende asukoht (suhtelised lingid). Peame iga stiili eraldi täpsustama.

Kuna esmalt lisame tavalise fondi, määrasime fondi kaalu ja fondi stiili atribuudid normaalseks.

3. samm. Kaldkirja ühendamisel kirjutage järgmine:

@font-face(
fondiperekond: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url(../fonts/WebFont-Italic.eot?iefix") formaat("eot"),
url(../fonts/WebFont-Italic.woff") vorming ("woff"),
url(../fonts/WebFont-Italic.ttf") vorming ("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") formaat("svg");
fondi kaal: tavaline
fondi stiil: kaldkiri;
}

Kui kõik on sama, andsime ainult fondi stiili atribuudile väärtuse kaldkiri.

4. samm. Paksu stiili lubamiseks lisage järgmine kood:

@font-face(
fondiperekond: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") formaat("eot"),
url("../fonts/WebFont-Bold.woff") vorming ("woff"),
url(../fonts/WebFont-Bold.ttf") vorming ("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") formaat("svg");
fondi kaal: paks;
fondi stiil: tavaline
}

Kus me määrame atribuudi fondi kaalu paksuseks.

Määrake iga stiili jaoks kindlasti fondifailide õige asukoht.

5. samm. Paksus kaldkirja lubamiseks kirjutage järgmine tekst:

@font-face(
fondiperekond: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") formaat("eot"),
url(../fonts/WebFont-Italic-Bold.woff") vorming ("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") vorming ("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") formaat("svg");
fondi kaal: paks;
fondi stiil: kaldkiri;
}

Noh, see on kõik :) Lisasite just oma saidile 4 fondistiili.

Kuid on üks märkus – seda fontide seost ei kuvata õigesti brauseris Internet Explorer 8. Lohutuseks on see, et neid on alles väga vähe.

Kuidas ühendada erinevate CMS-i saitide jaoks fonte

Pole vahet, millise mootoriga su sait töötab (WordPress, Joomla, Drupal, Opencart) – kui sul on ligipääs CSS-failile, saad fonte ühendada kas Google Fontsi kaudu või laadides need oma serverisse Fontsquirreli kaudu.

OK, nüüd on kõik läbi. Kui arvate, et see artikkel võib olla kasulik teistele veebimeistritele, jagage seda sotsiaalvõrgustikes.

Sama hästi kui:

Liituge minu uudiskirjaga et mitte jääda ilma kasulikest ja huvitavatest blogipostitustest.

Paljudel disaineritel, kes loovad tõsiseid ja huvitavaid paigutusi, on saadaval palju ainulaadseid ja ilusaid fonte. Tänu sellistele fontidele saab disain oma särtsu ja eksklusiivsuse. Kuid mittestandardseid fonte kuvatakse ainult arvutis, kuhu need on juba installitud, seetõttu peab disainer nendega korralikult töötamiseks andma teile kõik küljenduses kasutatavad fondid. Kuna paigutuse kujundamisel peate need fondid arvutisse installima. Kuid teie saidi kasutaja ei laadi enda jaoks kõiki fonte alla ega installi neid oma arvutisse, seega peate panema brauseri vajalikud fondid ise üles tõmbama. Siin aitab reegel, endiselt on võimalusi kasutada Cufoni või laadida fonte Google Webfontsist või Fontsquirrelist, kuid Google Webfonts ja Fontsquirrel ei pruugi fonti vajada, seega kaaluge parimat võimalust - unikaalsete fontide ühendamist @font-face abil.

Lihtsaim viis fondi lisamiseks on kirjutada see stiililehele.

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( fondiperekond: "PF Din CompPro", Arial, sans-serif ;)

Siin on 'PF Din CompPro' fondi nimi ja seejärel saate määrata selle fondi vajalike saidielementide jaoks ja fonts/pfdintextcomppro-medium-webfont.ttf on tee teie fondi juurde, mis asub fontide kaustas. oluline, et nimes ei oleks fondifailis tühikuid, parem asendada need sidekriipsudega.

See on lihtsaim viis, kuid see lihtsalt ei tööta kõigis brauserites ja see on suur probleem.

Iga brauser toetab oma fondivorminguid:
õige tüüp Fondid Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonte Internet Explorer 4+ jaoks
WOFF fonte Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Fondid iPadile ja iPhone'ile

Seetõttu peate ühest oma fondist .ttf-vormingus tegema veel mitu samasugust fonti, kuid ainult erinevas vormingus. Siin on kasulik fontsquirrel.com fondigeneraator. Sellel lehel laadige üles oma font, valige Optimaalsed sätted, märkige ruut, mis kinnitab allalaaditud fondi seaduslikkust (mõned fondid maksavad palju raha ja teil peab olema nende kasutamiseks luba), seejärel klõpsake nuppu "Laadi oma komplekt alla". ja saate vajaliku arhiivi kõigi fondivormingutega.

Laadige arhiivist alla kõik oma fontide vormingud, teoreetiliselt on need 4 faili laienditega .eot, .svg, .ttf ja .woff, kopeerige need failid oma veebisaidi fontide kausta, ka stylesheet.css fail olge arhiivis - selles on kõik fontide ühendamise reeglid juba kirjutatud, saate need turvaliselt oma stiililehele kopeerida, lihtsalt ärge unustage määrata oma teed fondifailide juurde, näiteks fontide kausta. Näide ühel minu saidil juhtunust:

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

Nende sätetega kuvatakse fonte kõigis brauserites, sealhulgas armastatud IE-7-8-9.

Kui kasutate kirillitsa, st vene tähemärkide jaoks mittestandardseid fonte ja fonti kuvatakse saidil valesti, võib abiks olla täpsemate sätetega fondi genereerimine lehel http://www.fontsquirrel.com/tools /webfont-generator laadige oma font alla ja valige "Eksperdi" sätted. Seadeid on palju, ma ei tea kõike, aga lugege hoolikalt ja valige need, mida vajate, ja kirillitsa toetamiseks valige alamkomplekti plokist: jaotis Kohandatud alamseade ... ja märkige ruut kirillitsa ja ka märkige vajalikud keeled ja vormingud.

Siin on näide sellest, mida ma sain:

Mida näeb saidi külastaja tegelikult, kui kasutab selles brauseri arendamise etapis ebastandardset veebifondi?

Paljud kannatavad saidi loomisel. Paljudel juhtudel nõuab sait mittestandardse fondi või hieroglüüfi kasutamist. Laadite alla ilusa fondi ja hakkate lehte küljendama, kuid kõigil kasutajatel pole selliseid fonte. Mõni ei häbene ja loob lihtsalt vajaliku fondi abil graafilise faili, kuid lisagraafika ei mahu alati lehele ja paljudel on sellest nagunii piisavalt. Kuid on üks sobiv väljapääs! See väljapääs on kasutada CSS-tehnoloogiat (Cascading Style Sheets) või lihtsalt "Cascading Style Sheets". Tavaliselt sisaldub CSS loodud failis endas, lehel, kuid saate luua CSS-faili (.css) eraldi ja ühendada selle sildi vahele lisades. seega:

Ja CSS-i abiga peame automaatselt alla laadima ja installima True Type Font (.ttf) fondifaili, kuid installimine toimub ainult siis, kui kasutaja arvuti ei tuvasta vajalikku fonti. Kõigepealt peame täpsustama fondi asukoha. Selleks kirjutame siltide vahele ja Niisiis:

Seega saate oma saidil kasutada mis tahes fonte. Kuid ma soovitan teil mitte olla liiga kogenud, kuna fondi allalaadimise ja installimise protsess võtab samuti teatud aja. Ja kui teie font ise "kaalub" 500 kb või rohkem, siis pole seda antud juhul soovitatav kasutada.

Ausalt öeldes on seda lihtsam ja õigem teha:

Kuigi enamik brausereid toetab veebifonte, on need Operas algusest peale lollakad. Mõnes süsteemis ei tööta need üldse, töötavates lehtede uuesti laadimisel võivad need töötada või mitte:

Seetõttu ei tohiks seda kasutada tõsistes projektides, ainult isiklikes ajaveebides ja ainult suurema kui 30 piksli teksti puhul, et mitte näha antialiase ja kerningu imesid.

Samal ajal Google pakub - API mittestandardsete fontide brauseriüleseks ühendamiseks.