Ieskaitot CSS fontus. Darbs ar tīmekļa fontiem

Sveiki visiem! Par tiem es rakstīju 132. nodarbībā, jūs varat lasīt. Un šajā rakstā es jums pastāstīšu, kā jūs varat viegli un ātri savienot fontu ar savu vietni, izmantojot Google fontus. Pakalpojumā Google fonts jums ir jāizvēlas savas vietnes fonts un pēc tam jāpievieno joga.

Neobov'yazkovo faila fonts zavantazhuvat hosting. Pievienojiet nepieciešamo HTML kodu vietnes galvenē un jaunā fonta nosaukumam. Fontus var savienot ne tikai ar WordPress vietni, bet arī ar jebkuru citu vietni.

Kā vietnei pievienot Google fontu

iet uz Google pakalpojums Fonts pēc mūsu pieprasījuma un izvēlieties vajadzīgo fontu.
Fontus var atlasīt, izmantojot filtru. Tā mēs uzstādām parametrus, un tādā veidā serviss zina fontus ar izvēlētajiem parametriem.

Varat iestatīt arī citus parametrus pēc vajadzības: biezums (fonta izmērs), slīpums (plāns), platums (fonta platums).

Ir arī jāizvēlas kirilicas alfabēts, it kā jūsu vietne būtu krievu valodā: kirilica (kirilica) vai kirilica paplašināta (kirilicas paplašinājumi).

Ja parametri ir atlasīti, pakalpojums parādīs visus fontus, piemēram, tsimi.

Pārvietojiet peles kursoru uz fontu, kuru vēlaties instalēt vietnē, pēc kura tiek pievienoti papildinājumi / parametri: Ātrā lietošana (pārslēgta versija), Iznirst (apskatiet fontu skaidrā logā) un Pievienot kolekcijai (pievienot kolekcijai).

izvēlieties " Ātra lietošana»Es bachimo no logrīka labās puses spidometra redzeslokā. Vіn rāda, ar dažiem swidkіsty zavantazhuєzhuєє obrati fontu. Jo mazāks cipars uz otra spidometra, jo labāk.

Zemāk varat izvēlēties vienu no trim vietnes fonta iestatīšanas opcijām: standart, @import vai javascript.

Uz ādas variantu - norādījumi par Angļu, Kā pareizi savienot fontu ar vietni. Es jums parādīšu pirmo variantu standarta”, Tam, kurš ir vienkāršs.

Rindas kopija ir redzama sarkanā krāsā, un tad mēs ievietojam to header.php failā starp tagiem ….

Atveram style.css failu, noskaidrosim fontu, kas jāmaina, un uzrakstīsim jaunu. Vienkārši pierakstiet jaunā fonta nosaukumu. Fonts Google Fonts tiek ievietots ķepās, piemēram, fontu saime: "Aladin", Arial, Helvetica, Sans-serif.

Lai arī jūs neko nesapratāt par to, par ko es šeit runāju, tad varat noskatīties video, kuru es pastāstu sīkāk, Kā WordPress vietnei pievienot Google fontu

______________________
Pirms nodarbības 204. bet bez spraudņa

Materiāls sponsors.
Gaisa kondicionētāji interneta veikalā http://www.technodom.kz/catalog/konditsionery. Kondicionieri - labākās preces, aizdevumi, liela izvēle, bezdoganny serviss.

Labdien, dārgie lasītāji. Jūs visi atsevišķi saglabājat savas un klientu vietnes kodolīgākas un pielāgojamākas.

Viena no vadošajām amatpersonām, kas ir atbildīga par informācijas izplatīšanu vietnē, fontus un to, ka, piemēram, mi їх vikoristovuєmo uzreiz. Tātad, tāpat kā vienā vietnē, visbiežāk tiek izmantoti divi un vairāk dažādi fonti, piemēram, virsrakstiem un tikai galvenajam tekstam.

Viena no iespējām vizuāli palielināt tekstu lasāmību ir trešo pušu fontu iekļaušana. Adzhe visu zina melodiski, piemēram, standarta kirilicas fontu kolekcija sistēmā Windows, piemēram, teksta displejs pārlūkprogrammā.

Standarta fonti:

Cufon un @font-face

Iepriekš es jau rakstīju par to, ar kura palīdzību jūs varat pievienot vietnei nestandarta fontus. Un tagad apskatīsim vienkāršāku veidu — @ font-face noteikumu css un paša fonta maiņu no Google Fonts fontu kolekcijas.

Visa atšķirība starp Cufon un @ font-face ir tāda, ka pirmais uzvarošais js, kas savā veidā emulē fontu un promolovy simbolus, un @ font-face pārsūta pašu fontu uz datoru, izmantojot pārlūkprogrammu, un vicorist js teksta attēlošanai. .

Kādu iemeslu dēļ Cufon un @font-face maina vietnes intereses ātrumu, lai gan tas nav būtiski.

Google Fonts Wikipedia vietnē

Ilgi par daudz nerakstīšu, sniegšu konkrētu piemēru Google Fonts savienojumam, sava emuāra aplikācijā.

Tieši tāpat rakstu virsraksti un apakšvirsraksti ir rakstīti nestandarta fontos, es jums parādīšu, kā to izdarīt praksē, un jūs pēc analoģijas izmēģināsit to savās vietnēs.

Repozitorijā izvēlieties fontu

Ščobs neiepļaukāja, paskaidrošu - krātuve ir dārgums, bet buržuāziski :). Tātad, ejam uz http://www.google.com/fonts/ un mēs paši brīnāmies par atbilstošo fontu:

Či ēdienkartē nav smieklīgi:
Zliva kā bahīts maina bloku ar visādiem filtriem, lai meklētu fontus, kuros var izvēlēties, piemēram, tikai latīņu fontus vai kirilicu. Un zvēram – dibenu parādīšanas iestatījumi, kas sadalīti 4 cilnēs:

• Vārds- dekilkoh burtu parādīšana. Šajā režīmā varat manuāli apskatīt bagātīgu fontu un brīnīties, kā izskatās konkrētas rakstzīmes;
• Teikums- viena vārda parādīšana;
• paragrāfs- tekstam tiek parādīts lielisks shmatoks, kas ļauj nejauši mainīt fontu jau pašā tekstā;
• Plakāts- tiek parādīti virsraksti, šāds fonta sakārtošanas veids, kas tiks atlasīts virsrakstos.

Fonta savienošana ar vietni

Šī iemesla dēļ kolekcijas panelī, kas atrodas apakšā, atveriet cilni Izmantot, jo tā atbilst fontu izvēlei no jūsu kolekcijas. Šeit jūs varat redzēt, ka Google parāda, ka lapas ātrums pasliktinās:

Zemāk ir panelis ar “rūgšanas veida” izvēli, izvēlieties latīņu (latīņu) un kirilicas (kirilicas), kas dos mums iespēju attēlot gan latīņu, gan kirilicas burtus:

Pēc tam mēs pārejam pie trešās rindkopas trešajā pusē un pati par sevi pie paša savienojuma. Google parāda trīs iespējas, kā izveidot savus fontus — izmantojot js, standarta veids ir izveidot savienojumu ar un @importēt css failā. Es izmantošu vikorista kreiso ceļu.

Atveriet savu css failu un ierakstiet rindu, kamēr mēs nospiežam google:

Tas arī viss, mēs esam pievienojuši vietnei tādu fontu kā Google Fonts. Kā es varu to pagriezt?

Wikiavots CSS

Viss ir viegli izdarāms, jo esam pievienojuši fontu caur @import, mums ir jāuzraksta standarta instrukcijas šīm klasēm un rādītājiem, kuriem tiks izvēlēts mūsu jaunais fonts. Piemēram:

h1, h2, h3 (fontu saime: 'Cuprum', sans-serif;)

Pēc visām šīm manipulācijām jums būs virsraksti ar jaunu, nestandarta fontu.

Tas arī viss, paldies par cieņu un zviedru cūkām.

Es jūs mīlu, mani lasītāji. Šodien mēs runāsim par Google fontiem (google tīmekļa fontiem), kā tos iegūt un izveidot savienojumu ar vietni.

Dodieties uz vietni www.google.com/fonts/, Labajā pusē esošajā filtrā atlasiet: 1. Man vajadzēs kategoriju, 2. ja nepieciešams, kārtojiet їх i 3. mēs atlasīsim mums vajadzīgo valodu (tā kā izvēlnē ir nepieciešams krievu fonts Kirilika).

Mēs arī izvēlējāmies fontu, tagad ir jāizvēlas tas pats krusts, kuram atvērt paneli no apakšas ( Atveriet atlases atvilktni) І dodieties uz cilni PIELĀGOT un izvēlieties kristību un valodas nepieciešamību.

Lai ieinteresētu, nospiediet pogu lejupielādēt.

Pielāgota fonta pievienošana

Kopējiet arhīvā esošos fontus mapē / fonts, jo tai vajadzētu atrasties tajā pašā direktorijā, kurā atrodas jūsu HTML vietnes / css mape.

Standarta fontu lejupielādes savienojums izskatās šādi

@ Font-face (fontu saime: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #Iefix") formāts ("embedded-opentype"), url ("Font_file_name" .woff ") formāta (" woff "), url (" Font_File_Name.ttf ") formāts (" truetype "), url (" Font_File_Name.svg # DSNoteRegular ") formāts (" svg "); fonta svars: normāls; fonts -stils: normāls ;)

Mans savienojums izskatīsies šādi

/* Kods, lai iekļautu fontu /css/style.css * / @ font-face (fontu ģimene: "RobotoRegular"; url ("../fonts / RobotoRegular.ttf") formātā ( "truetype"); fonts - stils: normāls; fonta svars: normāls;)

Lai fontu savienotu ar vietni, atveriet cilni iegult, Šeit jūs varat atrast 2 veidus, kā izveidot savienojumu:

1 STANDARTS

Dānijas kods ir nepieciešams papildināt sadaļu savu HTML dokumentu.

2. @IMPORTĒT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Svarīgs. Ja tas nav atkarīgs no savienojuma metodes, lai norādītu šīs ģimenes, izmantojiet šādus CSS noteikumus: font-family: 'Roboto', sans-serif; vairāk par to zemāk.

Protams, ir dažādi spraudņi, lai jūsu WordPress vietnei pievienotu Google tīmekļa fontus, taču, ja izvēršat savu motīvu, iespējams, tas būs cieši jāsaskaņo ar savu tipogrāfiju, apejot spraudņus. Tālāk mēs parādīsim, kā motīvā atzīmēt Google tīmekļa fontus.

Par vālīti ejam uz vietni Google tīmekļa fonti un izvēlieties fontu, kas mums ir nepieciešams zastosuvat tēmās. Ar speciālu instrumentu palīdzību, no kreisās malas sabobināts, jokam apskaņot laukumu, fontu lauskas ir bagātīgi bagātas. Es zināju, ka nosaukumiem un emuāra nosaukumam ir nepieciešams trekns serif fonts, tāpēc nolaižamajā izvēlnē Kategorijas atlasīju serif un pēc tam pārvietoju slīdni Biezums pa labi.

Rezultātā 617 ieteica mazāk opciju, vienmērīgi pārcēlās uz 5. Jums ir daudz iespēju, tāpēc varat redzēt fontu priekšējo skatu — varat brīnīties, kā jūs skatīsities uz vārdu, runu, teksta rindkopu. vai plakāts redzamajā fontā. Jūs varat izvēlēties tekstu priekšā uzdevumiem, varat iestatīt savu tekstu, izvēlēties nepieciešamo fonta lielumu.

Ja zināt tikai fontu, kuru vēlaties iekļaut savā vietnē, vienkārši noklikšķiniet uz pogas Pievienot kolekcijai.

Savai kolekcijai varat pievienot desmitiem fontu. Tomēr neuztraucieties. Pat ja jūs varat būt piesardzīgs, tas joprojām nenozīmē, ka esat vainīgs, ka baidāties. Mēģiniet ieskauj sevi ar ne vairāk kā trim fontiem. Un vēl labāk par diviem. Produktivitātes nolūkos man joprojām ir jāizmanto vecs, tīmeklim draudzīgs fonts vietnes pamattekstam un jāizvēlas tīmekļa fonts virsrakstiem un citiem elementiem, lai uzsvērtu īpašu dzīvīgumu vai cieņu pret sevi. Rūpējieties par savu fontu skaidrību — nelietojiet vikoristovuvaty yaskravy fontu, jo jūsu skatītāji nevar saprast rakstīto.

Ja kolekcijai pievienojat fontus, varat tos pievienot zilajai sadaļai vietnes apakšā. Tiklīdz jūsu kolekcijā ir fonti, ja vēlaties izcelt, vienkārši noklikšķiniet uz pogas Lietot.

Ja dodaties uz ekrānu, kurā tiks parādīta instrukcija, kas sastāv no vairākiem blokiem. Jūs nezināt, kā attaisnot fontus. Kā vēlaties izvēlēties fontus saviem iecienītākajiem? grafiskais redaktors Ja vēlaties novērtēt un izveidot jauku screenshot.png ekrānuzņēmumu savai tēmai, vienkārši noklikšķiniet uz pogas Lejupielādēt fontus pašā lapas augšdaļā. Ja vēlaties vienkārši ievirzīt fontu savā motīvā, jums tas nav jāpārvieto datorā.

Pirmajā lapā varat izvēlēties fontā iekļaujamos stilus un krāsas. Izmantojot citu saīsni, varat pāriet uz rakstzīmju grupu, kuru vēlaties savienot. Tātad jūs varat novērtēt, kā jūsu fontu kolekcija izskatās lapas platajā pusē.

Tagad mēs pārejam pie trešā griezuma, kas nav tik vienkārši, kā tas bija iepriekš. Trešajā darbībā mēs pieņemam kodu, kas jums jāpievieno mūsu vietnēm — trīs dažādas iespējas. Izvēlieties opciju Standarta — izpildiet Google norādījumus, lai uzlabotu nogurušās metodes, kā pievienot stilus WordPress motīviem. Standarta versijas kods tikai kopē URL, kas ir norādīts kā saites taga atribūts href.

Atvērsim failu ar šīm functions.php. Mēs veidojam funkciju, lai satvertu CSS, kas tiks parādīta mūsu tēmā:

Funkcija ggl_load_styles()()

Vai vēlaties ggl prefiksu manai funkcijai? Šī ir viena no veiksmīgākajām WordPress praksēm. Vienmēr pievienojiet WordPress funkciju nosaukumus pirms tā, lai samazinātu pretrunu risku ar citām motīva, pakārtotā motīva vai spraudņu funkcijām.

Tagad šajā funkcijā mums ir jāreģistrē sava stila lapa, kuru es noņemšu no Google:

Funkcija ggl_load_styles () (ja (! Is_admin ()) (wp_register_style ( "googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script");))

Mēs izmantojam funkciju wp_register_style. Pirmais arguments ir deskriptors, tāpēc tas ir īss, lai mēs varētu uzlauzt, lai pārveidotu par stila tabulu mūsu kodā. Vēl viens arguments ir ceļš uz failu. Mēs esam uzvarējuši URL, ko esam izmantojuši trešajā Google instrukciju tamborējumā.

Pievienosim mūsu motīvam galveno stila lapu. Varu derēt, ka neesat ievietojis saites tagu header.php faila header sadaļā? Ja tā, atveriet failu un izdzēsiet visu kodu. Iekļausim stila lapu failā functions.php:

Funkcija ggl_load_styles () (if (! Is_admin ()) (wp_register_style ( "googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style ( "ggl" ", get_stylesheet_uri(), masīvs("googleFont"));))

Mēs uzvarējam wp_enqueue_style funkciju. Wp_register_style argumentu nav. Mēs to saistīsim atpakaļ ar mūsu stila tabulas deskriptoru. Dosimies ceļu uz mūsu stila lapu. Par laimi, programmā WordPress stilus var iegūt, izmantojot funkciju get_stylesheet_uri(). Pēc tam, ko mēs parādām papuvi. Mūsu style.css fails ir atrodams Google tīmekļa fontu stila lapā.

Lūk, mēs tviterī ievietojām wp_enqueue_scripts āķi mūsu wiki funkcijai:

Funkcija ggl_load_styles () (if (! Is_admin ()) (wp_register_style ( "googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style ( "ggl" ", get_stylesheet_uri(), array("googleFont"));)) add_action("wp_enqueue_scripts", "ggl_load_styles");

Funkcijas.php fails ir izlabots. Tagad mēs esam zaudējuši pārējo kājstarpes, lai vikoristovuvat vibranium fontu. Quarter Croc in Google norādījumi parādiet, kā mums ir jānodod fontu saimei tiesības dot priekšroku mūsu fontam. Es vēlos nolaupīt visus savus titulus Holtwood One SC fontā:

H1, h2, h3, h4, h5, h6 (fontu saime: "Holtwood One SC", serif;)

Un es vēlos aprakstīt vietni Rouge Script fontā:

Vietnes apraksts (fontu saime: "Rouge Script", kursīvs;)

Visi! Neko vairāk nevajag! Jūs esat pievienojis Google tīmekļa fontus saviem WordPress motīviem. Vikoristovyte їх vіdpovіdalno!

Es jūs mīlu, mani lasītāji. Šodien mēs runāsim par Google fontiem (google tīmekļa fontiem), kā tos iegūt un izveidot savienojumu ar vietni.

Dodieties uz vietni www.google.com/fonts/, Labajā pusē esošajā filtrā atlasiet: 1. Man vajadzēs kategoriju, 2. ja nepieciešams, kārtojiet їх i 3. mēs atlasīsim mums vajadzīgo valodu (tā kā izvēlnē ir nepieciešams krievu fonts Kirilika).

Mēs arī izvēlējāmies fontu, tagad ir jāizvēlas tas pats krusts, kuram atvērt paneli no apakšas ( Atveriet atlases atvilktni) І dodieties uz cilni PIELĀGOT un izvēlieties kristību un valodas nepieciešamību.

Lai ieinteresētu, nospiediet pogu lejupielādēt.

Pielāgota fonta pievienošana

Kopējiet arhīvā esošos fontus mapē / fonts, jo tai vajadzētu atrasties tajā pašā direktorijā, kurā atrodas jūsu HTML vietnes / css mape.

Standarta fontu lejupielādes savienojums izskatās šādi

@ Font-face (fontu saime: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #Iefix") formāts ("embedded-opentype"), url ("Font_file_name" .woff ") formāta (" woff "), url (" Font_File_Name.ttf ") formāts (" truetype "), url (" Font_File_Name.svg # DSNoteRegular ") formāts (" svg "); fonta svars: normāls; fonts -stils: normāls ;)

Mans savienojums izskatīsies šādi

/* Kods, lai iekļautu fontu /css/style.css * / @ font-face (fontu ģimene: "RobotoRegular"; url ("../fonts / RobotoRegular.ttf") formātā ( "truetype"); fonts - stils: normāls; fonta svars: normāls;)

Lai fontu savienotu ar vietni, atveriet cilni iegult, Šeit jūs varat atrast 2 veidus, kā izveidot savienojumu:

1 STANDARTS

Sadaļā jāpievieno dāņu kods savu HTML dokumentu.

2. @IMPORTĒT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Svarīgs. Ja tas nav atkarīgs no savienojuma metodes, lai norādītu šīs ģimenes, izmantojiet šādus CSS noteikumus: font-family: 'Roboto', sans-serif; vairāk par to zemāk.