Vlad Merzhevitš

Font on veebidisaini lahutamatu osa, annab saidile väljendusrikkuse ja äratundmise, väljendab saidile iseloomulikku stiili ja on otseselt seotud tekstide tajumisega. Hästi valitud fonti ei pruugita märgata, kuid ilma selleta ei teki veebilehe kujundust täiendavat särtsu.

Kui teie arvutisse on juba installitud konkreetne font, siis stiilides piisab rea lisamisest.

h1 (fontide perekond: SuperPuperFont;)

Fondipere atribuudi väärtus on kirjatüübi nimi, seda rakendatakse kõigile pealkirjadele

... Aga mida näevad veebisaidi külastajad, kui neile pole installitud meie tähelepanuväärset ja haruldast fonti? See olukord on kõige tõenäolisem, nii et kui brauser ei tuvasta deklareeritud fonti, kasutab ta vaikimisi fonti, näiteks Windowsis on see Times New Roman. Kogu meie hoolikalt läbimõeldud tüüpi disain mureneb üleöö, seega peame otsima kõige mitmekülgsemat lahendust. Esimene asi, mis kohe meelde tuleb, on korraldada fondifaili allalaadimine kasutaja arvutisse ja kuvada tekst valitud kirjas. Võrreldes teiste meetoditega, nagu teksti kuvamine pildi kaudu, on see meetod kõige lihtsam ja mitmekülgsem.

Millised on fondifaili allalaadimise ja seejärel CSS -i kaudu rakendamise eelised?

• Teksti on lihtne lisada ja muuta.
• Brauseris saate kasutada otsingut ja leida soovitud fraase.
• Mugava vaatamise saavutamiseks saate brauseri seadetes fondi suurust vähendada või suurendada.
• Otsingumootorid indekseerib dokumendi sisu hästi.
• Teksti saab valida ja kopeerida lõikepuhvrisse, samuti tõlkida teise keelde.
• Teksti parameetreid, nagu reavahe, värv, suurus jms, on CSS -i atribuutide abil lihtne muuta.
• Jällegi saate CSS -i kaudu lihtsalt lisada tekstile erinevaid efekte, näiteks varju.

Nagu näete, on sellel palju eeliseid. Sellel on ka väikesed varjuküljed ja neid tasub tasakaalu nimel mainida.

• Mitte kõik brauseri versioonid ei toeta allalaaditavat fonti ja kõigi jaoks sama vormingut.
• Kirjatüüpi sisaldav fail võib hõivata suur maht, aeglustades seeläbi veebilehe laadimist.

Tabel 1 loetleb brauseri versioonid ja nende toetatud fondivormingud.

Tab. 1. Toetatud vormingud

Vorming	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 enam toetatud vorming on TTF. Kõik brauserid, välja arvatud IE kuni versioonini 9.0 ja iOS, saavad sellest suurepäraselt aru. Nii et kui teil on selles vormingus font ja te sihite kaasaegsed brauserid, pole täiendavaid toiminguid vaja. Piisab, kui kirjutada stiilidesse järgmine kood (näide 1).

Näide 1. TTF -i ühendamine

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Esmalt laadige fondifail ise, kasutades reeglit @ font-face. Selle sisse kirjutame fondi perekonna parameetri abil kirjatüübi nime ja faili tee src abil. Järgmisena kasutame fonti nagu tavaliselt. Niisiis, kui meil on vaja määrata pealkirja font, siis valija h1 jaoks, nagu näites näidatud, määrame fondiperekonna atribuudi laaditud fondi nimega. IE vanemate versioonide puhul loetleme varud komadega eraldatuna. V sel juhul pealkirja font on "Comic Sans MS", kuna IE8 ja vanemad versioonid ei toeta TTF -vormingut.

Selle näite tulemus on näidatud joonisel fig. 1.

Riis. 1. Päis allalaaditud fondiga

Mis siis, kui vajate IE8 -s kaunist fonti? Õnneks võimaldab @ font-face kaasata korraga mitu fondifaili. erinevad vormingud... Brauser peab valima ainult sobiva. Seega taandub universaalne lahendus, mis töötab kõigis brauserites, olemasoleva TTF -vormingu teisendamiseks EOT -ks ja seejärel mõlema faili ühendamiseks.

Teisendamiseks on mitmeid võrguteenuseid, mis võimaldavad teil alla laadida TTF -faili ja saada väljundis EOT -faili. Kahjuks on enamikul neist teenustest sama probleem - me saame faili kätte, kuid vene keelt selles ei toetata. Selle tulemusena ei saavutata soovitud tulemust, teisendus on vale. Minu kontrollitud saitide hulgas oli üks, mis näitas teksti õigesti IE -s.

Minge sellele saidile, laadige TTF -fail ja vajutage nuppu "Teisenda TTF EOT -ks", mille järel salvestame saadud faili fontide kausta. Stiilidest on jäänud väike trikk, mis sunnib erinevaid brausereid fondi õiges vormingus laadima. Selleks lisage kaks src parameetrit. Esimene viitab EOT -failile ja on mõeldud IE vanematele versioonidele. Teine parameeter src peab sisaldama kahte komaga eraldatud aadressi, üks neist osutab TTF -failile. Fakt on see, et IE versioon 8.0 ja varasem versioon ei mõista src parameetri koma ja ignoreerib sellest tulenevalt parameetrit täielikult. Õigekirjavalikuid võib olla mitu, näiteks URL-i kordamine, fondi nime määramine kohaliku parameetri sees või olematu fondi kirjutamine. Kui brauser ei saa sellist fonti laadida, läheb see loendis teisele kohale ja meil on see õigesti kirjutatud. Vastuvõetavad kirjutamisviisid.

src: url (fondid / pompadur.ttf), url (fondid / pompadur.ttf);
src: kohalik (pompadur), url (fondid / pompadur.ttf);
src: kohalik ("bla bla"), url (fondid / pompadur.ttf);

Näide 2 näitab töövalikut kõigi brauseriversioonide fondi ühendamiseks.

Näide 2. EOT ühendamine

HTML5 CSS3 IE Cr Op Sa Fx

Poliitilise protsessi kaasaegne element

Tegelikult juhib Montesquieu poliitiline doktriin Mandri-Euroopa tüüpi poliitilist kultuuri, mis kajastus Michelsi töödes.

Mis puutub iOS -i, siis mulle tundub, et SVG -vormingus eraldi fondi tegemisel ja allalaadimisel pole eriti mõtet. IOS -i kaudu seda sirvivate saitide vaatajaskond on endiselt väike, pealegi on saidi versioon all mobiilseadmedüritavad seda lihtsamaks muuta ja pole soovitatav alla laadida veel mitukümmend kilobaiti.

Google'i veebifondid

Mugava teenuse, mis võtab üle erinevate fondivormingute ja brauseri versioonide toetamise rutiini, leiate aadressilt www.google.com/webfonts... Kuigi kollektsioonis on suhteliselt vähe erinevaid fonte (neid on mitukümmend), on kõik need väga kvaliteetsed ja veebisaitidel kasutamiseks tasuta.

Enne fondi valimist lülitage skripti väärtus kirillitsasse, siis näete vene keelt toetavate fontide loendit (joonis 2).

Riis. 2. Fontide valimine Google'i veebifontides

Sulle meelepärane font tuleks esmalt kogusse lisada, klõpsates nupul „Lisa kogusse” ja seejärel ekraani paremas alanurgas asuvale nupule „Kasuta”. Peal järgmine lehekülg(joonis 3) saate lõpuks valida soovitud fondid. Tuleb mõista, et kirjatüüp võib sisaldada mitut stiili ja igaüks neist suurendab allalaaditud failide mahtu.

Riis. 3. Lehele laaditud fondid

Saate valitud fondid ühendada ühega kolm teed, lisatud koodi saab lehele alla kopeerida.

1. Läbi elemendi ... Rida näeb välja umbes järgmine.

2. Läbi @import reegli. Lisame selle rea ülaosas oma CSS -faili.

@importi URL (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. JavaScripti kaudu.

Põhimõtteliselt on kõik teed võrdsed, nii et vali vastavalt oma eelistustele.

Rakenduse eelised seda teenust selline.

• Fonte on tasuta kasutada, te ei pea nende eest maksma.
• Pakutavad fondid on ekraanil vaatamiseks "teritatud", failid on optimeeritud ja võtavad suhteliselt väikese mahu.
• Brauser tuvastatakse automaatselt ja selle jaoks kuvatakse nõutavas vormingus font.

Teenuse üks peamisi eeliseid on see, et fondid salvestatakse TTF-, EOT-, WOFF-, SVG -vormingus ja laaditakse pärast brauseri kontrollimist. Seega on EOT -vorming saadaval ainult IE vanemate versioonide jaoks.

Kas kasutada Google'i veebifonte või mitte, on teie otsustada. Kui te pole sealt sobivat fonti leidnud, saate alati ühendada populaarse ja laialt levinud TTF -i. Pealegi on seda toetatud uusimad versioonid kõik populaarsed brauserid.

// echo get_the_post_thumbnail (get_the_ID (), "relatedthumbnail"); // kuvada minu pisipildi suurus?>

Selles õpetuses näitame teile, kuidas lisada oma paigutusse veebifondid. Veebifondid on täiendavad kirjatüübid, mida kasutatakse kujunduste ainulaadsemaks või mitmekesisemaks muutmiseks. Fondi ühendamine lehel - tagab selle õige kuvamise kõikides brauserites ja pole vahet, kas kasutaja on selle installinud või mitte.

Kuidas fonti Google Fontsist ühendada

Samm - valige font

Teenindus Google'i fondid sellel on suur hulk veebifonte, mida saab ühe reaga projektiga ühendada ja kohe sisse kasutada CSS stiilid... Ainult vaatamiseks kirillitsa fontide valimiseks valige parameetri Script vasakpoolses filtris väärtus kirillitsa (kirillitsa jaoks) või kirillitsa laiendatud (laiendatud kirillitsa jaoks). Pärast seda näidatakse paremal kirillitsat toetavaid fonte.

Kiireks kasutamiseks klõpsake nuppu Kiirkasutus.

2. samm - fondiseadete kohandamine

Järgmisel lehel valime, milliseid kirjatüüpe kasutame. OpenSansil on 10 raskust, alates väga õhukestest kuni eriti paksudeni. Mida rohkem stiile on valitud, seda rohkem mõjutab see lehe laadimise kiirust. Seetõttu tasub ühendada ainult kasutatavad fondid. Pärast seda saate valida tähemärkide komplekti, kirillitsa jaoks valime laiendatud kirillitsa või kirillitsa ja ladina keele.

3. samm - fondi ühendamise kood

Seejärel võtame teie saidiga ühenduse loomiseks koodirida. Tavaline valik - kolmanda osapoole css -faili ühendamine html -ist, vahekaardil @import - css -faili kaudu ühenduse loomiseks on string ja Javascripti jaoks kolmas võimalus. Pärast seda on ühendus valmis ja saate seda kirjatüüpi paigutuses kasutada. Allolevas plokis on näide fondile juurdepääsu kohta: font-family: "Open Sans", sans-serif;

Laiuse määramiseks kasutage parameetrit font-weight: 300; või fondi kaal: 400; fondi kaal: 800; Kaldkiri - fondi stiilis: kursiiv; ...

Kasutamise näide

Selle tulemusel näeb meie CSS -fail välja selline, kui valisime fondi ühendamise CSS -is @importi kaudu:

/ * Fondiühendus */@import url (http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); / * Määrake pealkirja h1 stiil , mis vastab kirjatüübile Light - õhuke suurus * / fondi kaal: 300;)

Tervitused, kallid lugejad. Täna räägime Google'i veebifontidest, kuidas need alla laadida ja saidiga ühenduse luua.

Minge saidile www.google.com/fonts/, valige paremal asuvast filtrist: 1. soovitud kategooria, 2. vajadusel sorteerige need ja 3. valige vajalik keel (kui vajate vasakpoolses menüüs vene fonti, valige Cyrillik).

Nii et oleme valinud fondi, nüüd peame valima selle stiili, selleks laiendage allolevat paneeli ( Avage valikusahtel) ja minge vahekaardile KOHANDA ja valige soovitud stiilid ja keeled.

Allalaadimiseks klõpsake nuppu koormata.

Allalaaditud fondi ühendamine

Kopeerige arhiivis olevad fondid kausta / fonts, mis peaks asuma samas kataloogis teie HTML -saidi kaustaga / css.

Allalaaditud fontide standardühendus näeb välja selline

@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") formaat ("embedded-opentype"), url ("Font_file_name" .eot .woff ") vorming (" woff "), url (" Font_file_name.ttf ") formaat (" truetype "), url (" Font_file_name.svg # DSNoteRegular ") formaat (" svg "); font-weight: normal ; fondi stiil: tavaline;)

Minu puhul näeb ühendus välja selline

/ * Koodi fondi ühendamiseks vormingus /css/style.css * / @ font-face (font-family: "RobotoRegular"; url ("../ fonts / RobotoRegular.ttf") vormingus ("truetype"); font - stiil: normaalne; fondi kaal: normaalne;)

Valitud fondi saidiga ühendamiseks minge vahekaardile EMBED, seal näete kahte ühendamisviisi:

1. STANDARD

See kood tuleb sektsiooni lisada teie HTML -dokument.

2. @IMPORT

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

Oluline. Olenemata ühendusviisist kasutage nende perekondade määratlemiseks järgmisi CSS-reegleid: font-family: ‘Roboto’, sans-serif; sellest lähemalt allpool.

Tere kõigile! Sellest saate lugeda, kirjutasin tunnis 132. Ja selles artiklis räägin teile, kuidas saate kiiresti ja hõlpsalt fondi oma saidiga Google Fontsist ühendada. Google'i fondi teenuses peate valima oma saidi fondi ja seejärel selle ühendama.

Fontfaili pole vaja hostimisse üles laadida. Piisab vajaliku HTML -koodi kirjutamisest saidi päisesse ja uue fondi nime. Fonte saab ühendada mitte ainult WordPressi saidiga, vaid ka mis tahes muu saidiga.

Kuidas ühendada Google'i fondid saidiga

Minema Google'i teenus Fondige sellel lingil ja valige vajalik font.
Fonte saab valida filtri kaudu. See tähendab, et määrame parameetrid ja seega leiab teenus valitud parameetritega fonte.

Vajadusel saate määrata muid parameetreid: paksus (fondi paksus), kaldus (kaldkiri), laius (fondi laius).

Samuti peate valima kirillitsa tähestiku, kui teie sait on vene keeles: tšillill (kirillitsa) või laiendatud tšillillika (laiendatud kirillitsa).

Kui parameetrid on valitud, kuvab teenus kõik fondid, mis on nendega saadaval.

Liigutame hiirekursori fondile, mille soovime saidile installida, pärast mida ilmuvad täiendavad seaded / parameetrid: Kiirkasutus ( kiire kasutamine), Hüpikaken (vaadake fonti sisse eraldi aken) ja Lisa kogusse.

Me valime " Kiire kasutamine"Ja vaata pealt parem pool vidin spidomeetri kujul. See näitab, kui kiiresti valitud font laaditakse. Mida väiksem on selle spidomeetri number, seda parem.

Allpool saate valida ühe kolmest saidi fondi installimise võimalusest: standart, @import või javascript.

Igal valikul on juhised inglise keel kuidas fonti saidiga õigesti ühendada. Ma näitan teile esimest võimalust " standard"Sest see on lihtsam.

Kopeerige punasega esile tõstetud rida ja kleepige see siltide vahele faili header.php ….

Seejärel avage stiilileht style.css, leidke muudetav font ja kirjutage uus. Kirjutame lihtsalt uue fondi nime. Pange Google'i fondid jutumärkidesse, näiteks font-family: "Aladin", Arial, Helvetica, Sans-serif.

Kui te ei saanud üldse millestki aru, siis sellest, mida ma teile siin rääkisin, vaadake videot, kus ma teile üksikasjalikult räägin, Kuidas ühendada Google'i font WordPressi saidiga

______________________
Õppetundi 204. ja ilma pistikprogrammita

Materjali sponsor.
Konditsioneerid veebipoes http://www.technodom.kz/catalog/konditsionery. Konditsioneerid - parim kaup, laenamine, suur valik, laitmatu teenindus.

Tere pärastlõunal, kallid lugejad. Tõenäoliselt unistate kõik oma või kliendi saitide kokkuvõtlikumaks ja atraktiivsemaks muutmisest.

Üks peamisi tegureid, mis vastutab saidi teabe tajumise eest, on fondid ja see, kuidas me neid koos kasutame. Kuna ühel saidil kasutatakse kõige sagedamini kahte või enamat tüüpi fonte, näiteks pealkirjade ja lihtsalt põhiteksti jaoks.

Üks võimalusi tekstide loetavuse visuaalseks parandamiseks on kolmanda osapoole fondide ühendamine. Lõppude lõpuks teavad ilmselt kõik, milline on Windowsi kirillitsa fontide "halb" standardkogu, mis vastutab teksti kuvamise eest brauseris.

Tavalised fondid:

Cufon ja @ font-face

Varem juba kirjutasin sellest, mille abil saate saidile ühendada mittestandardseid fonte. Vaatame nüüd lihtsamat viisi - see on css -i reegel @ font -face ja fondi laadimine Google Fonts poest.

Kogu erinevus Cufoni ja @ font-face vahel on see, et esimene kasutab fondi jäljendamiseks js ja joonistab sümbolid oma vahenditega, samas kui @ font-face laadib fondi ise külastaja arvutisse ja brauser kasutab seda juba teksti.

Igal juhul aeglustavad Cufon ja @ font-face saidi laadimise kiirust, kuigi mitte oluliselt.

Google'i fondide kasutamine saidil

Ma ei hakka palju maalima ja pikka aega toon ühe konkreetse näite Google'i fondide ühendamise kohta, kasutades seda blogi näitena.

Nagu näete, on minu artiklite pealkirjad ja alamrubriigid mittestandardse fondiga, nii et nüüd näitan praktikas teile, kuidas seda teha, ja proovite seda oma saitidel analoogia põhjal.

Fondi valimine hoidlas

Et mitte karta, selgitan - hoidla on hoidla, kuid kodanlikul moel :). Ja nii, me läheme http://www.google.com/fonts/ ja otsige endale sobiv font:

Menüüs pole palju:
Vasakul, nagu näete, on igasuguste fondiotsingu filtritega plokk, milles saate valida näiteks ainult ladina või kirillitsa fondid. Lisaks näite kuvamise seaded, mis on jagatud 4 vaheleheks:

• Sõna- mitme tähe kuvamine. Selles režiimis on mugav võrrelda paljusid fonte korraga ja vaadata, kuidas konkreetsed märgid välja näevad;
• Lause- kuvada ühe lause kujul;
• Lõige- kuvatakse suur tekstitükk, mis võimaldab teil visuaalselt võrrelda juba tekstis olevat fonti;
• Plakat- kuvatakse pealkirjad, see võrdlusmeetod on mugav rubriikides kasutatava fondi valimiseks.

Fondi ühendamine saidiga

Pärast seda minge allservas asuval paneelil Kogumine vahekaardile Kasuta, mis vastutab teie kogust pärit fontide kasutamise eest. Siin näete kohe, et Google näitab, kui palju lehe laadimiskiirus halveneb:

Allpool on paneel, millel on valik "kuva tüüp", valige ladina (ladina) ja kirillitsa (kirillitsa), mis annab meile võimaluse kuvada nii ladina kui ka kirillitsa tähti:

Pärast seda liigume selle lehe kolmanda üksuse juurde, nimelt ühenduse enda juurde. Google pakub meile nende fontide manustamiseks kolme võimalust - js, standardne viisühenduse kaudu ja @import css -failis. Mina kasutan viimast meetodit.

Avame oma css -faili ja kirjutame rea, mille Google meile andis:

See on kõik, me ühendasime fondi saidilt Google Fonts, kuidas seda nüüd kasutada?

Kasutamine CSS -is

Kõik on üsna lihtne, pärast fondi ühendamist @importi kaudu peame registreeruma standardne juhend klasside ja näitajate jaoks, mille jaoks meie uut fonti kasutatakse. Näiteks:

h1, h2, h3 (fontide perekond: 'Cuprum', sans-serif;)

Pärast kõiki neid manipuleerimisi on teil päised uue mittestandardse fondiga.

See on kõik, tänan teid tähelepanu eest ja näeme varsti.