Lai uzzinātu par visu sev - nav viegli, bet ļoti interesanti. Ja jums ir vismaz virspusēja ideja par to, kā vietne darbojas, tad tas ir labāk, lai viņi īstenotu savu projektu pats. Tajā pašā laikā, jūs ne tikai ietaupīsiet ķekars naudas, bet arī uzzināt daudz "čipsi", noslēpumi utt. Izmantojot Google fontus, parasti nepiesaista uzmanību, lai gan, pateicoties tiem, blogs var kļūt interesantāks.
apkalpošana
Ilgu laiku internetā parādījās galvenais tīmekļa fontu pakalpojums. To izstrādāja Google. Lietotāji to varētu izmantot bez maksas. Neskatoties uz to, ka šāda veida noteikšana netiek uzskatīts par virsotni, joprojām ir tādi cilvēki, kas kļūdījās un nevarēja tikt galā ar pakalpojumu.
Lai to izdarītu, vienkāršs dizains tika speciāli izstrādāts. Tagad strādājiet ar Google fontu fontu ir kļuvis vieglāks, un apmeklētāju skaits ir palielinājies. Bibliotēka paplašinājās. Pagājušajā gadā pakalpojums notika pārprojektēšanas pakalpojumu, kas pulcēja daudz pozitīvu atgriezenisko saiti. Tagad cilvēki ir kļuvuši vieglāk savienot fontus savām vietnēm un apskatīt tos.
Izskats
Tātad, tiem, kuri nekad nav bijuši vietnē ar veco dizainu, jums ir nepieciešams veikt vispārēju priekšstatu par izmaiņām. Agrāk pakalpojums izskatījās diezgan masveidā. Visur tur bija biezi rāmji, zilā pogas, grafika nebija visaugstākā atļauja. Tas viss ir būtiski ietekmējis apmeklētāju.
Tagad izstrādātāji ir vērsti uz materiālo dizainu. Visas iegūtās izsmalcinātās funkcijas. Izskats kļuva "vieglāks". Smalka animācija, interaktivitāte kļuva pamanāma. Nekas cits neuztrauc uzmanību no vēlamā Google fonta fonta izvēles.
Bija ērts pielāgošanās resursu mobilajām ierīcēm. Protams, šāda izmaiņa nav daudz pamanāma pret inovāciju fonu, bet ņemot vērā iepriekšējās versijas kļūdas, būs par "Mannas debesu" lietotājiem.
Iespēja
Bieži līdzīgi pakalpojumi tiek izmantoti dizaineri. Neskatoties uz viņu pieredzi un profesionalitāti, viņi arī strādā ar vizualizāciju. Pārprojektēšana prezentēja vairāk līdzīgas iezīmes, kas ļautu jums iepriekš apvienot to, kas būs nepieciešams, lai īstenotu vēlāk savā projektā.
Tāpēc problēma ar to, kā viens fonts ir apvienots ar citu krāsu un trešo fonu, pazuda. Uzņēmums pievienoja vairāk rīku un paletes ar universāliem toņiem, kas ļautu eksperimentēt un uzzināt, kā viens vai otrs fonts izskatīsies konkrētā krāsā.
Izvēlēts
Google Fonts Fonts Service nodrošina lietotājiem izmantot izvēlētās iespējas. Īpašā cilnē ir savākti stilu kopums, ko izstrādātāja iesaka izmantot. Šīs kolekcijas tiek piešķirtas starp citiem. Tos izstrādā Google un trešo pušu aģentūru eksperti. Lielākā daļa no tiem ir noteiktu stilu un īpašu filozofiju.
Skats
Viena no svarīgākajām izmaiņām tieši ietekmē fontu izvēli. Tas ir saprotams, ka agrāk lietotājs redzēja kādu zīmējumu ar papildu pogām un lielu zilu, kas pievienoja fontu kolekcijai. Kopumā šī iespēja izskatījās labi, bet ne vienmēr boksa bija diezgan laba izšķirtspēja attēla ar stilu, un tāpēc bija viegli noteikt, kā fonts izskatīsies.
Bija jautājumi, un šīs papildu pogas, kas bija maz zināms no pirmā acu uzmetiena. Bija nepieciešams vai nu tos uz tiem vai izmantot. Tagad tas ir kļuvis vairāk vai mazāk skaidrs. Ir papildu funkcijas:
- Izvēlieties konkrētu priekšlikumu, punktu vai savu teksta elementu.
- Fontu piesātinājuma eksperimenti.
- Ātra izmēru iestatīšana, izmantojot slīdni.
Starp citu, Google fontu lieluma izmaiņa ir kļuvusi pielāgojama, jo tikai viens piemērs mainījās, nevis viss lapā. Vecajā lietotāju versijā var nodot no vienas lapas malas uz otru, un jaunajā jūs vienkārši paliekat uz šo piemēru, kas ir regulējams.
Savienojums
Ja esat gatavs izmantot šo pakalpojumu, varat mēģināt savienot fontus jūsu resursam. Saites iegūšanas process ir universāls. Problēmas var rasties atkarībā no CMS sistēmas. Katrs izmanto savus veidus. Tāpēc dažādiem projektiem būs jāizvēlas individuālās iespējas.
Mēs apskatīsim, kā iegūt saiti, lai savienotu Google fontus. Jums jādodas uz Google fontu oficiālo tīmekļa vietni. Tur jūs skatāties stilu katalogu un izvēlieties to, kas vislabāk atbilst. Lai to izdarītu, blakus viņam noklikšķiniet uz "Plusik". Pēc tam, kad fonts tiks pievienots īpašajam blokam apakšā lapas.
Noklikšķiniet uz šīs ierīces un pēc tam konfigurējiet to. Šeit jūs varat izvēlēties uzrakstu un nepieciešamo alfabētu. Ja jums ir nepieciešams Google fonts kirilics, tad atzīmējiet kirilicu virkni. Pēc saites veidošanās. To var atrast tajā pašā logā iegultā cilnē. Tas ir pietiekami, lai kopētu to vai izmantotu pilnu HTML kodu.
Parasti vietnes iestatījumos ir fonts un krāsas. Ir standarta iespējas, un jūs varat pievienot pagarināt. Viņiem ir atsevišķa iespēja Google fontiem. Ja jums ir nepieciešams lejupielādēt fontus caur Augstākās Webfonts spraudni.
Populāras opcijas
Protams, ir grūti spriest, kādi stili ir labāki, jo īpaši dažādiem vietnes priekšmetiem. Veidojot savu vietni, atcerieties, ka viņam nepatīk, bet jūsu auditorija. Tāpēc labāk ir apskatīt konkurentu vietnes.
Parasti komerciāliem resursiem neviens neierobežo par stiliem. Galu galā, ja jūs redzat fontu Google Chrome tiešsaistes veikalā, jums ir maz ticams, lai pievērstu uzmanību tam. Bet, ja jums ir emuārs, tad, visticamāk, kaut ko jūs varat, un kaut kas, gluži pretēji, kaitēs.
Google fonti ir sagatavojuši daudzas kolekcijas, kurās ir populāri stili. Piemēram, omāru mīlestība izmantot atsevišķiem blokiem tekstā. Ir grūti lasīt, ja viss raksts ir rakstīts šādā treknā slīprakstā. Bet tas izskatās labi ieliktņi un citāti.
Bad skripts ir arī iespēja blogiem. Cursive tipa smags, lai lasītu lielus teksta masīvus, bet jūs varat piešķirt galveno ideju. Stils imitē roku rakstītu rokrakstu. Jura Normal 400 ir interesanta iespēja kirilicam. Autors apgalvo, ka tas ir Eurostil no Sear Serip ģimenes. Tas izskatās ļoti labi un ir vairākas variācijas.
Pirmā nodaļas daļa ir veltīta iepazīšanās ar CSS fontiem. Šajā lapā jūs uzzināsiet, kā savienot fontus CSS, kas ir tīmekļa fonti un kā strādāt ar viņiem, kādi fontu formāti ir, kā izmantot Google fontus. Lai sāktu ar, apsveriet vieglu piemēru CSS fonta savienošanai:
P (Fonta ģimene: Verdana;)
Šis mazais koda gabals nozīmē, ka visiem tagiem
Tiek piemērots verdana fonts. Fonta ģimenes īpašums nosaka, kuru fontu vai fontu ģimene tiks izmantota. Šī stila pareizais displejs lietotāja pārlūkprogrammā ir atkarīga no tā, vai norādītais fonts ir instalēts savā datorā. Mūsu gadījumā, ja Lietotāja datorā trūkst Verdana fonts, pārlūks parādīs noklusējuma fontu.
Vienā reizē, dizaineriem bija jāpārbauda vairāki rezerves fonti, ja Lietotāja dators būs pazudis. Pieņemsim, ka vēlaties izdot tekstu ar Verdana fontu un instalēt TREBUCCHET MS, Ženēvas fontus un jebkuru fontu bez serifiem. Tas ir rakstīts šādā veidā:
P (Fonta ģimene: Verdana, "Trebuchet MS", Ženēva, Sans-Serif;)
Apstrādājot šo kodu, pārlūks vispirms pārbaudīs Verdana fonta klātbūtni lietotāja datorā. Ja fonts ir klāt, tagu saturs
Parādīts šis fonts. Ja trūkst fonts, pārlūks pārbaudīs klātbūtni sekojošās sarakstā Font - Trebuchet MS. Ja trūkst šī fonta, tiks pārbaudīts šāds fonts - Ženēva. Ja Lietotāja datorā nav Ženēva, pārlūks izvēlēsies citu pieejamo fontu bez serifiem un parādīt tekstu.
Piezīme: Kodā mēs ierakstījām Trebuchet MS fontu nosaukumu citātos. Jums ir jāveic fonta nosaukums dubultā vai vienotā citē, ja ir atstarpes.
Par to, kas ir fonts ar Serif (Serif) un bez (Sans-Serif), jūs varat lasīt Wikipedia lapā.
Tīmekļa fonti
Iepriekš minētajai fontu izmantošanas metodei ir milzīgs mīnuss - jūs esat ierobežots fontu apjomā. Jums būs jābūt saturam tikai ar to iespējām, kas visticamāk ir instalētas vairumā datoru.
Kā jūs varat palielināt fontu izvēli, lai padarītu lapas dizaina indivīdu, pievienotu oriģinalitāti? Tīmekļa fonti nonāk glābšanā. Lasiet nodaļu par un jūs uzzināsiet, kā strādāt ar viņiem.
Tātad, lai parādītu vēlamo fontu lietotāja pārlūkprogrammā, mums ir nepieciešams šis fonts, lai ielādētu savā datorā. Tas ir diezgan vienkārši to īstenot. Šī metode fontu savienošanai ar CSS atveras patiešām plašas iespējas pirms dizaineriem. Bet ir vērts pieminēt par karoti medus barelu: Pirmkārt, ne katrs pārlūks atbalsta noteiktu fontu formātu (kas radīs, ka fonts neparādās), un, otrkārt, ja failam ar fontu ir daudz svara, Tas var palēnināt lejupielādes lapu.
Atbalsta formāti
Kā tikt galā ar problēmu neveiksmes faila formātā? Apskatīsim tabulu, kurā tiek parādīti populārākie fontu formāti un uzzinām, kuras pārlūkprogrammas atbalsta:
Piezīme: Jūs vienmēr varat uzzināt aktuālu informāciju par atbalstu fontu formātiem par Caniuse.com. Meklēšanas virknē ir jāievada formāta nosaukums (piemēram, TTF).
Ja esat orientēts ar modernām pārlūkprogrammām, jūs vienkārši izmantosiet TTF fonta formātu - visizplatītāko un izmantoto. Gadījumā, ja jums ir nepieciešami vairāki viena fonta formāti, varat izmantot īpašus tiešsaistes pārveidotājus no viena formāta uz citu, un pēc tam pievienojiet visus failus savukārt. Tādējādi pārlūkprogramma varēs izvēlēties fonta formātu, ar kuru tas darbojas.
Mēs savienojam tīmekļa fontu ar @ font-face
Pieņemsim, ka jums ir savs unikālais fonts, ko sauc par myuniquefont TTF formātā, un jūs vēlaties, lai šī fontu parādītu tīmekļa lapas pamatdaļu. Pirmā lieta, kas jādara, ir kopēt fontu failu mapē, kurā atrodas visi citi vietnes faili. Lai neradītu haoss, jūs varat izveidot atsevišķu mapi īpaši fontiem, zvanot, piemēram, fontus.
@ Font-Face (Font-Face: myuniquefont; SRC: URL ("fonti / miuniquefont.ttf");)
Fonta ģimenes īpašums šajā gadījumā spēlē citu lomu: ar to, mēs piešķiram nosaukumu fontam, lai pēc tam izmantotu šo nosaukumu, rakstot stilu:
P (fontu ģimene: myuniquefont;)
Otrā rinda norāda ceļu uz fonta failu. Mūsu piemērā fails ir myuniquefont.ttf atrodas mapē Fonti. Jums ir URL var atšķirties.
Fonti Google fonti.
Google ļauj viegli savienot jebkuru fontu no Google fonta kolekcijas. Viss, kas jums jādara, lai sāktu izmantot vēlamo fontu, - Norādiet vairākus iestatījumus Google lapā Fonts, pēc tam kopēt īpašo saiti uz šo fontu un pievienojiet savam tīmekļa dokumentam.
Piezīme: Visa Google fontu kolekcija ir pieejama vietnē Google fonti. . Lapā varat izmantot dažādus filtrus, lai meklētu fontus pēc kategorijas, biezuma, alfabēta.
Zemāk mēs aprakstām katru fontu savienojumu no Google. Lai saprastu, ko mēs runājam, izvēlieties jebkuru fontu no Google fonta lapas un atveriet to, noklikšķinot uz ātrās lietošanas pogas.
1. solis: izvēlieties inteliģenci
Pirmā lieta par izvēlēto fontu lapā parādīs opcijas tā uzrakstu, kā arī spidometra ikonu, kas nozīmē neko, bet fonta slodzes ātrumu. Jo vairāk stilu izvēlētajam fontam, jo \u200b\u200bvairāk laika tas būs nepieciešams tās lejupielādē. Tāpēc ieteicams izvēlēties tikai tās dizaina iespējas, kuras ir plānotas izmantot.
2. solis: izvēlieties Alfabēts
Tālāk, lapā ir iespēja izvēlēties rakstzīmju kopumu: Latina, kirilica utt, atkarībā no fonta, ne visi alfabēta varianti var būt pieejami. Līdzīgi kā iepriekšējā prece, labāk ir likt atzīmi tikai pretī alfabētam, kas vajadzīgs.
3. solis: pievienojiet kodu vietnei
Pirmais veids nozīmē pievienojot saiti uz Google serveri HTML kodu, no kurās fonts ir lejupielādēts. Jums ir nepieciešams kopēt gatavo kodu un ievietot to starp tagiem.
Jūsu HTML dokumentā. Piemērs:...
Otrs veids ir savienot fontu, izmantojot @Import direktīvu. Gatavais kods atrodas 3. punkta otrajā tabulā izvēlētā Google fonta lapā. Tas jāpievieno jūsu stila lapas sākumam (pretējā gadījumā fails nav importēts). Kods izskatās šādi:
@Import URL (http://fonts.googleapis.com/css?family\u003droboto&subset\u003dlatin.cyrillic);
Pirmās metodes īpatnība ir tāda, ka jums būs nepieciešams pievienot saiti uz fontu katras lapas nosaukumam, kur to plānots izmantot. Vietnēs ir viegli īstenot ar nelielu lapu skaitu, bet problemātiski lieliem resursiem. Otrā metode ir ērta, jo kodu var novietot ārpuses stila lapas sākumā, un pēc tam visas lapas, kurās šī tabula ir pievienota, saņems vēlamo fontu, kas tiks ielādēts, izmantojot @Import direktīvu.
4. solis: izveidojiet stilu
Pēc iepriekšējo soļu ieviešanas jūs varat sākt piemērot fontu. Tā kā CSS noteikums ir rakstīts, jūs jau esat redzējuši agrāk:
P (Fonta seja: "Roboto", Sans-Serif;)
Ja pirmajā posmā jūs izvēlējāties vairākas dizaina iespējas (piemēram, tika pievienota treknraksta 700 treknraksta versija), tad trešajā posmā kods nedaudz mainīs:
@Import URL (http://fonts.googleapis.com/css?family\u003droboto: 700,400 un apakškopa \u003d latin.cyrillic);
Lai pēc tam dotu fonta tauku insultu, rakstiet CSS stilu šādā veidā:
P (Font-Face: "Roboto", Sans-Serif; Fonta svars: 700;)
Piezīme: Google fontos, tikai parastās vienības no 100 līdz 900 tiek izmantotas, lai apzīmētu fonta piesātinājumu. Tātad, normāls dizains (noklusējums) ir līdzvērtīga 400 vērtībai (normālai), un standarta trekainā ir līdzvērtīga 700 (treknrakstā).
Google fontu pakalpojuma galvenās priekšrocības ir:
- lietošanas ērtums (pat jaunpienācējs varēs tikt galā ar pakalpojumu, un viss nepieciešamais kods tiek ģenerēts automātiski - tas joprojām ir tikai to kopēt);
- fontu pieejamība (nav nepieciešams, lai viņi varētu maksāt);
- tiek piedāvāti visi izmantotie fontu formāti (tas nozīmē, ka katrs pārlūks varēs augšupielādēt tieši fonta formātu, ar kuru tas darbojas).
Starp pakalpojumu trūkumiem nav ļoti liels fontu klāsts, īpaši kirilics. Starp citu, ir arī citi līdzīgi pakalpojumi internetā, piemēram, typekit (maksā).
Rezultāti
Šodien mums ir vairākas iespējas, lai savienotu oriģinālos un nestandarta fontus tīmekļa lapām. Katrai no šīm metodēm ir plusi un mīnusi. Kura iespēja ir labāk izmantot, jums ir nepieciešams, lai noteiktu sevi. Tas bieži vien ir atkarīgs no situācijas, un dažādas pieejas var būt noderīgas dažādos gadījumos. Šajā posmā jums vienkārši ir jāzina, kā izmantot fontus CSS.
Google fonti ir viens no labākajiem resursiem ar bezmaksas tīmekļa fontiem, un Google sniedz jums vairākus veidus, kā tos importēt uz jūsu vietni. Diemžēl neviens no tiem nav iekļauts populārs WordPress dzinējs. Tas nozīmē, ka jums ir vai nu izmantot spraudņus, kas ir daudz, vai pack rokas, audzēšana ar kodu.
Labā ziņa ir tā, ka jūs varat instalēt jebkuru fontu no Google bibliotēkas praktiski jebkurā WordPress tēmā bez daudz nepatikšanām. Kā tieši mēs šodien iemācīsim jūs.
Ir divas iespējas - pievienojiet spraudni vai mazliet caurdurtu ar funkcijām.fp failu.
Bet vispirms es gribētu uzskaitīt Google fontu priekšrocības un trūkumus, lai jūs beidzot nolemtu tos izmantot mūsu projektos vai nē.
Labi un slikti Google tīmekļa fonti
Attiecībā uz tīmekļa fontiem Google ir viena no labākajām iespējām. runājot par sniegumu . Viss viegls dizaina un kešatmiņas sistēmas dēļ. Apmeklētājiem nevajadzētu gaidīt Google fontus, ja viņi nesen apmeklēja vietni, kurā tie tika izmantoti. Populāri fonti, piemēram, atvērtie sans, var uzlabot vietnes veiktspēju, samazinot lejupielādes laiku.
Vēl viena iezīme ir tā Google ļauj jums augšupielādēt šos fontus Tātad jūs varat tos izmantot jūsu izkārtojumos.
Un visbeidzot platforma ir pilnīgi bez maksas . Lai sāktu lietot fontus, jums ir nepieciešams pieteikties vai sākt pastkasti uz Gmail (un kuriem šodien nav e-pasta gmail).
Trūkumi To var norādīt google-fontu izvēle ir maza Daudzi no tiem ir līdzīgi viens otram. Ir nepieciešams pavadīt daudz laika, lai atrastu pienācīgu, oriģinālu fontu. Ļoti maz fonti kiriliem.
Turklāt ir ierasts drošības problēmas - Jums ir jānorāda daži personas dati, instalējot fontus no Google jūsu vietnē.
Kā instalēt Google fontus, izmantojot WordPress spraudņus
Ja jūs meklējat spraudņus, pirmā lieta, ko redzat meklēšanas rezultātos - pLAGES WP Google fonti un Easy Google Web fontus . Tie ir patiešām divi labākie spraudņi.
Plugins nav ideāls risinājums Google fontu instalēšanai WordPress vietnē - ne tikai sniegšanas ziņā, bet arī tāpēc, ka spraudņi neļauj izvēlēties noteiktus teksta gabalus. Tomēr, ja jūs vai jūsu klients ir pārliecināts, ka labāk ir izmantot spraudņus, tad apskatiet šīs divas iespējas.
Šis spraudnis ļauj koncentrēties uz konkrētiem elementiem, piemēram, virsrakstiem H1, punkti un citāti. Jūs arī saņemat pielāgotu CSS opciju tālākai darbam ar izvēlētajiem stiliem. Pievienojiet un konfigurējiet fontus no Google uz jūsu WordPress vietni ar šo spraudni diezgan viegli.
Easy Google Web Fonti attaisno tā nosaukumu, un padara instalēšanu Google fontus super viegli pat iesācējiem. Jūs varat izmantot LIVE priekšskatījuma funkciju, lai apskatītu, pārbaudītu un optimizētu fontus, neatstājot tīmekļa vietni, kā arī izveidojiet savus fontu noteikumus, nerakstot koda rindu.
Pareizais veids, kā instalēt Google fontus WordPress veidnē
Galu galā mēs nonākam pie opcijas, lai atvērtu funkcijas.Php failu un darbu ar kodu. Pirms jūs to izdarītu, jums ir jāizvēlas fonts no Google bibliotēkas. Piemēram, mēģināsim veikt ļoti populāru Atvērtie sans..
Tad jums ir jāizvēlas fonta stils - normāls, taukains vai slīpraksts. Jūs varat to darīt pats :)
Kad esat izvēlējies stilus, Google sniegs jums fragmenta kodu. Mūsu izskatās šādi:
Turklāt mēs saņēmām CSS stilu:
fonta ģimene: "Atvērtie Sans", Sans-Serif;
Tagad ir pienācis laiks, lai atvērtu funkcijas.Php failu (ceļš uz failu: WP-saturu / tēmas / yourstheme). Faila beigās pievienojiet jaunu funkciju:
funkcija load_fonts ()
{
Wp_register_style ("et-googlefonts",
"http://fonts.googleapis.com/css?family\u003dopen+sans:300Italic,400,500,300"); Wp_enqueue_style ("et-googlefonts");
}
Add_styles ("wp_print_styles", "load_fonts");
Šīs funkcijas atslēga ir komanda "wp_enqueue_style", kas izraisa WordPress, lai izsauktu fonta stilu tabulu katras lapas galvenē. Ja jūs uzmanīgi izskatīsiet, jūs redzēsiet, ka mēs izdzēsim href \u003d un rel saiti \u003d 'Stylesheet' tips'text / CSS ', no koda, ko Google deva mums, un jums būs nepieciešams darīt to pašu, ja vēlaties pievienot jebkuru Cits Google fonts jūsu vietnei WordPress.
Viss, kas jums jādara, tagad ir atvērt galveno CSS failu un ievietot stilu ar atvērtiem sans. Šeit ir normāli noteikumi, tāpēc pievienojiet šādu kodu stila lapā, saglabājiet un atjauniniet:
Ķermenis.
{
Fonts: Normal 1em "Open Sans", Sans-Serif;
Krāsa: # 313131;
}
Šis stils darbosies visā vietnē. Atsevišķiem teksta fragmentiem jūs varat iestatīt citu stilu:
Treknraksts
{
Fonts: Bold 1em "Open Sans", Sans-Serif;
}
Kā jūs varat redzēt, patiesībā viss ir ļoti vienkāršs. Mēģiniet pārbaudīt rezultātu :)
Vlad Merzehevich
Fonts ir neatņemama tīmekļa dizaina sastāvdaļa, sniedz vietnes izteiksmīgumu un atpazīstamību, izsaka vietnes raksturīgo stilu un ir tieši saistīta ar tekstu uztveri. Labi izvēlēts fonts var nebūt pamanīts, bet bez tā nebūs rozīņu, kas dod dizainu vietnes. Pabeigšana.
Ja jums ir īpašs fonts jūsu datorā jau instalēts, tas ir pietiekami, lai pievienotu virkni stilā.
h1 (fonta ģimene: superpuperfont;)
Fonta ģimenes īpašuma vērtība ir fonta austiņu nosaukums, tas attiecas uz visām virsrakstiem.
. Bet kas būs redzams vietnes apmeklētājiem, kuriem ir mūsu iespaidīgs un reti fonts nav instalēts? Šāda situācija ir visdrīzāk, tādēļ, ja pārlūks neatpazīst apgalvoto fontu, tas izmantos noklusējuma fontu, piemēram, Windows tas ir Time New Roman. Visi mūsu rūpīgi pārdomāti fonts dizains nakšņo un iet kā skriešanās, tāpēc jums ir nepieciešams meklēt visvairāk universālu risinājumu. Pirmā lieta, kas nekavējoties nāk prātā, ir organizēt fontu failu lejupielādi lietotāja datorā un parādīt atlasīto tekstu. Salīdzinot ar citām metodēm, piemēram, teksta attēlošana caur attēlu, šī metode ir vienkāršākais un universālākais.
Kādas priekšrocības galā dod mums lejupielādēt fonta failu ar turpmāku lietošanu CSS.
- Teksts ir viegli pievienot un rediģēt.
- Pārlūkprogrammā jūs varat baudīt meklēšanu un atrast vēlamās frāzes.
- Pārlūkprogrammas iestatījumos varat samazināt vai palielināt fonta lielumu, lai sasniegtu ērtu apskati.
- Meklētājprogrammas labi indeksējiet dokumenta saturu.
- Tekstu var izcelt un kopēt buferī, kā arī tulkot uz citu valodu.
- Teksta parametri, piemēram, ierašanās attālums, krāsas, lielums, un tam ir viegli maināmi, izmantojot CSS īpašības.
- Lai tekstu, atkal caur CSS vienkārši pievieno dažādas sekas, piemēram, ēnu.
Kā jūs varat redzēt, daudz priekšrocību. Ir pieejami arī nelieli trūkumi un tie ir jānorāda.
- Ne visas pārlūkprogrammu versijas atbalsta ielādējamo fontu un vienu formātu.
- Fails, kas satur fonta austiņas var aizņem lielu apjomu, tādējādi palēninot tīmekļa lapas lejupielādi.
Cilnē. 1 Uzskaita pārlūka versijas un fontu formātus, kurus viņi atbalsta.
| Formāts | Internet Explorer. | Hroms. | Operas. | Safari. | Firefox. | Android | ios. |
| TTF. | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| Eotogrāfs. | 5.0-8.0 | ||||||
| Woff. | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG. | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Visbiežāk atbalstītais formāts ir TTF. Izņemot IE versiju 9.0 un iOS, visas pārlūkprogrammas to saprot perfekti. Tātad, ja jums ir fonts šajā formātā, un jūs esat vērsti uz mūsdienu pārlūkprogrammām, nav jādara papildu darbības. Pietiekami daudz stilu, lai uzrakstītu šādu kodu (1. piemērs).
1. Piemērs TTF savienošana
HTML5 CSS3 IE 8 IE 9+ cr op sa fx
Sākotnēji jūs ielādējat paša fonta failu, izmantojot @ fonta sejas noteikumu. Iekšpusē, mēs rakstām nosaukumu austiņu fontu caur fonta-ģimenes parametru un ceļu uz failu, izmantojot SRC. Tālāk izmantot fontu kā parasti. Tātad, ja mums ir jānosaka virsraksta fonts, tad H1 selektoram, kā parādīts piemērā, norādiet fonta ģimenes īpašumu ar nosaukumu ielādes fontu. Vecajām versijām IE caur komatiem, mēs uzskaitām rezerves iespējas. Šajā gadījumā nosaukums fonts būs "komikss Sans Ms", jo IE8 un neatbalsta TTF formātu.
Šī piemēra rezultāts ir parādīts 1. attēlā. viens.
Fig. 1. Nosaukums ar lejupielādēto fontu
Ko man darīt, ja jums ir nepieciešams jauks fonts IE8? Par laimi, @ font-face ļauj savienot vairākus dažādus formātus fontu failus tajā pašā laikā. Pārlūks joprojām ir tikai izvēlēties atbilstošu. Tādējādi universāls risinājums, kas darbojas visās pārlūkprogrammās, tiek samazināts, lai pārveidotu pieejamo TTF formātu, lai to varētu savienot abus failus.
Ir vairāki tiešsaistes pakalpojumi reklāmguvumu, kas ļauj jums lejupielādēt TTF failu un iegūt eott failu pie izejas. Diemžēl lielākajā daļā šo pakalpojumu ir viena un tāda pati problēma - fails, ko mēs saņemam, bet krievu valoda tajā netiek atbalstīta. Tā rezultātā vēlamais rezultāts netiek sasniegts, reklāmguvums notiek nepareizi. Starp vietām, kas ir pierādīta, es biju viens pats, kurš parādīja tekstu IE pareizi.
Iet uz šo vietni, ielādējiet TTF failu un nospiediet pogu "Convert TTF uz ot", pēc tam jūs saglabājat iegūto failu mapē ar fontiem. Stili palika neliels triks un veikt dažādas pārlūkprogrammas ielādēt fontu vēlamajā formātā. Lai to izdarītu, pievienojiet divus SRC parametrus. Pirmais norāda EOT failu un ir paredzēts vecākām IE versijām. Otrajā parametrs SRC satur divas adreses, kas uzskaitītas, izmantojot komatu, viens no tiem norāda TTF failu. Fakts ir tāds, ka, ti, 8.0 versija un jaunāks nesaprot komatu SRC parametru un attiecīgi ignorēs visu parametru. Rakstīšanas opcijas var būt vairākas, piemēram, atkārtojiet URL, norādiet fonta nosaukumu vietējā parametra iekšpusē vai rakstīt neeksistējošu fontu. Ja pārlūks nevar ielādēt šādu fontu, tas vērsīsies uz otro sarakstā, un tas ir rakstīts ar mums pareizi. Pieļaujami rakstīšanas veidi.
sRC: URL (fonti / pompadur.ttf), URL (fonti / pompagadur.ttf);
SRC: vietējais (Pompadur), URL (fonti / pompadur.ttf);
SRC: Vietējais ("Bla Bla"), URL (fonti / pompadur.ttf);
Fonta savienojuma opcija visām pārlūkprogrammu versijām tiek parādīta 2. piemērā.
2. piemērs Connect ot
Html5 css3 ti cr op sa fx
Politiskā procesa modernais elements
Faktiski, politiskās mācības Montesquieu noved pie kontinentālās un Eiropas politiskās kultūras veida, kas tika atspoguļots darbos Michels.
Attiecībā uz iOS, dariet un lejupielādējiet atsevišķu fontu SVG formātā, kā šķiet, ka man nav īpaša jēga. Vietu skatīšana caur iOS joprojām ir neliela, turklāt vietnes versija zem mobilajām ierīcēm mēģina atbrīvot, un augšupielādēt papildu dažus desmitus kilobaitu nav vēlams.
Google tīmekļa fonti.
Ērts pakalpojums, kas mācīja rutīnu, lai atbalstītu dažādus fontu formātus un pārlūkprogrammas versijas, jūs atradīsiet www.google.com/webfonts. . Lai gan kolekcija ir salīdzinoši maz dažādu fonti (viņu vairāki desmiti), tie visi ir izvēlēti ļoti augstas kvalitātes un brīvi izmantot vietnēs.
Pirms izvēloties fontu, ieslēdziet skriptu vērtību kirilicam, tad jūs redzēsiet sarakstu ar fontu atbalstīt krievu valodu (2. att.).
Fig. 2. Fontu izvēle Google tīmekļa fontos
Fonts, kuru vēlaties iepriekš pievienot kolekcijai, noklikšķinot uz pogas "Pievienot kolekcijai", un pēc tam uz "Lietot" pogu ekrāna apakšējā labajā stūrī. Nākamajā lapā (3. att.) Visbeidzot varat izvēlēties nepieciešamos fontus. Ir jāsaprot, ka fonta austiņa var saturēt vairākus zīmējumus, un katrs no tiem palielina lejupielādēto failu apjomu.
Fig. 3. Lejupielādējami fonti
Izvēlētos fontus var savienot ar vienu no trim veidiem, pievienoto kodu var kopēt zemāk lapā.
1. Izmantojot elementu . Stringam būs par šādu formu.
2. Izmantojot @Import noteikumu. Ievietojiet šādu virkni jūsu CSS failā pašā augšpusē.
@Import URL (http://fonts.googleapis.com/css?family\u003dphilosopher&subset\u003dcyrillics);
3. Izmantojot JavaScript.
Principā visi veidi ir līdzvērtīgi, tāpēc izvēlieties savā izvēlē.
Šī pakalpojuma piemērošanas priekšrocības ir.
- Fonti ir bezmaksas lietošanai, jums nav jāmaksā par tiem.
- Ierosinātie fonti ir "asināt", lai skatītu ekrānā, faili ir optimizēti un aizņem salīdzinoši neliels apjoms.
- Pārlūkprogramma tiek noteikta automātiski, un fonts tiek izsniegts saskaņā ar to vēlamajā formātā.
Viena no galvenajām priekšrocībām pakalpojuma ir tā, ka fonti tiek glabāti TTF, ot, woff, SVG formātiem un ir ielādēti pēc pārlūkprogrammas pārbaudes. Tādējādi EOT formāts būs pieejams tikai vecajām IE versijām.
Izmantojiet Google tīmekļa fontus vai neatrisināt jūs. Ja jūs tur neesat atradis piemērotu fontu, jūs vienmēr varat savienot populāru un kopīgu TTF. Turklāt to atbalsta visu populāro pārlūkprogrammu jaunākās versijas.
Fonts spēlē tālu no jaunākās lomas dizaina vietā, tā var uzsvērt kopējo stilu, palīdzēt lietotājam orientēties teksta saturā. Meklēt bezmaksas fontus, un pēc tam pievienojiet ķekars failus dažādām pārlūkprogrammām - tas nav pateicīgs, bet ir izeja - fonti no Google fontiem.
Meklējiet piemērotu fontu no Google fontiem
Ejam uz pašu fontu pakalpojumu no Google un brīnās tās iespējas.
Kreisajā (sānu) panelī varat konfigurēt fontu filtrēšanas parametrus un pats svarīgāk izvēlēties tās piederību kirilicam vai latīņu valodai.
Augšpusē jūs varat mainīt demonstrācijas teksta displeju formā: vārdi, ieteikumi, punkts, plakāts. Mainiet fonta lielumu un ievadiet savu tekstu, nevis demo iespēju.
Fonta savienojums no Google fontiem
Kad esat izvēlējies vēlamo fontu, noklikšķiniet uz pogas "Ātrā lietošana" (skatīt attēlu zemāk)
Uz fonta savienojuma lapā, jums ir nepieciešams, lai izvēlētos:
1. Fontu stili, tauki, slīpraksti utt. Nelietojiet paātrināt grūti, izvēlēties tikai visvairāk nepieciešams, jo Tas viss ietekmē ātrumu fontu ielādes un, attiecīgi, lejupielādes ātrumu teksta jūsu vietnē. Izpildiet sensoru rādītājus pa labi (5. punkts attēlā)
2. Izvēlieties, kādas rakstzīmes jums ir nepieciešams šajā fontā (galvenokārt latīņu un kirilica).
3. Kopējiet saites tagu kodu galvas blokā
4. Izmantojiet fonta stilu stilā, kā parādīts 4. punktā (skat. Makarartka)
