Mindent önállóan megtanulni nem könnyű, de nagyon érdekes. Ha legalább felületesen érti az oldal működését, akkor a projekt megvalósításához jobb, ha maga csinálja. Ezzel nemcsak sok pénzt takaríthat meg, hanem sok "zsetont", titkot is megtanulhat. A Google betűtípusok használata általában nem vonzza a figyelmet, bár nekik köszönhetően a blog sokkal érdekesebbé válhat.

Szolgáltatás

Nagyon régen megjelent egy nagy webes betűtípus -szolgáltatás az interneten. A Google fejlesztette ki. A felhasználók ingyen használhatták. Annak ellenére, hogy az ilyen típusú beállításokat nem tartják szuper nehéznek, még mindig voltak olyan emberek, akik hibáztak, és nem tudtak megbirkózni a szolgáltatással.

Kifejezetten erre a célra egy egyszerű kialakítást fejlesztettek ki. A Google Betűtípusokkal most könnyebben lehet dolgozni, és több látogatóval. A könyvtár is bővült. Tavaly a szolgáltatást újratervezték, és sok pozitív értékelést kapott. Az emberek most könnyebben csatlakozhatnak a betűtípusokhoz és böngészhetnek a webhelyükön.

Megjelenés

Tehát azok számára, akik még soha nem jártak az oldalon a régi kialakítással, általános képet kell kapnia a változásokról. A szolgáltatás régebben elég hatalmasnak tűnt. Mindenhol vastag keretek, fülbemászó kék gombok voltak, a grafika nem a legnagyobb felbontású. Mindez nagyban befolyásolta a látogatót.

Most a fejlesztők az anyagtervezésre összpontosítottak. Minden kifinomult funkciókat kapott. A megjelenés "világosabb" lett. A finom animáció és az interaktivitás észrevehetővé vált. Már semmi sem vonja el a figyelmet a megfelelő Google Fonts kiválasztásáról.

Megjelent az erőforrás kényelmes adaptációja a mobil eszközökhöz. Természetesen egy ilyen változás nem nagyon észrevehető az újítások hátterében, de figyelembe véve az előző verzió hibáit, "égi mannává" válik a lelkes felhasználók számára.

Lehetőség

A tervezők gyakran használják ezt a szolgáltatást. Tapasztalataik és profizmusuk ellenére vizualizációval is dolgoznak. Az újratervezés ezen funkciók közül többet mutatott be, amelyek lehetővé teszik, hogy előre összekapcsolja a projekt későbbi megvalósításának szükségességét.

Ezért eltűnt az a probléma, hogy az egyik betűtípust kombinálják egy másik színnel és egy harmadik háttérrel. A cég további eszközöket és univerzális hangszínekkel rendelkező palettát adott az oldalhoz, amelyek lehetővé teszik számukra, hogy kísérletezzenek, és megtudják, hogyan néz ki egy adott betűtípus egy adott színben.

Kedvencek

A Google Fonts szolgáltatás a felhasználók kedvenceiből kínál válogatást. Egy speciális lapon olyan stíluskészletek találhatók, amelyeket a fejlesztő ajánl. Ezek a gyűjtemények kiemelkednek a többi közül. Ezeket a Google és a külső ügynökségek szakértői fejlesztették ki. Legtöbbjüknek van egy bizonyos stílusa és sajátos filozófiája.

Kilátás

Az egyik fontos változás közvetlenül érintette a betűtípusok kiválasztását. Ez azt jelenti, hogy korábban a felhasználó látott maga előtt egy bizonyos rajzot további gombokkal és egy nagy kék színnel, amely hozzáadta a betűtípust a gyűjteményhez. Általánosságban elmondható, hogy ez a lehetőség jól nézett ki, de a dobozban nem mindig volt kellően jó felbontású kép a stílushoz képest, ezért nehéz volt egyértelműen meghatározni a betűtípus megjelenését.

Kérdések is merültek fel ezekkel a kiegészítő gombokkal kapcsolatban, amelyekről első pillantásra keveset tudtak. Szükséges volt vagy irányítani őket, vagy használni őket. Most már többé -kevésbé világos lett minden. További funkciók jelentek meg:

• Válasszon ki egy adott mondatot, bekezdést vagy saját szövegelemet.
• Kísérletek betűsúlyokkal.
• Gyors méretállítás a csúszka segítségével.

Egyébként a Google betűtípus -átméretezése most jobban reagál, mivel csak egy példa változott, nem minden az oldalon. A régi verzióban a felhasználók átléphettek az oldal egyik oldaláról a másikra, de az új verzióban Ön egyszerűen a példán marad, amelyet módosít.

Kapcsolat

Ha készen áll a szolgáltatás használatára, megpróbálhatja betűtípusokat csatlakoztatni az erőforráshoz. A link megszerzésének folyamata univerzális. A CMS rendszertől függően problémák merülhetnek fel. Mindegyik a saját módszereit használja. Ezért a különböző projektekhez külön lehetőségeket kell választania.

Megnézzük, hogyan lehet linket szerezni a Google betűtípusok összekapcsolásához. El kell mennie a Google Fonts hivatalos webhelyére. Itt böngészhet a stíluskatalógusban, és kiválaszthatja az igényeinek leginkább megfelelőt. Ehhez nyomja meg a mellette lévő plusz jelet. Ezt követően a betűtípust hozzáadjuk egy speciális blokkhoz az oldal alján.

Kattintson erre a blokkra, és szabja tovább. Itt kiválaszthatja a stílusokat és a kívánt ábécét. Ha Google cirill betűtípusokra van szüksége, akkor ellenőrizze a cirill betűt. Ezt követően létrejön egy link. Ugyanebben az ablakban található a Beágyazás lapon. Csak másolja le, vagy használja a teljes HTML kódot.

Általában a webhely beállításaiban van egy betűtípus- és színbeállítás. Vannak szabványos lehetőségek, és hozzáadhat speciálisakat. Külön opciót tartalmaznak a Google Fonts számára. Ha az Öné, akkor le kell töltenie a betűtípusokat a Supreme Google Webfonts beépülő modulon keresztül.

Népszerű lehetőségek

Természetesen nehéz megítélni, hogy melyik stílus a legjobb, különösen a különböző webhely témák esetében. A webhely létrehozásakor ne feledje, hogy nem Önnek kell tetszenie, hanem a közönségének. Ezért jobb, ha közelebbről megvizsgálja a versengő webhelyeket.

Általában a kereskedelmi forrásokért senki sem törődik a stílusokkal. Végtére is, ha egy betűtípust lát a Google Chrome -ban egy online áruházban, akkor valószínűleg nem foglalkozik vele. De ha egy blog van előtted, akkor valószínűleg tetszeni fog valami, de valami éppen ellenkezőleg, bosszantó lesz.

A Google Fonts számos gyűjteményt készített, amelyek népszerű stílusokat is tartalmaznak. Például a homár a szöveg egyes blokkjait használja. Nehéz olvasni, ha az egész cikket ilyen vastag dőlt betűvel írják. De a betétek és idézetek jól néznek ki.

A Bad Script egy lehetőség a blogolásra is. A dőlt betűvel nehéz nagy szövegtömböket olvasni, de kiemelhetik a fő gondolatot. A stílus utánozza a kézírást. A Jura normal 400 érdekes változata a cirill ábécének. A szerző azt állítja, hogy ez egy Eurostyle a Sans-Serif családból. Nagyon jól néz ki, és több variációja is van.

Ennek a fejezetnek az első része a CSS betűtípusok bevezetésével foglalkozik. Ezen az oldalon megtudhatja, hogyan kell betűtípusokat beépíteni a CSS -be, milyen webes betűtípusok és hogyan kell velük dolgozni, milyen betűtípusformátumok vannak, hogyan kell használni a Google betűtípusokat. Először nézzünk egy egyszerű példát a CSS betűtípus csatlakoztatására:

P (betűtípus-család: Verdana;)

Ez a kis kódrészlet azt jelenti, hogy minden címke

A betűtípus Verdana. A font-family tulajdonság megadja, hogy melyik betűtípust vagy betűcsaládot kell használni. Ennek a stílusnak a megfelelő megjelenítése a felhasználó böngészőjében attól függ, hogy a megadott betűtípus telepítve van -e a számítógépére. Esetünkben, ha a Verdana betűtípus hiányzik a felhasználó számítógépéről, a böngésző megjeleníti az alapértelmezett betűtípust.

Egy időben a tervezőknek több tartalék betűtípust is meg kellett adniuk arra az esetre, ha a fő hiányzik a felhasználó számítógépéről. Tegyük fel, hogy a Verdana betűtípussal szeretné formázni a szöveget, és tartalékként telepítse a Trebuchet MS-t, a genfi ​​betűtípusokat és minden sans-serif betűtípust. Így van írva:

P (betűtípus-család: Verdana, "Trebuchet MS", Genf, sans-serif;)

A kód feldolgozása során a böngésző először ellenőrzi a Verdana betűtípus jelenlétét a felhasználó számítógépén. Ha a betűtípus jelen van, akkor a címkék tartalma

Ebben a betűtípusban jelenik meg. Ha a betűtípus hiányzik, a böngésző ellenőrzi a lista következő betűkészletét - Trebuchet MS. Ha ez a betűtípus hiányzik, a következő betűtípust ellenőrzik - Genf. Ha a felhasználó számítógépén nincs Genf, a böngésző kiválaszt egy másik elérhető sans-serif betűtípust, és megjeleníti a szöveget.

Jegyzet: a kódban idézőjelbe írtuk a Trebuchet MS betűtípus nevét. Szükséges a betűtípus nevét kettős vagy egyetlen idézőjelek közé tenni, ha szóközöket tartalmaz.

A Wikipédia oldalon olvashat arról, hogy mi a serif és a sans-serif betűtípus.

Webes betűtípusok

A betűtípusok fenti használatának hatalmas hátránya van - korlátozott a betűtípusok száma. Csak azokkal a beállításokkal kell megelégednie, amelyek valószínűleg a legtöbb számítógépre telepítve vannak.

Hogyan növelheti a betűtípusok választékát, hogy egyedivé tegye az oldaltervezést, adjon hozzá eredetiséget? A webes betűtípusok segítenek. Olvassa el a fejezetet, hogy megtudja, hogyan kell velük dolgozni.

Tehát ahhoz, hogy a kívánt betűtípust megjelenítsük a felhasználó böngészőjében, ezt a betűtípust le kell töltenünk a számítógépére. Ezt elég könnyű megvalósítani. A betűtípusok CSS -hez való csatlakoztatásának ez a módja igazán nagy lehetőségeket nyit meg a tervezők számára. De érdemes megemlíteni a legyet: először is nem minden böngésző támogat bizonyos betűtípus -formátumot (ami azt eredményezi, hogy a betűtípus nem jelenik meg), másrészt, ha a betűtípussal rendelkező fájl súlya nagy, akkor lelassulhat az oldal betöltése.

Formátum támogatás

Hogyan kell kezelni a fájlformátum -eltéréssel kapcsolatos problémát? Vessünk egy pillantást a legnépszerűbb betűtípusformátumokat bemutató táblázatra, és nézzük meg, mely böngészők támogatják őket:

Jegyzet: A legfrissebb információkat a betűtípus formátum támogatásáról mindig a caniuse.com webhelyen találja. A keresősávba be kell írnia a formátum nevét (például ttf).

Ha a modern böngészőket célozza, akkor csak a TTF betűtípust használja - a leggyakoribb és leggyakrabban használtat. Abban az esetben, ha többféle betűtípussal kell rendelkeznie, speciális online konvertereket használhat egyik formátumból a másikba, majd egyesével csatlakoztathatja az összes fájlt. Így a böngésző kiválaszthatja a betűtípus formátumát, amellyel működik.

Beleértve a webes betűtípust a @ font-face használatával

Tegyük fel, hogy rendelkezik saját egyedi betűtípussal, MyUniqueFont néven TTF formátumban, és szeretné, ha weboldalának fő szövege ezzel a betűtípussal jelenjen meg. Az első dolog, amit másolnia kell a betűtípus fájlt abba a mappába, ahol az összes többi webhelyfájl található. A rendetlenség elkerülése érdekében létrehozhat egy külön mappát kifejezetten a betűtípusokhoz, például betűtípusokat.

@ font-face (font-family: MyUniqueFont; src: url ("font / MyUniqueFont.ttf");)

A font-family tulajdonság ebben az esetben más szerepet játszik: ezzel egy nevet rendelünk a betűtípushoz, így ezt a nevet használhatjuk a stílus írásakor:

P (betűtípus-család: MyUniqueFont;)

A második sor a betűtípus fájl elérési útját adja meg. Példánkban a MyUniqueFont.ttf fájl a betűtípusok mappában található. URL -je eltérő lehet.

Google betűtípusok

A Google megkönnyíti a betűtípusok összekapcsolását a Google Fonts gyűjteményéből. Mindössze annyit kell tennie, hogy elkezdi használni a kívánt betűtípust, ha megad néhány beállítást a Google betűtípus oldalán, majd másolja a speciális linket erre a betűtípusra, és adja hozzá a webes dokumentumhoz.

Jegyzet: a Google összes betűkészlete elérhető a webhelyen Google betűtípusok... Az oldalon különféle szűrőkkel kereshet betűtípusokat kategória, vastagság, ábécé szerint.

Az alábbiakban leírjuk a Google betűtípusának összekapcsolásának minden lépését. Hogy megértsük, miről van szó, válasszon ki egy betűtípust a Google Betűtípusok oldaláról, és nyissa meg a Gyorshasználat gombra kattintva.

Lépés: válasszon egy arcot

Először is, a kiválasztott betűtípus oldalán megjelennek a stílus beállításai, valamint a sebességmérő ikon, ami nem jelent mást, mint a betűtípus betöltési sebessége. Minél több stílust választ egy betűtípushoz, annál hosszabb ideig tart a letöltés. Ezért ajánlott csak azokat a betűtípus -beállításokat választani, amelyeket használni kíván.

2. lépés: válasszon ábécét

Az oldalon további lehetőség van karakterkészlet kiválasztására: latin, cirill stb. A betűtípustól függően nem minden ábécé -változat érhető el benne. Az előző ponthoz hasonlóan jobb, ha egy kullancsot csak a szükséges ábécé elé tesz.

3. lépés: Adja hozzá a kódot a webhelyhez

Az első módszer egy hivatkozás hozzáadása a Google szerveréhez a HTML -kódban, ahonnan a betűtípust letöltik. Másolja le a kész kódrészletet, és helyezze a címkék közé a HTML dokumentumban. Példa:

...

A második módszer a betűtípus csatlakoztatása a @import irányelv használatával. A kész kód a 3. pont második fülén található a kiválasztott Google betűtípus oldalán. A stíluslap legelején kell hozzáadni (különben a fájl nem lesz importálva). A kód így néz ki:

@import URL (http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Az első módszer sajátossága, hogy minden olyan oldal címében hozzá kell adni egy linket a betűtípushoz, ahol azt tervezi használni. Ezt könnyű megtenni a kevés oldalas webhelyeken, de nagy erőforrások esetén problémás. A második módszer kényelmes abban az értelemben, hogy a kódot a külső stíluslap legelején lehet elhelyezni, és akkor minden oldal, amelyhez ez a táblázat kapcsolódik, megkapja a szükséges betűtípust, amelyet a @import irányelv segítségével töltenek be.

4. lépés: Hozza létre a stílust

Az előző lépések elvégzése után megkezdheti a betűtípus alkalmazását. Látta, hogy egy ilyen CSS -szabály hogyan íródott korábban:

P (betűtípus-család: "Roboto", sans-serif;)

Ha az első lépésben több opciót választott a stílushoz (például hozzáadott egy félkövér típusú Bold 700 változatot), akkor a harmadik lépésben a kód kissé módosul:

@import URL (http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Ha a betűtípust félkövérré szeretné tenni, írja be a CSS stílust a következőképpen:

P (font-család: "Roboto", sans-serif; font-weight: 700;)

Jegyzet: A Google Betűtípusok csak hagyományos egységeket használ 100 és 900 között a betűsúly jelzésére. Például a normál stílus (alapértelmezés szerint) 400 (normál), a szabványos félkövér pedig 700 (félkövér).

A Google Fonts szolgáltatás fő előnyei a következők:

• egyszerű használat (még egy kezdő is kitalálja a szolgáltatást, és az összes szükséges kód automatikusan generálódik - csak másolni kell);
• a betűtípusok elérhetősége (nem kell fizetni értük);
• minden használt betűtípus -formátum rendelkezésre áll (ez azt jelenti, hogy minden böngésző pontosan azt a betűtípus -formátumot tudja letölteni, amellyel működik).

A szolgáltatás hátrányai között nem szerepel a betűtípusok nagyon széles választéka, különösen a cirill betűk. Egyébként vannak más hasonló szolgáltatások is az interneten, például TypeKit (fizetős).

Eredmények

Ma több lehetőségünk van az eredeti és nem szabványos betűtípusok weboldalakhoz való csatlakoztatására. Ezen módszerek mindegyikének megvannak a maga előnyei és hátrányai. Melyik opciót érdemes használni, akkor saját maga határozza meg. Ez gyakran a helyzettől függ, és különböző esetekben különböző megközelítések lehetnek hasznosak. Ezen a ponton csak tudnod kell, hogyan kell használni a betűtípusokat a CSS -ben.

A Google Fonts az ingyenes webes betűtípusok egyik legjobb forrása, és a Google számos módot kínál azok importálására a webhelyére. Sajnos egyikük sem tartalmazza a népszerű WordPress motort. Ez azt jelenti, hogy vagy bővítményeket kell használnia, amelyekből rengeteg van, vagy meg kell piszkítania a kezét a kóddal való elrontással.

A jó hír az, hogy bármilyen betűtípust telepíthet a Google könyvtárából szinte bármilyen WordPress témára, túl sok gond nélkül. Hogyan pontosan - ma megtanítjuk.

Két lehetőség van - csatlakoztassa a bővítményt, vagy bánjon egy kicsit a function.php fájllal.

De először szeretném felsorolni a Google Fonts előnyeit és hátrányait, hogy végül eldönthesse, hogy használja -e ezeket projektjeiben vagy sem.

Jó és rossz Google webes betűtípusok

Ami a webes betűtípusokat illeti, a Google az egyik legjobb lehetőség. teljesítményét tekintve ... Mindezt a könnyű konstrukció és a gyorsítótárazási rendszer miatt. A látogatóknak nem kell megvárniuk a Google Betűtípusok betöltését, ha nemrégiben felkeresték az azokat használó webhelyeket. Az olyan népszerű betűtípusok, mint az Open Sans, javíthatják webhelye teljesítményét a betöltési idő csökkentésével.

Egy másik jellemzője az A Google lehetővé teszi ezeknek a betűtípusoknak a letöltését így felhasználhatja őket az elrendezésekben.

És végül a platform teljesen ingyenes ... A betűtípusok használatának megkezdéséhez csak be kell jelentkeznie vagy létre kell hoznia egy postafiókot a Gmailben (és kinek nincs ma levele a Gmailben?).

A hiányosságok közül ezt jelezheti a google betűtípusok választéka kicsi , sok közülük hasonlít egymásra. Sokat kell keresni, hogy megfelelő, eredeti betűtípust találjunk. Nagyon kevés cirill betűtípus létezik.

Ezen kívül vannak a szokásos biztonsági aggályok - meg kell adnia néhány személyes adatot, amikor betűtípusokat telepít a Google webhelyére.

Hogyan kell telepíteni a Google betűtípusokat a WordPress bővítmények használatával

Ha bővítményeket keres, az első dolog, amit a találatok között lát WP Google Fonts és Easy Google Web Fonts beépülő modulok ... Ez valóban a két legjobb plugin.

A beépülő modulok nem az ideális megoldás a Google Fonts telepítéséhez a WordPress webhelyre - nemcsak teljesítmény szempontjából, hanem azért is, mert a beépülő modulok nem teszik lehetővé bizonyos szövegdarabok kiválasztását. Ha azonban Ön vagy ügyfele meggyőződött arról, hogy jobb a beépülő modulok használata, akkor nézze meg ezt a két lehetőséget.

Ez a bővítmény lehetővé teszi bizonyos elemek, például H1 címsorok, bekezdések és idézetek célzását. Emellett egyedi CSS opciót is kaphat az egyes betűtípusok további stílusához. A Google betűtípusok hozzáadása és testreszabása a WordPress webhelyén nagyon egyszerű ezzel a beépülő modullal.

Az Easy Google Web Fonts megfelel a nevének, és rendkívül egyszerűvé teszi a Google Fonts telepítését még a kezdők számára is. Az Élő előnézet funkció segítségével megtekintheti, tesztelheti és optimalizálhatja a betűtípusokat a webhely elhagyása nélkül, és saját betűtípus -szabályokat hozhat létre kódsor írása nélkül.

A Google betűtípusok WordPress sablonba történő telepítésének helyes módja

Végül elérkeztünk ahhoz a lehetőséghez, hogy nyissuk meg a function.php fájlt, és végezzünk egy kis kódot. Mielőtt ezt megtenné, ki kell választania egy betűtípust a Google könyvtárából. A példa kedvéért próbáljuk meg a nagyon népszerűt venni Nyitott sans.

Ezután ki kell választania a betűtípust - normál, félkövér vagy dőlt. Te magad is megteheted :)

Miután kiválasztotta a stílusokat, a Google megad egy kódrészletet. A miénk így néz ki:

Ezen kívül megkaptuk a CSS stílust:

font-family: "Open Sans", sans-serif;

Itt az ideje, hogy nyissa meg a features.php fájlt (fájl elérési útja: wp-content / themes / yourtheme). A fájl végén adjon hozzá egy új függvényt:

függvény load_fonts ()
{
wp_register_style ("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style ("et-googleFonts");
}
add_action ("wp_print_styles", "load_fonts");

Ennek a funkciónak a kulcsa a "wp_enqueue_style" parancs, amely arra kényszeríti a WordPress -t, hogy betűstílus -lapokat hívjon meg az egyes oldalak fejlécén. Ha alaposan megnézi, látni fogja, hogy eltávolítottuk a href = és rel = 'styleheet' type'text / css 'linket a Google által megadott kódból, és ezt kell tennie, ha más Google -t is fel szeretne venni betűtípust a WordPress webhelyéhez.

Mindössze annyit kell tennie, hogy megnyitja a fő CSS -fájlt, és beilleszti a formázást az Open Sans programból. A szokásos szabályok itt működnek, ezért adja hozzá a következő kódot a stíluslapjához, mentse és frissítse:

test
{
betűtípus: normál 1em "Open Sans", sans-serif;
szín: # 313131;
}

Ez a stílus az egész webhelyen működik. Az egyes szövegtöredékekhez eltérő stílust állíthat be:

Félkövér szöveg
{
betűtípus: bold 1em "Open Sans", sans-serif;
}

Mint látható, valójában nagyon egyszerű. Próbáld ki és nézd meg az eredményt :)

Vlad Merzhevich

A betűtípus a webdesign szerves része, kifejezőképességet és elismerést kölcsönöz a webhelynek, kifejezi az oldal jellegzetes stílusát, és közvetlenül kapcsolódik a szövegek észleléséhez. Egy jól megválasztott betűtípust nem lehet észrevenni, de enélkül nem lesz olyan buzgalom, amely befejezi a weboldal kialakítását.

Ha már telepített egy adott betűtípust a számítógépére, akkor a stílusokban elegendő egy sort hozzáadni.

h1 (betűtípus-család: SuperPuperFont;)

A betűtípus-család tulajdonság értéke a betűtípus neve, minden fejlécre érvényes lesz

... De mit fognak látni a webhely látogatói, ha nincs telepítve látványos és ritka betűtípusunk? Ez a helyzet a legvalószínűbb, így ha a böngésző nem ismeri fel a deklarált betűtípust, akkor az alapértelmezett betűtípust fogja használni, például a Windowsban a Times New Roman. Minden gondosan átgondolt típustervünk egyik napról a másikra összeomlik, ezért a legsokoldalúbb megoldást kell keresnünk. Az első dolog, ami azonnal eszébe jut, hogy megszervezze a betűtípus fájl letöltését a felhasználó számítógépére, és jelenítse meg a szöveget a kiválasztott betűtípussal. Összehasonlítva más módszerekkel, például a szöveg képen való megjelenítésével, ez a módszer a legegyszerűbb és legsokoldalúbb.

Milyen előnyökkel jár egy betűtípus -fájl letöltése, majd CSS -en keresztül történő alkalmazása.

• A szöveg könnyen hozzáadható és szerkeszthető.
• A böngészőben használhatja a keresést, és megtalálhatja a kívánt kifejezéseket.
• A böngésző beállításaiban csökkentheti vagy növelheti a betűméretet a kényelmes megtekintés érdekében.
• A keresőmotorok jól indexelik a dokumentumok tartalmát.
• A szöveg kiválasztható és másolható a vágólapra, valamint lefordítható egy másik nyelvre.
• A szöveges paraméterek, például a sorköz, a szín, a méret és hasonlók könnyen módosíthatók a CSS -tulajdonságok használatával.
• Ismét a CSS -en keresztül egyszerűen hozzáadhat különböző effektusokat a szöveghez, például egy árnyékot.

Mint látható, számos előnye van. Van néhány apró hátránya, amelyeket érdemes megemlíteni az egyensúly érdekében.

• Nem minden böngészőverzió támogatja a letölthető betűtípust és ugyanazt a formátumot.
• A betűtípust tartalmazó fájl nagy lehet, így lassítja a weboldal betöltését.

asztal 1 felsorolja a böngészőverziókat és az általuk támogatott betűtípusformátumokat.

Tab. 1. Támogatott formátumok

Formátum	internet böngésző	Króm	Opera	Szafari	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+

A leginkább támogatott formátum a TTF. Az IE és a 9.0 verzió között, valamint az iOS kivételével minden böngésző tökéletesen megérti. Tehát ha ebben a formátumban van betűtípusa, és a modern böngészőket célozza meg, akkor nem kell további lépéseket tennie. Elég, ha stílusban írja be a következő kódot (1. példa).

Példa 1. TTF csatlakoztatása

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Először töltse be magát a betűtípust a @ font-face szabály használatával. Belsejébe a betűtípus nevét írjuk be a font-family paraméter használatával, és a fájl elérési útját az src használatával. Ezután a szokásos módon használjuk a betűtípust. Tehát, ha be kell állítanunk a betűtípust a címsorhoz, akkor a h1 választóhoz, ahogy a példában látható, a betűkészlet-család tulajdonságot a betöltött betűtípus nevével állítjuk be. Az IE régebbi verziói esetén a visszaeséseket vesszővel elválasztva soroljuk fel. Ebben az esetben a cím betűtípusa "Comic Sans MS" lesz, mert az IE8 és az alatti verzió nem támogatja a TTF formátumot.

Ennek a példának az eredményét az ábra mutatja. egy.

Rizs. 1. Fejléc letöltött betűtípussal

Mi van, ha díszes betűtípusra van szüksége az IE8 -ban? Szerencsére a @ font-face lehetővé teszi, hogy egyszerre több, különböző formátumú betűtípust is felvegyen. A böngészőnek csak ki kell választania a megfelelőt. Így egy univerzális megoldás, amely minden böngészőben működik, a meglévő TTF formátum EOT formátumba való átalakítására, majd mindkét fájl összekapcsolására vezethető vissza.

Az átalakításhoz számos online szolgáltatás kínál lehetőséget TTF fájl letöltésére és EOT fájl beszerzésére a kimeneten. Sajnos a legtöbb ilyen szolgáltatásnak ugyanaz a problémája - megkapjuk a fájlt, de az orosz nyelv nem támogatott benne. Ennek eredményeként a kívánt eredmény nem érhető el, az átalakítás helytelen. Az általam ellenőrzött webhelyek között volt egy, amely helyesen mutatta a szöveget IE -ben.

Menjen erre az oldalra, töltse be a TTF fájlt, és nyomja meg a "TTF konvertálása EOT -ba" gombot, majd a kapott fájlt a betűtípusok mappába mentjük. A stílusokban maradt egy kis trükk, amely arra kényszeríti a különböző böngészőket, hogy betöltsék a betűtípust a megfelelő formátumban. Ehhez adjon hozzá két src paramétert. Az első az EOT fájlra mutat, és az IE régebbi verzióira vonatkozik. A második src paraméternek két címet kell tartalmaznia vesszővel elválasztva, amelyek közül az egyik egy TTF fájlra mutat. A tény az, hogy az IE 8.0 és korábbi verziói nem értik az vesszőt az src paraméterben, és ennek megfelelően teljesen figyelmen kívül hagyják a paramétert. Több helyesírási lehetőség is lehet, például megismételheti az URL-t, megadhatja a betűtípus nevét a helyi paraméteren belül, vagy írhat egy nem létező betűtípust. Ha a böngésző nem tud betölteni egy ilyen betűtípust, akkor a lista második helyére kerül, és helyesen írtuk meg. Elfogadható írásmódok.

src: url (font / pompadur.ttf), url (font / pompadur.ttf);
src: local (pompadur), url (font / pompadur.ttf);
src: local ("bla bla"), url (font / pompadur.ttf);

A 2. példában látható a böngészők összes verziójának betűtípus csatlakoztatására szolgáló működési lehetőség.

Példa 2. Az EOT csatlakoztatása

HTML5 CSS3 IE Cr Op Sa Fx

A politikai folyamat modern eleme

Valójában Montesquieu politikai doktrínája vezeti a kontinentális-európai típusú politikai kultúrát, ami Michels munkáiban is megmutatkozott.

Ami az iOS -t illeti, nekem úgy tűnik, nincs sok értelme külön betűtípust készíteni és letölteni SVG formátumban. Az iOS -en böngésző oldalak közönsége még mindig kicsi, emellett a webhely mobileszközökre vonatkozó verzióját is megkönnyítik, és nem kívánatos további több tíz kilobájt letöltése.

Google Internetes betűtípusok

Egy kényelmes szolgáltatás, amely átveszi a különböző betűformátumok és böngészőverziók támogatásának rutinját, megtalálható a címen www.google.com/webfonts... Bár a gyűjteményben viszonylag kevés különböző betűtípus található (több tucat van belőle), mindegyik nagyon jó minőségű és ingyenesen használható a webhelyeken.

Mielőtt betűtípust választana, állítsa a Script értékét cirill betűre, ekkor megjelenik az orosz nyelvet támogató betűtípusok listája (2. ábra).

Rizs. 2. Betűtípusok kiválasztása a Google webes betűtípusokban

A kívánt betűtípust először a "Hozzáadás a gyűjteményhez" gombra, majd a képernyő jobb alsó sarkában található "Használat" gombra kattintva kell hozzáadni a gyűjteményhez. A következő oldalon (3. ábra) végre kiválaszthatja a szükséges betűtípusokat. Meg kell érteni, hogy egy betűtípus több stílust is tartalmazhat, és mindegyik növeli a letöltött fájlok mennyiségét.

Rizs. 3. Betűkészletek betöltve az oldalra

A kiválasztott betűtípusokat háromféleképpen csatlakoztathatja; a hozzáadott kód másolható az oldalon.

1. Az elemen keresztül ... A vonal a következőképpen fog kinézni.

2. A @import szabályon keresztül. Ezt a sort illesztjük be a CSS -fájlunkba a tetején.

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

3. A JavaScript segítségével.

Alapvetően minden út egyenlő, ezért válasszon saját preferenciái szerint.

Ennek a szolgáltatásnak az előnyei a következők.

• A betűtípusok szabadon használhatók, nem kell fizetni értük.
• A felajánlott betűtípusok "kihegyezve" vannak a képernyőn való megtekintéshez, a fájlok optimalizálva vannak, és viszonylag kis mennyiséget foglalnak el.
• A böngésző automatikusan észlelhető, és a kívánt formátumú betűtípus jelenik meg.

A szolgáltatás egyik fő előnye, hogy a betűtípusokat TTF, EOT, WOFF, SVG formátumban tárolják, és a böngésző ellenőrzése után betöltik. Tehát az EOT formátum csak az IE régebbi verzióiban lesz elérhető.

Az, hogy használja -e a Google webes betűtípusokat, csak rajtad áll. Ha nem talált megfelelő betűtípust, akkor mindig csatlakoztathatja a népszerű és elterjedt TTF -et. Ezenkívül az összes népszerű böngésző legújabb verziója támogatja.

A betűtípus fontos szerepet játszik az oldal kialakításában, hangsúlyozhatja az általános stílust, segítheti a felhasználót a szöveg tartalmában való navigációban. Ingyenes betűtípusok keresése, majd egy csomó fájl összekapcsolása különböző böngészőkhöz nem örömteli feladat, de van kiút - betűtípusok a Google Fonts -ból.

A megfelelő betűtípus megtalálása a Google betűtípusokból

Menjünk magához a Google betűtípus -szolgáltatáshoz, és nézzük meg annak képességeit.

A bal oldali panelen beállíthatja a betűtípus szűrési paramétereit, és ami a legfontosabb, kiválaszthatja, hogy a cirill vagy a latin ábécéhez tartozik -e.
A felső részben megváltoztathatja a demo szöveg megjelenítését, a következő formában: szó, mondat, bekezdés, poszter. Módosítsa a betűméretet, és írja be a saját szövegét a bemutató verzió helyett.

Betűtípus csatlakoztatása a Google betűtípusokból

Miután kiválasztotta a kívánt betűtípust, kattintson a "gyors használat" gombra (lásd az alábbi képet)

A betűtípus -kapcsolódási oldalon ki kell választania:

1. Betűstílusok, félkövér, dőlt, stb. Ne túlozzon túl sokat, csak a legszükségesebbet válassza, mert mindez befolyásolja a betűtípus betöltésének sebességét, és ennek megfelelően a szöveg betöltésének sebességét a webhelyére. Kövesse a jobb oldali érzékelő jelzőit (a kép 5. pontja)
2. Válassza ki, hogy milyen betűkre van szüksége ebben a betűtípusban (főleg latin és cirill betűkkel).
3. Másolja a linkcímke kódját a HEAD blokkba
4. A betűtípus deklarációját a 4. bekezdésben bemutatott stílusokban használjuk (lásd a képet)