Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Betűtípusok
Betűtípusok : !Egyedi betűtípus használata honlapodon 1.

!Egyedi betűtípus használata honlapodon 1.


Egy tutorial, ami arról szól, hogyan tudsz egyedi betűtípust használni a weboldaladon úgy, hogy az másnál is ugyan úgy nézzen ki :) És mivel ezt is már sokan kérdeztétek, így hoztam kettő féle leírást erről is.
Ez az egyik, a másikat pedig itt olvashatod el.

Arra kell vigyázni, hogy olyan betűtípust válassz, ami magyar ékezetes!!!!!!!!!!!!!!

1. lépés: menj el erre az oldalra: http://www.google.com/webfonts 
2. lépés: keress magadnak egy szimpatikus betűtípust
A fenti fülön tudsz változtatni, hogy milyen nézetben szeretnéd látni a szöveget

Nekem a pharagraph van beállítva, mert ott mondhatni cikket látsz a betűtípussal.
3. lépés: ha megtaláltad, ami tetszik...
Nekem mondjuk ez:

Szóval ha megtaláltad, akkor ha erre az ikonra kattintasz, megtudod nézni milyen fontokat tartalmaz a betűd.
Hogy van-e benne hosszú Ú, meg ilyenek

4. lépés: ha eddig megvagyunk, akkor katt ide: Add the collection

5. lépés: felugrik egy kék ablak alul

6. lépés: Katt erre rá

7. lépés: ha a betűtípusnak több formátuma van, válaszd ki, hogy melyiket szeretnéd

8. lépés: görgess lefelé és a HTML kódot másold ki és illesz be oldalad jobb vagy bal oldalán lévő egyszerű modulod forráskód nézetébe.

Az én kódom ez:
<link href='http://fonts.googleapis.com/css?family=Simonetta' rel='stylesheet' type='text/css'>
9. lépés: ha eddig megvagy akkor a HTML kód után azt látod, hogyan illeszd be a fontot a CSS kódodba

Itt egy példa CSS kód. Ez a modulfejlécre hat és a modulban lévő szövegre:

<style type="text/css">
td.modtitle { /* modulfejléc része */
   font-family: 'Simonetta', cursive;
   font-size: 18px;
   color: #f4e6cb;
   text-align: center;
   background-color: #ba6066;
   padding-top: 7px; /* keret és a szöveg közti távolság */
   padding-bottom: 4px; /* keret és a szöveg közti távolság */
   border-left: #ecddc1 1px solid;
   border-right: #ecddc1 1px solid;
   border-bottom: #e2d4bd 0px solid;
   border-top: #ecddc1 1px solid;
   -moz-border-radius: 0em 0em 0em 0em; /* a keret szélek kerekítése */
   -webkit-border-radius: 0em 0em 0em 0em; /* a keret szélek kerekítése */
   font-weight: bold;
   text-transform: none;
   font-style: normal;
}
td.modbody { /*  modulban a szöveg elrendezése, modul háttere  */
   background-color: #f8ecd4; 
   font-family: 'Simonetta', cursive;
   font-size: 15px; 
   color: #5f5f5f;
   padding-left: 5px; /* keret és a szöveg közti távolság */
   padding-right: 5px;
   padding-bottom: 4px;
   border-left: #ecddc1 1px solid;
   border-right: #ecddc1 1px solid;
   border-bottom: #ecddc1 1px solid;
   border-top: #e2d4bd 0px none;
   -moz-border-radius: 0em 0em 0em 0em;
   -webkit-border-radius: 0em 0em 0em 0em;
}
--></style>

De ha például más betűtípussal szeretnéd írni a modulfejlécet, akkor ezen az oldalon http://www.google.com/webfonts válassz egy másik betűtípust és az előző HTML kód helyére illeszd be ezt:
Több betűtípust is kiválaszthatsz. Akkor a HTML kód kicsit módosul:

<link href='http://fonts.googleapis.com/css?family=Henny+Penny|Simonetta' rel='stylesheet' type='text/css'>
A CSS részben is ekkor már az összes kiválasztott betűtípust mutatja:

 

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

PREKAMBRIUM //// A TUDÁS BIRODALMA///PREKAMBRIUM.GPORTAL.HU /// PREKAMBRIUM //// A TUDÁS BIRODALMA    *****    RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO.GPORTAL.HU ///RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///    *****    RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL    *****    RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL    *****    PREKAMBRIUM //// A TUDÁS BIRODALMA    *****    HAMAROSAN ÚJRA ITT A KARÁCSONY! HA SZERETNÉL KARÁCSONYI HANGULATBA KEVEREDNI, AKKOR KATT IDE: KARACSONY.GPORTAL.HU    *****    "TEKERJ VISSZA" - RÉGI KERÉKPÁROK IDÕSZAKI KIÁLLÍTÁSA - BAJA TÜRR ISTVÁN MÚZEUM    *****    Naruto rajongói oldal! Felkerült John Man Ninja címû könyvének elsõ fejezete. Olvass, Filmezz, Tanulj!! KONOHA.HU    *****    Debrecen Nagyerd&#245;aljai, 150m2-es alapterület&#251;, egyszintes, 300m2-es telken, sok parkolós családiház eladó 06209911123    *****    Velaris, a második otthonom Fanfictionból új rész került fel    *****    NSYNC - Ha nosztalgiáznál, vagy érdekel,mi történik most a ByeByeBye elõadóival, akkor nézz be - NSYNC    *****    Szereted az egyedi történeteket? Kíváncsi vagy, hogy mire képes egy hobbi író? Ha igen, nézz be hozzám!    *****    Sziasztok! A Moobius pályázatán elindult két regényem. Kérlek támogass! Bõvebb információt itt olvashatsz. Katt rám.    *****    Sziasztok! A Moobius pályázatán elindult két regényem. Kérlek támogass! Bõvebb információt itt olvashatsz. Katt rám.    *****    Debrecen Nagyerdõaljai, 150m2-es alapterületû, egyszintes, 300m2-es telken, sok parkolós családiház eladó 06209911123    *****    RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL    *****    PREKAMBRIUM //// A TUDÁS BIRODALMA    *****    PREKAMBRIUM //// A TUDÁS BIRODALMA    *****    Lakatos munka- Épületlakatos munka- Haidekker kerítés - Haidekker kapu- Teraszkorlát- Lakatos munka szerelés- Hullámrács    *****    Itachi Shinden második fejezet!! - ÚJ FEJEZET - Felkerült a könyv második harmada!! Konoha.hu - KATT!! KATT! KATT!! KATT