css font kapcsolat ttf. Betűtípusok beállítása css-ben

A betűtípusok óriási szerepet játszanak a weboldal tervezésében. Ugyanaz a különböző betűtípusokkal írt szöveg ellentétes benyomásokat kelthet az emberben.

Nézd meg magad:

Egyes betűtípusok meggyőzőbbek, mások érdekfeszítőbbek.

De hogyan lehet bármilyen betűtípust csatlakoztatni a webhelyhez, és bárhol alkalmazni őket?

Ebben a cikkben I 3 módot mutatok meg, amellyel bármilyen, a legváltozatosabb és nem szabványos betűtípust csatlakoztathat webhelyéhez. És nem mindegy, hogy melyik CMS-t használja: WordPress, Joomla, Drupal vagy Open Cart.

Látni fogja, hogy nincs semmi bonyolult a betűtípusok webhelyhez való csatlakoztatásában.

Tanulni fogsz:

1. számú módszer. Betűtípusok gyors csatlakoztatása WordPress-webhelyhez (nehézség: ⭐ ⭐ ⭐)

Ha prémium témát telepített a webhelyére, 2 perc alatt csatlakoztathatja a betűtípusokat.

Például:

Módosítani szeretné a cikkek címeinek betűtípusát. Ezért:

1. Az adminisztrációs panelen lépjen a Témabeállítások részre. A sablontól függően ezt a részt kissé másképp hívják, de a jelentése mindig ugyanaz - "témabeállítások".

2. Lépjen a Tipográfia szakaszra.

3. Válassza ki azt az elemet, amelynek betűtípusát módosítani szeretné (címsorok, bekezdések):

Ha webhelye más motoron fut, vagy a témája nem rendelkezik ilyen beállításokkal, lépjen a következő módszerre.

2. számú módszer. Használja ki a Google Fonts erejét
(nehézségi fok: ⭐ ⭐ ⭐ ⭐)

Hallottál már a Google Fontsról? Röviden, ez egy olyan szolgáltatás, amellyel több mint 700 betűtípust csatlakoztathat webhelyéhez.

1. lépés Nyissa meg a szolgáltatás hivatalos webhelyét.

2. lépés: Keresse meg az Önnek megfelelő betűtípusokat a Google betűtípusgyűjteményében. A jobb oldali menüben szűkítheti a kört a betűtípus nyelvének, stílusának és népszerűségének beállításával:

Annak érdekében, hogy a szolgáltatás megjelenítse az orosz nyelvet támogató betűtípusokat, válassza a cirill lehetőséget a Nyelvek elemnél.

3. lépés Tegyük fel, hogy szereti a Roboto betűtípust. Kattintson a "+" ikonra:

A „+” jelre kattintva bármilyen betűtípust hozzáadhat.

4. lépés Ezt követően ki kell bővítenie a kosarat a kiválasztott betűtípusokkal:

A Testreszabás lapra lépve kiválaszthat stílusokat és nyelveket. A stílusok tekintetében azt tanácsolom, hogy válasszon egy standard készletet - normál (400), dőlt (400 dőlt), félkövér (700) és dőlt-félkövér (félkövér 700 dőlt):

De ha csak félkövért szeretne (címsorokhoz), csak azt válassza.

Ne feledje, minél több stílust választ, annál nagyobb lesz a feltöltött fájl mérete.

Annak érdekében, hogy ne lassuljon az oldal betöltési sebessége, válasszon minél kevesebb betűstílust.

5. lépés: Térjen vissza a Beágyazás részhez, és válassza az @IMPORT fület. Ezután másolja ki a „@import” szót tartalmazó kódsort, és illessze be webhelye CSS-fájljának első sorába:

Ha van WordPress webhelye, a CSS-fájl valószínűleg itt található: wp_content/themes/"saját téma"/css/... A CSS mappában valószínűleg lesz egy Fonts fájl, ahová át kell vinnie a beágyazási kódot a Google-tól:

Nem számít, milyen CMS-en fut az oldala, csak illessze be a kódot, és minden megtörténik 👌

Mivel először a betűtípusokat kell betölteni, csak azután minden mást - helyezze el a font kapcsolat kódját a CSS fájl legelejére.

Ugyanabban a CSS-fájlban megadhatja a webhely bizonyos elemeinek betűtípusát.

Például:

Hogy minden bekezdéshez Roboto betűtípust adhassak, a következőket írom: p ( font-family: Roboto;)

3. számú módszer. Egyéni betűtípus-kapcsolat CSS-sel (nehézség: ⭐ ⭐ ⭐ ⭐ ⭐)

Ha elég ügyes vagy, a legjobb megoldás az, ha CSS-en keresztül saját maga is hozzáadja a betűtípusokat. Ebben az esetben a betűtípusok a szerveren egy speciális mappában helyezkednek el. De először meg kell szerezni őket valahol.

Hol szerezhet be webbetűtípusokat a webhelyhez

Tudta, hogy külön licencet kell vásárolnia a webes betűtípusok használatához?

Csatlakoztassa a betűtípusokat ingyenes licenccel. Legegyszerűbben a Fontsquirrel szolgáltatással találhatjuk meg őket, amit mi meg is teszünk.

1. lépés Nyissa meg a szolgáltatás hivatalos webhelyét

2. lépés. A jobb oldali menü Nyelvek szakaszában válassza ki a cirill betűt.

3. lépés: Keressen megfelelő betűtípust. Ügyeljen a betűtípusok számára.

Például, ha 4 stílus van, akkor 4 stílus lesz írva:

Betűstílusok megjelölése - normál (400/rendes), dőlt (dőlt), félkövér (700/félkövér), félkövér dőlt (700 dőlt).

5. lépés Kattintson a betűtípus nevére, és lépjen a beállítások oldalra.

6. lépés Nyissa meg a Webfont Kit részt. Válassza ki az összes betűformátumot, és kattintson a @FONT-FACE KIT letöltése lehetőségre. Ha csak 1-2 formátum érhető el, az nem ijesztő.

Betűtípusok hozzáadásához használja a @Font-face-t

A @font-face direktíván keresztül egy vagy több betűtípust is felvehet webhelyére. De ennek a módszernek megvannak az előnyei és hátrányai.

Előnyök:

A CSS-en keresztül bármilyen formátumú betűtípust megadhat: ttf, otf, woff, svg.
A betűtípusfájlok a kiszolgálón találhatók – Ön nem függ harmadik féltől származó szolgáltatásoktól.

Mínuszok:

Az egyes stílusok betűtípusának megfelelő csatlakoztatásához külön kódot kell írnia.
A CSS ismerete nélkül könnyen összezavarodhatunk.

Csak lemásolhatja a kész kódomat, és azt, hogy hová kell helyeznie az értékeit.

1. lépés: Vigye át a letöltött betűtípusfájlokat a webhelyére. Ez megtehető a hosting vezérlőpulton vagy FTP-n keresztül.

Azt javaslom, hogy hozzon létre egy fonts mappát ugyanabban a könyvtárban, mint a CSS-fájl. Helyezze át az összes fontfájlt ebbe a mappába.

2. lépés Írja be a következő bejegyzést a CSS-fájl legelejére:

@font-face(
font-family: "MyWebFont";
src: url(../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url(../fonts/WebFont.woff") formátum("woff"),
url(../fonts/WebFont.ttf") formátum("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
betűsúly: normál
betűstílus: normál
}

Ahol MyWebFont a betűtípus neve, az src tulajdonság értéke (az adatok zárójelben idézőjelben) a helyük (relatív hivatkozások). Minden stílust külön kell megadnunk.

Mivel először normál betűtípust használunk, a font-weight és font-style tulajdonságokat normálra állítottuk.

3. lépés: A dőlt stílus csatlakoztatásakor írja be a következőket:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url(../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") formátum("woff"),
url("../fonts/WebFont-Italic.ttf") formátum("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
betűsúly: normál
betűstílus: dőlt;
}

Ahol minden ugyanaz, csak a font-style tulajdonságnak adtuk meg a dőlt értéket.

4. lépés: A félkövér stílus engedélyezéséhez adja hozzá a következő kódot:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") formátum("woff"),
url("../fonts/WebFont-Bold.ttf") formátum("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
betűsúly: félkövér;
betűstílus: normál
}

Ahol a font-weight tulajdonságot félkövérre állítjuk.

Ügyeljen arra, hogy minden stílushoz a megfelelő helyet adja meg a betűtípusfájlok számára.

5. lépés: A félkövér dőlt betűtípus engedélyezéséhez írja be a következőket:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") formátum("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") formátum("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
betűsúly: félkövér;
betűstílus: dőlt;
}

Nos, ez az :) Most adtál hozzá 4 betűstílust a webhelyedhez.

De van egy megjegyzés: ez a betűtípus-kapcsolat nem jelenik meg megfelelően az Internet Explorer 8 böngészőben, vigasz, hogy nagyon kevés maradt belőlük.

Betűtípusok csatlakoztatása különböző CMS-eken lévő webhelyekhez

Nem mindegy, hogy milyen motoron fut az oldal (WordPress, Joomla, Drupal, Opencart) – ha hozzáfér a CSS-fájlhoz, a betűtípusokat akár a Google Fonts-on keresztül, akár a Fontsquirrelen keresztül a szerverére töltve csatlakoztathatja.

Rendben, most mindennek vége. Ha úgy gondolja, hogy ez a cikk hasznos lehet más webmesterek számára, kérjük, ossza meg a közösségi hálózatokon.

Valamint:

Iratkozz fel hírlevelemre hogy ne maradj le a hasznos és érdekes blogbejegyzésekről.

Sok komoly és érdekes elrendezést készítő tervezőnek rengeteg egyedi és gyönyörű betűtípus áll rendelkezésére. Az ilyen betűtípusoknak köszönhetően a dizájn megkapja a lelkesedést és az exkluzivitást. A nem szabványos betűtípusok azonban csak azon a számítógépen jelennek meg, amelyre már telepítve vannak, ezért a velük való megfelelő működés érdekében a tervezőnek biztosítania kell az összes olyan betűtípust, amelyet az elrendezésében használ. Mert az elrendezés kialakításakor ezeket a betűtípusokat telepítenie kell a számítógépére. A webhely felhasználója azonban nem tölti le az összes betűtípust magának, és nem telepíti őket a számítógépére, ezért a böngészőt önmagában kell előállítania a szükséges betűtípusokat. A szabály segít itt, továbbra is van lehetőség Cufon használatára, vagy betűtípusok letöltésére a Google Webfonts vagy Fontsquirrel oldalról, de előfordulhat, hogy a Google Webfonts és Fontsquirrel programnak nincs szüksége betűtípusra, ezért fontolja meg a legjobb megoldást - egyedi betűtípusok összekapcsolását a @font-face használatával.

A betűtípus felvételének legegyszerűbb módja, ha stíluslapba írja be:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ;)

Itt a 'PF Din CompPro' a betűtípus neve, majd megadhatja ezt a betűtípust a szükséges webhelyelemekhez, a fonts/pfdintextcomppro-medium-webfont.ttf pedig a betűtípus elérési útja, amely a fonts mappában található. Fontos, hogy a névben ne legyenek szóközök a betűtípusfájlban, jobb, ha ezeket kötőjelekkel helyettesítjük.

Ez a legegyszerűbb módja, de egyszerűen nem működik minden böngészőben, és ez nagy probléma.

Minden böngésző támogatja a saját betűtípusait:
igaz típus Betűtípusok Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT betűtípusok az Internet Explorer 4+
WOFF betűtípusok Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Betűtípusok iPad és iPhone készülékekhez

Ezért több azonos betűtípust kell készítenie az egyik betűtípusból .ttf formátumban, csak más formátumban. Itt jön jól a fontsquirrel.com betűtípusgenerátora. Ezen az oldalon töltse fel a betűtípust, válassza ki az Optimális beállításokat, jelölje be a letöltött betűtípus jogszerűségét megerősítő jelölőnégyzetet (egyes betűtípusok sok pénzbe kerülnek, és használatukhoz engedélyt kell kapnia), majd kattintson a „Kitlet letöltése” gombra. és megkapja a szükséges archívumot a betűtípus összes formátumával.

Töltse le az archívumból a betűtípusok összes formátumát, ez elméletileg 4 fájl .eot, .svg, .ttf és .woff kiterjesztéssel, másolja ezeket a fájlokat a weboldala fonts mappájába, a stylesheet.css fájl is legyen az archívumban - benne a betűtípusok csatlakoztatásának minden szabálya meg lesz írva, biztonságosan másolhatja őket a stíluslapjára, csak ne felejtse el megadni a betűtípusfájlok elérési útját, például a betűtípusok mappába. Példa arra, ami az egyik webhelyemen történt:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) formátum("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") formátum("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif;)

Ezekkel a beállításokkal a betűtípusok minden böngészőben megjelennek, beleértve a szeretett IE-7-8-9-et is.

Ha nem szabványos betűtípusokat használ cirill, azaz orosz karakterekhez, és a betűtípus hibásan jelenik meg az oldalon, akkor segíthet a betűtípus generálása speciális beállításokkal, a http://www.fontsquirrel.com/tools oldalon. /webfont-generator töltse le a betűtípust, és válassza a "Szakértői" beállításokat. Nagyon sok beállítás van, nem tudok mindent, de figyelmesen olvassa el és válassza ki a szükségeseket, és a cirill támogatásához válassza ki az Alkészlet blokkban: az Egyéni részbeállítások részt ... és jelölje be a cirill jelölőnégyzetet, és azt is jelölje meg a szükséges nyelveket és formátumokat.

Íme egy példa arra, amit kaptam:

Mit lát valójában a webhely látogatója, ha nem szabványos webes betűtípust használ a böngészőfejlesztés ezen szakaszában?

Sokan szenvednek az oldal létrehozásakor. Sok esetben az oldal nem szabványos betűtípus vagy hieroglifa használatát igényli. Letölt egy gyönyörű betűtípust, és elkezdi elhelyezni az oldalt, de nem minden felhasználó rendelkezik ilyen betűtípussal. Vannak, akik nem jönnek zavarba, és egyszerűen létrehoznak egy grafikus fájlt a szükséges betűtípussal, de a további grafikák nem mindig illenek az oldalra, és sokaknak így is elég. De van egy megfelelő kiút! Ez a megoldás a CSS technológia (Cascading Style Sheets) vagy egyszerűen "Cascading Style Sheets" használata. Általában magában a létrehozott fájlban, az oldalon található a CSS, de külön is létrehozhat egy CSS-fájlt (.css) és összekapcsolhatja a címkék közötti kitöltéssel. és így:

A CSS segítségével pedig automatikusan le kell töltenünk és telepítenünk kell a True Type Font (.ttf) font fájlt, de a telepítés csak akkor történik meg, ha a felhasználó számítógépe nem érzékeli a szükséges betűtípust. Először is meg kell adnunk a betűtípus helyét. Ehhez írunk a címkék közé ésÍgy:

Így a webhelyén bármilyen betűtípust használhat. De azt tanácsolom, hogy ne legyen túl kifinomult, mivel a betűtípus letöltésének és telepítésének folyamata is igényel bizonyos időt. És ha maga a betűtípus "súlya" 500 kb vagy több, akkor ebben az esetben nem ajánlott használni.

Hogy őszinte legyek, egyszerűbb és helyesebb ezt megtenni:

Bár a webes betűtípusokat a legtöbb böngésző támogatja, az Operában a kezdetektől fogva hibásak. Egyes rendszereken egyáltalán nem működnek, azokon, amelyek működnek, az oldalak újratöltésekor működnek vagy nem:

Ezért ezt nem szabad komoly projektekben használni, csak személyes blogokban, és csak 30 képpontnál nagyobb szövegeknél, hogy ne lássuk az élsimítás és a kerning csodáit.

Ugyanakkor a Google biztosít - API a nem szabványos betűtípusok böngészők közötti csatlakoztatásához.