Az internet dokumentumok által használt betűtípusok olyan családok, amelyek minden felhasználó gépére alapból telepítve vannak. (Betűtípus telepítése itt.) Egy adott típussal írt szöveget ugyanis csak akkor lát a felhasználó olyannak, amilyennek te meghatároztad, ha a font a gépén telepítve van. Így aztán meghatározták a fontok azon körét, amelyek minden gépre az operációs rendszerekkel eleve feltelepülnek. Így ezeket rendelve a weblapodhoz, azt bárki ugyanolyannak fogja látni, bárhol is olvassa. Ezek az úgynevezett Default font-ok.
Pl. egy része ennek a listának így néz ki:
•Arial
•Courier New
•Times New Roman
•Symbol
•Wingdings
•Microsoft Sans Serif
•Segoe UI
•Tahoma
stb.
Ezek az általunk használatos típusok, van ilyen lista a kínai, indiai, arab, kelet-ázsiai stb. írások számára is.
A helyzetet az is bonyolítja, hogy még az általánosabb típusok között is vannak olyanok, amelyek nem minden operációs rendszeren láthatók. Van, ami csak Windows, van ami csak Machintosh op. rendszeren látszik.
Pl. a Terminal típus csak Win, a Textile pedig csak Mac alatt látszódik.
Sőt, fokozódik a helyzet azzal, hogy van olyan betűtípus, amely még a használt böngészőtől is függ.

Összefoglalva: megtervezed a weblapod, és tetszik egy betűtípus, feltelepíted a gépedre, és ezt használod az oldaladon. Te így látod. Az olvasóid azonban csak akkor látják ugyanilyennek, ha náluk is telepítve van ez a font. Ha nincs, akkor az ő számukra a legáltalánosabb betűtípussal (pl. Sans Serif) jelenik meg az oldalad.
Általánosan használt technika, hogy az adott részhez (pl. poszt címe stb.) több betűtípust adunk meg, elöl áll a legkevésbé általános. Így, akinek telepítve van, a legelsővel látja, akinek nincs, az a másodikkal stb., és az utolsónak megadott mindig olyan, amelyet mindenki láthat. Vagyis az oldalad mindig olvasható, de nem mindenki látja ugyanolyannak.

Pl. így:
font: 15px Arial, Tahoma, Verdana, sans serif;

A weboldalak által használható betűtípusok megfelelnek néhány általános szabálynak is. Általában azt mondjuk, hogy a betűtípus legyen határozott kontúrral rendelkező, lehetőleg ne legyen "talpas", jól olvasható, szellős legyen.
 
Mindezek után érthető, hogy a legtöbb weboldalt olyan betűtípussal szerkesztenek, amely minden op. rendszerben, minden böngészőben, mindenki gépén működik.
Így nem túl sok lehetőség marad, azaz a honlapok és blogok gyakorlatilag egyformán néznek ki, ebből a szempontból.
 
Vannak olyan fogások, amellyel elérhetjük, hogy más betűtípust is használhassunk. Ha van az oldalunkhoz tárhelyünk, egyszerű dolgunk van. Oda feltesszük a betűtípust, és onnan "meghívjuk" az oldalhoz.
A blogoknak azonban álatalában nincs tárhelye, és egy ingyenes tárhelyről kockázatos lehet a fontot meghívni.

most megnézzük, milyen lehetőségünk van saját tárhely nélkül más betűtípus használatára. Erre is létezik több megoldás, ezek egyike a következőkben leírt.

Használjuk a Google fontokat!
A Google az alkalmazások egész családját hozta létre, ezek segítségével komplex webes rendszer alakítható ki. (Blogger, Analytics, Feedburner, Gmail, Picasa stb.).
Számos más, a blogolást segítő dolog is elérhető általuk, scriptek, kódok pl., de ilyenek a fontok is.
Bár most még kevés fontból választhatunk, ezzel mégis színesíthetjük egy kicsit a blogunk kinézetét.
Használatuk nagyon egyszerű:

Menj ide: http://code.google.com/webfonts

Felül választhatsz Görög, Latin, Khmer és Cirill betűcsaládot.
Ha kiválasztottad, pl. Latin, válassz betűtípust, amelyik neked tetszik, és alkalmazni szeretnéd: pl. Reanie Beanie
Kattints rá, akkor láthatod, hogyan néz ki különböző betűnagysággal, továbbá, hogy milyen változatai vannak.

Válaszd a Get the code gombot, kattints rá.

Másold ki a felső ablakban lévő kódot:

		<span style="font-family: Reenie+Beanie; font-size: 24px;">A TE SZÖVEGED, AMIT EZZEL A TÍPUSSAL AKARSZ ÍRNI</span>

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'/>

Irányítópult -> Tervezés -> HTML-kód szerkesztése



Ctrl+f 

Keresd meg a </head>

sort, és ELÉ másold be a kimásolt kódot.

Mentsd el a változtatást.



Mostantól használhatod a betűtípust.

Ha csak egy szövegrészletet akarsz ezzel a típussal pl. a poszton belül, akkor ezt kell tenned:

Írd a posztot, de válts át a HTML írásmódra. A kívánt szövegrészletet zárd ebbe a kódba:


<span style="font-family: Reenie+Beanie; font-size: 24px;">A TE SZÖVEGED, AMIT EZZEL A TÍPUSSAL AKARSZ ÍRNI</span>

1. DEMO: A szöveg akár a teljes poszt is lehet.
   
    
2. Ha egy részletre a blogban állandóan és automatikusan ezt a típust akarod használni:
   Először is tudnod kell annak a résznek a nevét, hogyan nevezték el a sablonban.
   Példaként én most azt mutatom meg, hogy a posztok címei hogyan jelenhetnek meg az új betűtípussal.
   
   A) Egyik eset, hogy szerencséd van, és a kódod elején megtalálod, ahol a változókat (Variable definitions) sorolják fel, valahogy így néz ki:
   

   			<Variable name="post.title.font" description="Title Font" type="font"
   default="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px 'Trebuchet MS', Trebuchet, sans-serif;"/>
   

   
   Nincs más dolgod, mint beszúrd az új betűtípust legelsőnek ide:
   

   			<Variable name="post.title.font" description="Title Font" type="font"
   default="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px 'Reenie Beanie', 'Trebuchet MS', Trebuchet, sans-serif;"/>

   
   Mentés
   
   Nézd meg a blogod. Elképzelhető, hogy a betűnagyságon is változtatnod kell, tedd meg. A kék számot írd át nagyobbra vagy kisebbre, és mentsd.
   Ezt az új, sablonszerkesztőből választott sablonok esetében biztosan megtalálod így.
   
   DEMO: http://3teszt.blogspot.com/
   
   B.) Ha régebbi vagy egyedi sablonod van, akkor előfordul, hogy nem találod a Variable definitions részben a poszt címet. Akkor meg kell keresned:
   
   Ctrl+f
   Írd a keresőablakba: posts
   Ilyesmit találsz: /* Posts ----------------------------------------*/
   Ez alatt lesz a poszt címe, ami vagy post-title vagy .post title vagy .post h3 stb. névvel van elnevezve
   Pl. ilyen lehet:
   

   			.post h3 {
      margin:.25em 0 0 140px;
      padding:0 0 4px;
      line-height:1.4em;
      color: $titlecolor;
      margin-bottom: 3px;
      font: 17px 'Reenie Beanie', georgia, times, 'times new roman', serif;
      font-weight: bold;
      background:transparent;
   } 

3. Szúrd be a betűtípusod nevét (piros) a megfelelő helyre elsőként.

   A betűnagyság a kék szám itt is.
   Mentsd el a változtatást.

Ha meguntad és másik típust szeretnél, akkor csak a két helyre beírt nevét kell megváltoztatnod: Pl. Reenie Beanie helyett beírod, hogy Philosopher mindkét helyen.

Ha végleg meguntad, és az eredeti állapotot akarod visszakapni, akkor kitörlöd a betűtípus nevét, beállítod a betűnagyságot, mentés.

UPDATE:
Többen jeleztétek, hogy hibaüzenet jön, nem tudjátok a kódot beszúrni. Ennek az az oka, hogy amikor kéred a kódot, akkor egy ilyet lehet kimásolni:  <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'>

Oldal: Google fonts for Blogger - Eltérő betűtípus használata
css kodok & HTml kodok a hotdogra és más weblapokra is ! - © 2008 - 2024 - csskodok.hupont.hu

Az ingyenes honlapkészítés azt jelenti, hogy Ön készíti el a honlapját! Ingyen adjunk: Ingyen Honlap!

ÁSZF | Adatvédelmi Nyilatkozat