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 */
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:
AJÁNLOM AZ OLDALT
Súgó
Frissítés