Et teada saada kõike ise - mitte lihtne, kuid väga huvitav. Kui teil on vähemalt pealiskaudne idee, kuidas sait töötab, siis on parem nende projekti ise rakendada. Samal ajal ei pääse sa lihtsalt raha raha, vaid ka õppida palju "kiipe", saladusi jne. Google fontide kasutamine tavaliselt ei meelita tähelepanu, kuigi tänu neile blogi võib muutuda huvitavamaks.
Teenus
Pikka aega ilmus internetis veebifontide suur teenus. See töötas välja Google. Kasutajad võiksid seda tasuta kasutada. Hoolimata asjaolust, et selle tüübi seadistus ei peeta superlejaks, on veel selliseid inimesi, kes tegid vigu ja ei suutnud teenusega toime tulla.
Selleks oli lihtne disain spetsiaalselt konstrueeritud. Nüüd töötage Google'i fontide fontidega lihtsamaks ja külastajate arv on suurenenud. Raamatukogu laiendatud. Eelmisel aastal toimus teenus ümberkujundamisteenus, mis kogunes palju positiivset tagasisidet. Nüüd inimesed on muutunud lihtsamaks ühendada fonte oma saitidele ja vaadata neid.
Välimus
Niisiis, neile, kes pole kunagi vana disainiga kohapeal olnud, peate muutustest üldise pildi tegema. Varem tundus teenus üsna massiliselt. Kõikjal olid paksud raamid, sinise meeldejäävad nupud, graafika ei olnud suurim luba. Kõik see on külastaja oluliselt mõjutanud.
Nüüd on arendajad keskendunud materiaalsele disainile. Kõik omandatud keerulised omadused. Välimus muutus lihtsamaks. Peen animatsioon, interaktiivsus muutus märgatavaks. Midagi muud ei häiriks soovitud Google'i fontide fondi valikule tähelepanu.
Mobiilseadmete ressursside mugav kohandamine. Loomulikult ei ole selline muutus uuenduste taustal palju märgatav, kuid võttes arvesse eelmise versiooni vead on "manna taevase" innukas kasutajatele.
Võimalus
Sageli sarnaseid teenuseid kasutavad disainerid. Vaatamata nende kogemustele ja professionaalsusele töötavad nad ka visualiseerimisega. Rediisija tutvustas sarnasemaid funktsioone, mis võimaldaksid teil kombineerida eelnevalt, mida on vaja rakendada hiljem oma projekti.
Seetõttu on probleem, kuidas üks font kombineeritakse erineva värvi ja kolmanda taustaga, kadus kadunud. Ettevõte lisas rohkem tööriistu ja paleti universaalsete toonidega, mis võimaldaks eksperimenteerida ja teada saada, kuidas üks või muu font vaatab konkreetse värvi.
Valitud
Google Fonte Fonte Service pakub kasutajatele valitud valikute kasutamist. Vahekaardil spetsiaalses vahekaardil on kogutud stiilide kogum, mida arendaja soovitab kasutada. Need kogud on teiste seas eraldatud. Neid on välja töötanud Google'i ja kolmanda osapoole asutuste eksperdid. Enamik neist on teatud stiil ja eriline filosoofia.
Vaade
Üks olulisi muudatusi mõjutasid otseselt fontide valikut. On arusaadav, et varasem kasutaja nägi mõned joonise lisanuppude ja suur sinine, mis lisas font kogumise. Üldiselt tundus see valik hea, kuid mitte alati poksil oli stiiliga üsna hea lahendus ja seetõttu oli lihtne kindlaks teha, kuidas font näeb välja.
Oli küsimusi ja neid täiendavaid nuppe, mis vähe olid tuntud esmapilgul. See oli vaja kas neile tuua või kasutada. Nüüd on see muutunud enam-vähem selgeks. On täiendavaid funktsioone:
- Valige konkreetne ettepanek, lõik või oma tekstielement.
- Fondi küllastumise katsed.
- Fast seadistus suurused kasutades liugurit.
Muide, Google'i fontide suuruse muutus on muutunud kohandatavaks, kuna ainult üks näide muutus ja mitte kõik lehel. Kasutajate vanas versioonis võib seda üle kanda lehekülje ühest servast teise ja uues viibite lihtsalt selle näitena, mis on reguleeritav.
Ühendus
Kui olete valmis kasutama seda teenust, võite proovida ühendada fonte oma ressursiga. Linkide saamise protsess on universaalne. Probleemid võivad tekkida sõltuvalt teie CMS-süsteemist. Igaüks kasutab oma teed. Seetõttu peavad erinevate projektide jaoks valima individuaalsed valikud.
Me vaatame, kuidas saada linki Google'i fontide ühendamiseks. Sa pead minema Google'i fontide ametlikule veebisaidile. Seal sa vaatad kataloogi stiilide ja valida üks, mis kõige paremini sobib. Selleks klõpsa tema kõrval "Plusik". Pärast seda, kui font lisatakse lehe allosas spetsiaalse plokile.
Klõpsake sellel seadmel ja seadistage see. Siin saate valida pealdi ja vajalik tähestik. Kui vajate Google'i fontide kirillitsat, siis märgistage kirillitsat. Pärast linki moodustumist. Seda võib leida samas aknas asuvas vahekaardil. See on piisav lihtsalt selle kopeerimiseks või täieliku HTML-koodi abil.
Tavaliselt on saidi seaded on font ja värvid. On tavalisi võimalusi ja saate laiendada. Neil on Google'i fontide jaoks eraldi võimalus. Kui teil on vaja alla laadida fonte läbi Supreme Webfonts plugin.
Populaarsed valikud
Loomulikult on raske hinnata, millised stiilid on paremad, eriti saidi erinevate teemade jaoks. Teie saidi loomisel pidage meeles, et ta ei taha sulle meeldida, vaid teie publikule. Seetõttu on parem vaadata konkurentide saite.
Tavaliselt ei kommertsressursse keegi häirib stiile. Lõppude lõpuks, kui näete Google Chrome'i fonti veebipoes, ei ole tõenäoliselt tähelepanu sellele tähelepanu pöörama. Aga kui teil on blogi, siis tõenäoliselt midagi, mida sa võid meeldivad ja midagi vastupidi, häirib.
Google Fonte on valmistanud palju kogusid, kus on populaarseid stiile. Näiteks lobster armastus kasutada üksikute plokkide teksti. On raske lugeda, kui kogu artikkel on kirjutatud sellises julgetes kaldkirjas. Aga see tundub hea lisas ja hinnapakkumisi.
Bad Script on ka võimalus blogide jaoks. Kursiivne tüüp raske lugeda suur hulk teksti, kuid saate eraldada peamine idee. Stiil imiteerib käsitsi kirjutatud käekirja. JURA Normal 400 on kirillitsa huvitav valik. Autor väidab, et see on EUROSTIL SEN-SERIP-perekonnast. See tundub tõesti väga hea ja tal on mitu variante.
Peatüki esimene osa on pühendunud CSS-fontidega tuttavale tuttavale. Sellel lehel saate teada, kuidas ühendada fonte CSS-is, mis on Web Fonte ja kuidas nendega töötada, mida fontide formaadid on Google'i fontide kasutamine. Kõigepealt kaaluge lihtsat näidet CSS-fondi ühendamisest:
P (font-perekond: Verdana;)
See väike koodi tükis tähendab seda kõiki silte
Verdana font rakendatakse. Font-perekondlik vara kehtestab, millist fondi või fondipere kasutatakse. Selle stiili õige kuvamise kasutaja brauseris sõltub sellest, kas määratud font on selle arvutisse installitud. Meie puhul, kui Verdana font puudub kasutaja arvutis, kuvab brauser vaikimisi fondi.
Ühel ajal pidid disainerid täiendavalt täpsustama mitu varufoonide puhul, kui kasutaja arvuti puudub. Oletame, et soovite teksti väljastada Verdana fondiga ja paigaldada Trebucchet MS, Genfi fonte ja mis tahes font ilma Serifsiga. See on sel viisil kirjutatud:
P (font-perekond: Verdana, "Trebuchet MS", Genf, Sans-Serif;)
Selle koodi töötlemisel kontrollib brauser kõigepealt Verdana fondi olemasolu kasutaja arvutis. Kui font on olemas, sisu silte
Kuvatakse see font. Kui font puudub, kontrollib brauser fondi - trebucheti MS-i loendi järgneva järgneva kohaloleku olemasolu. Kui see font puudub, kontrollitakse Genfi järgmist fondi. Kui kasutaja arvutis ei ole Genfi, valib brauser teise kättesaadava fondi ilma Serifsita ja kuvatakse teksti.
Märge: Koodis salvestati Trebucheti pr Font nime jutumärkidesse. Sa pead võtma nime font topelt- või üksikute jutumärkidena, kui on ruumi.
Mis puudub font Serif (Serif) ja ilma (San-Serif), saate lugeda Wikipedia lehel.
Web fonte
Ülaltoodud meetod fontide kasutamisel on suur miinus - olete piiratud fontide koguses. Sa pead olema rahul ainult nende valikuvõimaluste, mis on kõige tõenäolisemalt paigaldatud enamiku arvutitesse.
Kuidas saab suurendada fontide valikut, et muuta lehekülje disaini üksikisik, lisage originaalsus? Web fonte tulevad päästmiseks. Lugege peatükki ja saate teada, kuidas nendega töötada.
Niisiis, et kuvada soovitud font kasutaja brauseris, vajame seda fondi oma arvutisse laadimiseks. Selle rakendamiseks on üsna lihtne. See meetod fontide ühendamisega CSS-ile avab enne disainerite enne piisavalt võimalusi. Aga tasub mainida lusikatäis mesi barrel: Esiteks, mitte iga brauser toetab teatud fondi formaadis (mis põhjustab, et font ei ilmu), ja teiseks, kui faili fontil on palju kaalu, See võib aeglustada allalaadimislehte.
Toetusvorming
Kuidas tegeleda failivormingu ebaõnnestumise probleemiga? Vaatame tabelit, kus kuvatakse kõige populaarsemad fondiformaadid ja teada, milliseid brausereid toetavad:
Märge: Saate alati teada saada paikset teavet fontide formaadi toetuse kohta Catiuse.com-is. Otsingu-stringis peate sisestama vormi nime (näiteks TTF).
Kui olete orienteeritud kaasaegsete brauseritega, kasutate lihtsalt TTF-fondi vormingut - kõige levinum ja kasutatud. Juhul, kui teil on vaja mitme fondi vorminguid, saate kasutada ühest formaadist spetsiaalseid online-konvertereid ja seejärel ühendage kõik failid omakorda. Seega saab brauser valida fondi formaat, millega ta toimib.
Me ühendame veebi fondi @ font-nägu
Oletame, et teil on oma unikaalne font, mida nimetatakse Myuniquefontiks TTF-vormingus ja soovite veebilehe põhiteksti kuvamiseks selle fondi kuvamiseks. Esimene asi, mida tuleb teha, on kopeerida fondifaili kausta, kus kõik muud saidi failid asuvad. Selleks, et mitte luua segadust, saate luua eraldi kausta spetsiaalselt fontidele, kutsudes seda näiteks fontideks.
@ font-nägu (font-nägu: Myuniquefont; SRC: URL ("fonte / Myuniquefont.TTF");)
Sellisel juhul mängib font-perekondlik vara: sellega me määrame nime fontile, seejärel kasutame seda nime stiili kirjutamisel:
P (font-perekond: Myuniquefont;)
Teine rida näitab tee fondifaili. Meie näites fail on Myuniquefont.TTF asub fontide kausta. Teil on URL võib erineda.
Fonts Google'i fondid.
Google võimaldab hõlpsasti ühendada iga fontide kogumise fontide fondi. Kõik, mida pead tegema, et alustada soovitud fondi kasutamist, - määrake Google'i fontide lehel mitmeid seadeid, pärast selle fondi spetsiaalset linki kopeerimist ja lisage oma veebidokumentile.
Märge: Kogu Google'i fontide kogumine on saadaval kohapeal Google'i fondid. . Lehekülg saate kasutada erinevaid filtreid, et otsida fonte kategooriate, paksuse, tähestiku järgi.
Allpool kirjeldame iga fondiühenduse samm Google'ist. Et mõista, mida me räägime, valige Google'i fontide lehel olev font ja avage see klõpsates nuppu Quick-i kasutamine.
1. samm: valige luure
Esimene asi valitud fondi lehel kuvatakse võimalusi selle pealkirja, samuti kiirusmõõturi ikoon, mis tähendab midagi muud kui fontide laadimise kiirus. Mida rohkem stiile teie valitud fondi jaoks, seda rohkem aega selle allalaadimisel on vaja. Seetõttu on soovitatav valida ainult need disainilahendused, mida kavatsetakse kasutada.
2. samm: valige tähestik
Järgmisena on leheküljel võimalus valida tähemärkide kogum: Latina, kirillitsa jne. Sõltuvalt fontidest ei pruugi olla saadaval kõik tähestiku variandid. Sarnaselt eelmise elemendiga on parem panna märkimisväärse tähestiku vastas.
3. samm: lisage koodi kohale
Esimene viis tähendab linki lisamist Google'i serverile HTML-koodile, kust font allalaaditud. Sa pead kopeerima valmisükki koodi ja asetage selle sildid.
Teie HTML-dokumendis. Näide:...
Teine võimalus on ühendada font @import direktiivi. Lõpetatud kood asub lõike 3 teises vahekaardil valitud Google'i fondi leheküljel. See tuleb lisada oma stiililehe algusesse (vastasel juhul ei ole fail imporditud). Koodeks näeb välja selline:
@import URL (http://fonts.Gogleapis.com/css?family\u003droboto&subset\u003dlatin.cyrillic);
Esimese meetodi eripära on see, et peate iga leheküljele lisama fontile lingi, kus seda kavatsetakse kasutada. Väikese arvu lehekülgedega saitidel on lihtne rakendada suurte ressursside problemaatiline. Teine meetod on mugav, sest koodi saab asetada välise stiililehe algusesse ja seejärel kõik leheküljed, millele see tabel on ühendatud, saab soovitud fondi, mis laaditakse, kasutades @import direktiivi.
4. samm: loo stiil
Pärast eelmiste sammude rakendamist saate alustada fondi rakendamist. Kuna CSS reegel on kirjutatud, olete juba varem näinud:
P (font-nägu: "roboto", sans-serif;)
Kui esimeses etapis valisite mitu disainilahendusi (näiteks Bold 700 julge versioon lisati), siis kolmandas etapis muudab kood veidi:
@Import URL (http://fonts.Gogleapis.com/css?family\u003droboto: 700,400 ja alamhulk \u003d latin.cyrillic);
Siis anda fondi rasva insult, kirjutada CSS-stiilis sellisel viisil:
P (font-nägu: "roboto", sans-serif; fondi kaal: 700;)
Märge: Google'i fontides kasutatakse fondi küllastumise tähistamiseks ainult tavapäraseid ühikut 100 kuni 900. Niisiis on normaalne disain (vaikimisi) võrdne väärtuse 400 (normaalse) ja standardpulber võrdub 700-ga (julge).
Google'i fontide teenuse peamised eelised on:
- kasutuslihtsus (isegi uustulnuk suudab teenusega toime tulla ja kõik vajalikud kood tekivad automaatselt - see jääb ainult selle kopeerimiseks);
- fontide kättesaadavus (nende maksmiseks ei ole vaja);
- kõik kasutatud fondi formaadid on varustatud (see tähendab, et iga brauser saab üles laadida täpselt fondi vormingu, millega see toimib).
Teenuse puudujääkide hulgas ei ole väga suur hulk fonte, eriti kirillitsat. Muide, Internetis on ka teisi sarnaseid teenuseid, näiteks Typekit (makstud).
TULEMUSED
Täna on meil mitmeid võimalusi originaalsete ja mittestandardite fontide ühendamiseks veebilehtedele. Igal neist meetoditest on oma plusse ja miinuseid. Milline valik on parem kasutada, peate ise määrama. Sageli sõltub see olukorrast ja erinevatel juhtudel võivad erinevad lähenemisviisid olla kasulikud. Selles etapis peate lihtsalt teadma, kuidas kasutada CSS-i fonte.
Google Fonts on üks parimaid ressursse tasuta web fonte ja Google annab teile mitu võimalust importida neid oma veebilehel. Kahjuks ei sisalda ükski neist populaarset WordPressi mootorit. See tähendab, et peate kasutama pluginaid, mis on palju või paki käed, kasvatavad koodiga.
Hea uudis on see, et saate installida Google'i raamatukogu fondi praktiliselt igale WordPressi teemale ilma palju probleemideta. Kuidas täpselt - me õpetame teid täna.
On kaks võimalust - ühendage plugin või natuke functions.php-failiga.
Aga kõigepealt tahaksin loetleda Google'i fontide eeliseid ja puudusi, nii et te otsustate lõpuks neid meie projektides kasutada või mitte.
Hea ja halb Google Web Fonte
Web Fonte puhul on Google üks parimaid võimalusi. tulemuste osas . Kõik kerge disaini ja vahemälude süsteemi tõttu. Külastajad ei tohiks oodata Google'i fontide, kui nad hiljuti külastasid saidi, kus neid kasutati. Populaarsed fonte nagu avatud sans suudavad parandada teie saidi jõudlust, vähendades allalaadimise aega.
Teine funktsioon on see Google võimaldab teil need fonte üles laadida Nii saate neid oma paigutustes kasutada.
Ja lõpuks platvorm on täiesti tasuta . Fontide kasutamise alustamiseks on teil vaja sisse logida või alustada postkasti Gmaili (ja kellel ei ole maili Gmaili täna).
Vigadest Saate selle määrata google-fontide valik on väike Paljud neist on üksteisega sarnased. On vaja kulutada palju aega otsides, et leida korralik, originaalne font. Küljenduse fonte väga vähe.
Lisaks on tavalised ohutusprobleemid - Sa pead täpsustama mõned isikuandmed installides fonte Google'i saidil.
Kuidas installida Google'i fonte WordPressi pluginate abil
Kui otsite pluginad, esimene asi, mida näete otsingutulemustes - klarvid WP Google Fonts ja lihtne Google Web Fonte . Need on tõesti kaks parimat pluginat.
Pluginad ei ole ideaalne lahendus Google'i fonte installimiseks WordPressi saidil - mitte ainult jõudluse seisukohast, vaid ka seetõttu, et pluginad ei võimalda teil valida teatud teksti. Siiski, kui teie või teie klient on kindel, et see on parem kasutada pluginad, siis vaadake neid kahte võimalust.
See plugin võimaldab teil keskenduda konkreetsetele elementidele, nagu pealkirjad H1, punktid ja hinnapakkumised. Saate ka kohandatud CSS-i võimaluse valitud stiilide edasiseks tööks. Lisa ja konfigureerige fonte Google'ist WordPressi saidil selle pluginaga üsna lihtsalt.
Lihtne Google Web Fonte õigustab selle nime ja teeb Google'i fontide paigaldamise jaoks väga lihtne isegi algajatele. Võite kasutada live-eelvaate funktsiooni vaatamiseks, katsetamiseks ja optimeerides fonte ilma lahkumata veebilehel, samuti luua oma fondireeglid ilma koodi kirjutamiseta.
Õige viis Google'i fontide installimiseks WordPressi mallis
Lõpuks jõuame võimaluse avada funktsioone.php-faili ja töötada koodiga. Enne seda, kui te seda teete, peate valima Google'i raamatukogu fondi. Näiteks proovime võtta väga populaarne Avatud sans..
Siis peate valima fondi stiili - tavaline, rasvane või kaldkirjas. Sa suudad seda ise teha :)
Pärast stiilide valimist annab Google Scippeti koodi. Meie näeb välja selline:
Lisaks saime CSS-stiili:
font-perekond: "Avatud sans", sans-serif;
Nüüd on aeg avada funktsioone.php faili (tee faili: WP-sisu / teemad / yourtheme). Faili lõpus lisage uus funktsioon:
funktsioon Load_fonts ()
{
Wp_register_style ("et-googlefononts",
"http://fonts.googleapis.com/css?family\u003dopen+sans:300Itaalis 400 500 300"); Wp_enqueue_style ("et-Googlefononts");
}
Lisa_ction ("wp_print_styles", "Load_fonts");
Selle funktsiooni võti on käsk "WP_ENQUEUEE_STYLE", mis põhjustab WordPressi helistamiseks iga lehe päises oleva fondi stiilide tabelile. Kui te vaatate hoolikalt, siis näete, kustutame href \u003d ja rel link \u003d 'Stylehesheet "tüüp / CSS", koodist, mida Google meile andis, ja peate tegema sama, kui soovite lisada Muu Google Font saidi WordPressis.
Kõik, mida pead tegema Nüüd on avada peamine CSS-faili ja sisestada stiili avatud sans. Siin on tavalised reeglid, seega lisage järgmine kood stiililehele, salvestage ja uuendage:
keha.
{
Font: Normaalne 1EM "Avatud sans", sans-serif;
Värv: # 313131;
}
See stiil töötab kogu saidil. Individuaalseteks tekstifragmentidena saate teise stiili seadistada:
Julge-tekst
{
Font: Bold 1EM "avatud sans", sans-serif;
}
Nagu näete, tegelikult on kõik väga lihtne. Proovige ja kontrollige tulemust :)
Vlad Merzehevich
Font on veebidisaini lahutamatu osa, annab saidi ekspressiivsuse ja tunnustamise, väljendab saidi iseloomulikku stiili ja on otseselt seotud tekstide tajumisega. Hästi valitud fonti ei pruugi olla märganud, kuid ilma selleta ei ole raiini, mis annab saidi disaini. Lõpetamine.
Kui teil on teie arvutis juba paigaldatud konkreetne font, piisab stiile stringi lisamiseks.
h1 (font-perekond: SuperPuperfont;)
FONT-perekonna vara väärtus on fondi peakomplekti nimi, see kehtib kõigi pealkirjade suhtes.
. Aga mida nähakse saidi külastajad, kellel on meie tähelepanuväärne ja haruldane font pole installitud? Selline olukord on kõige tõenäolisem, nii et kui brauser ei tunne väidetavat fonti, kasutab ta vaikimisi fondi, näiteks Windowsis on see uus rooma. Kõik meie hoolikalt läbimõeldud fontide disain üleöö krohvid ja läheb kiirustada, nii et sa pead otsima kõige universaalsema lahenduse. Esimene asi, mis kohe meelde tuleb, on korraldada fondifaili allalaadimine kasutaja arvutisse ja kuvada valitud tekst. Võrreldes teiste meetoditega, näiteks teksti kuvamise kaudu pildi kaudu, on see meetod kõige lihtsam ja universaalne.
Millised eelised lõpus annab meile allalaadimise fontfaili järgneva kasutamise kaudu CSS.
- Tekst on lihtne lisada ja muuta.
- Brauseris saate nautida soovitud fraaside otsimist ja leida.
- Brauseri seadetes saate fondi suurust vähendada või suurendada mugava vaatamise saavutamise.
- Otsingumootorid näitavad dokumendi sisu.
- Teksti saab esile tõstetud ja kopeerida puhvri, samuti teise keele Tõlgi.
- Tekstiparameetrid nagu hõõrur, värvid, suurus ja muud sarnased CSS-i omaduste kasutamine.
- Tekstiga uuesti CSS-i kaudu lisage lihtsalt erinevaid mõjusid, nagu vari.
Nagu näete, palju eeliseid. Saadaval on väikesed puudused ja saldod tuleks mainida.
- Mitte kõik brauserite versioonid ei toeta laaduvat fondi ja üks kõigi vormingu jaoks.
- Fantide peakomplekti sisaldav fail võib suure mahuga hõivata, aeglustades seeläbi veebilehe allalaadimist.
Vahekaardil. 1 on loetletud brauseri versioonid ja fontivormingud, mida nad toetavad.
| Formaat | Internet Explorer. | Chrome. | Ooper. | Safari. | Firefox. | Android | iOS. |
| TTF. | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| Eot. | 5.0-8.0 | ||||||
| Woff. | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG. | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Kõige toetatud formaat on TTF. Välja arvatud IE versioon 9.0 ja iOS-iga, mõistavad kõik brauserid seda ideaalselt. Nii et kui teil on selles formaadis font ja olete keskendunud kaasaegsetele brauseritele, ei pea täiendavaid meetmeid tegema. Piisavalt stiilis kirjutada järgmine kood (näide 1).
Näide 1. TTF-i ühendamine
HTML5 CSS3 IE 8 IE 9+ CR OP SA FX
Esialgu laadite fondifaili ise kasutades @ font-nägu reegel. Selle sees kirjutame me fondi peakomplekti pealkirja fontide perekonna parameetri ja faili tee kaudu SRC kaudu. Lisaks kasutage fondi tavapäraselt. Niisiis, kui me peame määrama pealkirja fondi, siis H1 valiku jaoks, nagu näites näidatud, täpsustage font-perekond kinnisvara, mille nimi on koormatud fondi nimi. Vanade versioonide IE kaudu komadega, me nimetame varu võimalusi. Sel juhul pealkiri font on "koomiks sans MS", sest IE8 ja ei toeta TTF formaadis.
Selle näite tulemus on näidatud joonisel fig. üks.
Joonis fig. 1. Pealkiri allalaaditud fondiga
Mida ma peaksin tegema, kui vajate IE8 kena fondi? Õnneks võimaldab @ font-nägu ühendada mitme erineva formaadi fondifaile samal ajal. Brauser jääb ainult asjakohase valimiseks. Seega vähendatakse universaalset lahendust, mis töötab kõigis brauserites, et saada kättesaadava TTF-formaadi teisendamiseks nii mõlema faili järgneva ühendamisega.
Konversioonide jaoks on mitmeid võrguteenuseid, mis võimaldavad teil TTF-faili alla laadida ja väljundi eot-faili saada. Kahjuks on enamik neist teenustest ühe ja sama probleeme - faili, mida me saame, kuid vene keelt ei toetata selles. Selle tulemusena soovitud tulemust ei saavutata, konversioon tekib valesti. Sites tõestatud saitide hulgas olin üksi, kes näitas teksti õigesti.
Minge sellele saidile, laadige TTF-fail ja vajutage nuppu "Teisenda TTF EOT", mille järel salvestate saadud faili kausta FONTS-i. Stiilid jäid väikese trikkiks ja muudavad erinevad brauserid fanti soovitud formaadis. Selleks lisage kaks SRC parameetrit. Esimene näitab EOT-faili ja on mõeldud IE vanemate versioonide jaoks. Teine parameeter SRC peab sisaldama kahte koma kaudu loetletud aadressi, millest üks näitab TTF-faili. Fakt on see, et st versioon 8.0 ja nooremad ei mõista SRC parameetri komaga ja seega ignoreerivad kogu parameeter. Kirjutamisvalikud võivad olla mitu, näiteks korrake URL-i, määrake fondi nimi kohalikus parameetri sees või kirjalikult olematu fontide kirjutamine. Kui brauser ei saa sellist fonti laadida, pöördub see loendisse teise poole ja see on meiega õigesti kirjutatud. Lubatavad kirjutamise viisid.
sRC: URL (fonte / pompadur.ttf), URL (fondid / pompadur.ttf);
SRC: kohalik (Pompadur), URL (fonts / pompadur.ttf);
SRC: kohalik ("Bla Bla"), URL (fonte / pompadur.ttf);
Näide 2 on näidatud kõigi brauserite versioonide fondiühenduse valik.
Näide 2. Ühendage eot
HTML5 CSS3 IE CR OP SA FX
Poliitilise protsessi kaasaegne element
Tegelikult juhtivad Montesquieu poliitilised õpetused mandri-Euroopa poliitilise kultuuri tüübile, mis kajastus Michelite teostes.
Nagu IOS, tehke ja laadige alla SVG-vormingus eraldi fondi, nagu mulle tundub, et mulle ei ole erilist mõtet. IOS-i vaatamissaitide publik on endiselt väike, lisaks mobiilseadmete kohase saidi versioon püüab leevendada ja üles laadida täiendavaid paar kümneid kilobaiti ei ole soovitav.
Google Web Fonte.
Mugav teenus, mis õpetas rutiini erinevate fontide vormingute ja brauseri versioonide toetamiseks, leiate www.google.com/webfonte. . Kuigi kollektsioon on suhteliselt vähe erinevaid fonte (nende mitu tosinat), on nad kõik valitud väga kõrge kvaliteediga ja tasuta saitidel.
Enne fontide valimist lülitage skripti väärtus kirillitsale, siis näete vene keelt toetavate fonte loetelu (joonis 2).
Joonis fig. 2. Fontide valik Google Web Fontes
Font soovite eelnevalt lisada kollektsiooni klõpsates nuppu "Lisa Kogumine" nuppu ja seejärel "Kasuta" nuppu alumises paremas nurgas ekraani. Järgmisel leheküljel (joonis 3) saate lõpuks valida vajalike fonte. Tuleb mõista, et fontide peakomplekt võib sisaldada mitmeid jooni ja igaüks neist suurendab allalaaditud failide mahtu.
Joonis fig. 3. Latest fonte
Valitud fonte saab ühendada ühe kolmest võimalusest, lisatud koodi saab leheküljel kopeerida.
1. läbi elemendi . Stringil on umbes järgmine vorm.
2. Läbi @Import reegel. Sisestage selline string oma CSS-failile väga tippu.
@Import URL (http://fonts.googleapis.com/css?family\u003dphilosopher&subset\u003dcyrilic);
3. JavaScripti kaudu.
Põhimõtteliselt on kõik viisid samaväärsed, nii et valige oma eelistustel.
Selle teenuse rakendamise eelised on.
- Fonte on tasuta kasutamiseks, te ei pea nende eest maksma.
- Kavandatud fonte on "teritatud", et vaadata ekraanil, failid on optimeeritud ja hõivata suhteliselt väike maht.
- Brauser määratakse automaatselt ja font väljastatakse selle all soovitud formaadis.
Teenuse üks peamisi eeliseid on see, et fonte salvestatakse TTF-is, eotis, Woffis, SVG-vormingus ja laaditakse pärast brauseri kontrollimist. Seega on EOT-vorming saadaval ainult vanade IE versioonide jaoks.
Kasutage Google Web fonte või mitte lahendada teid. Kui te ei leidnud seal sobivat fondi, saate alati ühendada populaarne ja tavaline TTF. Lisaks toetavad see kõigi populaarsete brauserite uusimad versioonid.
Font mängib kaugelt kõige uuemat rolli disaini saidi, see võib rõhutada ühist stiili, aitab kasutaja orienteeritud tekstisisaldusega. Otsi tasuta fonte ja seejärel ühendage kamp failid erinevate brauserite jaoks - see pole tänulik, kuid Google'i fontidest on väljundfunte.
Otsi sobivat fonti Google Fonts
Lähme fontide teenusesse end Google'ist ja mõtle oma võimeid.
Vasakul (külje) paneelis saate konfigureerida font filtreerimise parameetrid ja mis kõige tähtsam valida oma kuuluvad kirillitsa või ladina.
Ülaosas saate muuta demo-teksti kuvamist kujul: sõnad, soovitused, lõik, plakat. Muutke fondi suurust ja sisestage oma teksti asemel oma teksti.
Fondiühendus Google Fontidest
Kui olete valinud soovitud fondi, klõpsake nuppu "Kiire kasutamine" (vt pilti allpool)
Fondiühenduse lehel peate valima:
1. Fontstiilid, rasv, kaldkirjas jne. Ärge kiirendage kõvasti, valige ainult kõige vajalikum, sest Kõik see mõjutab fondi laadimise kiirust ja vastavalt teie saidile teksti allalaadimise kiirust. Järgige parempoolse anduri näitajaid (punkt 5 pildil)
2. Valige, milliseid märke vajate selles fondis (enamasti ladina ja kirillitsa).
3. Kopeerige linkimiskood peaplokis
4. Kasutage stiili stiili stiilides, nagu on näidatud lõikes 4 (vt Makertiinka)
