Mérei Tamás webdesigner

Tutorial: betűtípusok a weben

Szerző:   |   2012-02-17

Alapvetően kétféle betűtípust különböztetünk meg a weben: webstandard és nem webstandard betűtípusok. Webstandard betűtípusok pl. az Arial, Verdana, Courier, amik jó eséllyel mindenféle böngésző alatt meg fognak jelenni. Kiválóan összegyűjtött lista olvasható az alábbi linkre kattintva.

Ha azt szeretnénk, hogy nem webstandard betűtípusunk minden böngészőben megjelenjen, használjuk a fontsquirrel.com font-face generátorát. Ha nem létszükséglet a régebbi böngészők és az Internet Explorer támogatása, akkor használjuk a szabványos CSS megoldást:


@font-face {
	font-family: választott-név;
	src: url('fájlnév.otf');
}
h1 {
	font-family: választott-név;
}

Videó

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

30 hozzászólás

  1. SWDsoft
    2013. február 12. kedd - 20:52

    Bocsánat! De a Microsoft minek fejleszt egy ilyen hulladék böngészőt mint az IE? Szerintem ők sem hibbantak, és csak látják hogy bőven lekörözi majdnem az összes böngésző ezt a “zsákutca” böngészőt. Mindenkinek jobb lenne hogyha eltörölnék ÖRÖKRE! Kivéve bill Gates 😀

    • pingvinfej
      2013. augusztus 31. szombat - 03:57

      Ha csak a böngészője lenne “hulladék” 🙂

  2. Edem5
    2013. január 13. vasárnap - 15:45

    Szia!
    Sajnos nekem az IPA fonetikus betűkészlettel gyűlt meg a bajom, a chrome-on kívül egyik sem jeleníti meg(exp., opera, firefox). A font-face generátor a betűkészleteket hibásnak adja ki, másfajta IPA fontkészletet meg lenullázva küldte vissza. Van rá valami jó megoldás?

  3. D.Toni
    2012. május 10. csütörtök - 18:53

    Sziasztok!

    A videóban elhangzott “ellenőrizzük jogosultak vagyunk-e a font webes alkalmazásához”, ez pontosabban mit takar ill hogyan tudom ellenőrizni?

    Gratulálok az oldalhoz!

    • cyrex
      2012. május 12. szombat - 22:12

      Már nem emlékszem pontosan mit mondtam a videóban, de szerintem arra céloztam, hogy jogtiszta betűtípust használj.

    • BonFire
      2013. február 11. hétfő - 23:45

      Mindegyik betűtípushoz jár egy Lixense fájl, amiben leírják, mit tehetsz vele, és mit nem. Vannak betűk, amelyek bizonyos programokkal együtt érkeznek, az ezekre vonatkozó felhasználási feltételek a program telepítésekor olvashatók az EULA-ban. Mindig el kell olvasni az EULÁt. Ha megvásároltál egy fontot, az sem jelenti azt, hogy azt csinálhatsz vele, amit akarsz. Pl. nem biztos, hogy átszerkesztheted. Ha egy standard betűkészletet vettél, amiben nincs hungarumlaut, nem biztos, hogy jogod van beleszerkeszteni, inkább meg kell vegyed az Expert készletet. Ugyanígy tilthatják azt is, hogy a weben felhasználd.

      A Myriad Pro pont nem volt egy szerencsés választás, már rég olvastam az EULA-t, de úgy rémlik, az Adobe igényt tart a kizárólagos felhasználásra. Ami azt jelenti a gyakorlatban, hogy nyomtatott termékeken lépten-nyomon találkozhatsz vele (a Füles rejtvényújság kompletten azzal készül), viszont képernyőn (a saját képernyődön) kívül ritka, mint a fehér holló.

      Talán nem véletlenül. 😉

    • cyrex
      2013. február 12. kedd - 07:48

      Myriad-ból is van többféle, a Myriad Web Pro típust szerintem használhatod weben is:
      azfonts.net/families/myriad-web-pro.html

  4. White#Angel
    2012. május 7. hétfő - 00:14

    Olyat szeretnék én kérdezni, hogy letöltöttem az összes tutorialos videódat + elmentettem az oldalt is és ebből csinálhatok-e egy gyűjteményt, amit feltöltenék BeLoad.cc torrent letöltő oldalra. Volt már fent ilyen tut, aminek rossz is volt a minősége, Videosmart-os változatos volt + csak 4 videó származott tőled.
    Szóval én úgy képzeltem el, hogy amiket leszedtem csinálok egy weboldalt belőle, amit nem töltök fel, hanem az lesz a torrent és persze velük a sok videóid.
    Mint mondtam volt már fent videód, de így tisztább, hogy inkább megkérdem.

    • cyrex
      2012. május 7. hétfő - 21:25

      Szerinted mit tudnék tenni ellene? Kezdjem el verni az asztalt meg fenyegetőzni, mint anno valamelyik oktatóvideós oldal tulajdonosa amikor felkerültek a videói a piratebay-re? 🙂 Azt csinálsz a videókkal amit akarsz, úgysem tudom és nem is akarom megakadályozni.

      Egyébként van egy olyan szabály, hogy torrent oldalakra nem töltesz fel olyan anyagot ami amúgy is ingyenesen hozzáférhető bárki számára.

    • White#Angel
      2012. május 7. hétfő - 23:37

      😐 Az fura, mert nincs olyan tutorial, ami nem videósmartos lenne. Na jó egy webdesign-es ami eredetileg is egy DVD-ről van.

  5. Kriczky Gábor
    2012. május 1. kedd - 20:12

    sziasztok
    Nekem nem ezzel a programozással lenne problémám,hanem a Turbo Pascal programozás jelent gondot,szóval,ha valaki ismer olyan weboldalt ahol az alapoktól kezdve feljebb és feljebb juthatunk az kérem írja meg itt a cyrex-en vagy írjon nekem :gaborkr@gmail.com-email címre.
    Előre is köszönöm

    • cyrex
      2012. május 7. hétfő - 21:27

      Hol tanítanak még Turbo Pascalt? Amikor nekünk 13 éve tanították középiskolában, már akkor is elavultnak számított 🙂

    • Humanimal
      2012. május 8. kedd - 16:18

      Nekünk még tanítják -.- :S Nagy bánatomra. már a Basicet jól tudom, a C-hez is értek, Delphi-zek, erre a suliban meg “totyogunk” az informatikában a turbo pascal 7.0-val eg az object pascallal…istenem :/

  6. Rittgasszer Ákos
    2012. április 18. szerda - 14:53

    Hali cyrex.

    Mivel nem találtam meg az e-mailedet ezé ide írom.
    Lenne egy olyan kérésem ,hogy Lécíves csinálj egy olyan tutorialt ami a WordPressel foglalkozik.
    Itt én arra gondolok hogy pl hogy kell feltelepíteni webtárhelyre vagy simán gépre hogy tesztelni lehesen a weboldalt és ne kelljen hozzá webtárhely(ez fontos lenne), hogy kell hozzá sablont készíteni és a müködését elmagyarázni.
    Mivel eggyetlen magyar videot vagy leírást setaláltam ezzel kapcsoltaosan.
    Imádom az oldalad Nagyon sok mindent itt tanultam meg mivel 8. osztályban nem tanítják pl a css meg htm-t se.

    Az e-mail címemre is válaszolhatsz.

    Előre is köszönöm.

    • cyrex
      2012. április 21. szombat - 11:34

      Pont ezért nincs e-mail cím az oldalon, mert ezer ilyen levelet kaptam mindig 🙂

      Amit írsz, ahhoz erős informatikai tudás szükséges, webszervert, PHP-t, MySQL-t kell telepíteni és konfigurálni. Vannak komplett telepítők amik mindent feltelepítenek egyben, de, hogy tényleg működik e egyből, azt nem tudom.

    • Rittgasszer Ákos
      2012. április 21. szombat - 15:37

      Nagy nehezen felraktam egy local hostot a gépemre és rá a wordpress-t.
      Lécíves Csinálj egy olyan tutoriált ahol csinálsz egy fúl alap wp sablont:D , mert én próbálkoztam Angol vidi után de nem sikerült mert nem értettem belőle sokat.

    • Humanimal
      2012. május 2. szerda - 20:54

      Részben engem is érdekelne a dolog. Kicsit “rossz magaviseletű” stílusnak tűnik a következő, amolyan pökhendi hangnemmel, de pls ne értsd félre, csak nem tudom máshogy megfogalmazni :$

      A sablonozás sok mindenkit érdekelne. Az eddigi és mostani wp sablonodat gondolom te magad csináltad, ebből kifolyólag értesz hozzá. Elég lenne egy alap sablon tutorialja, amit utána könnyen lehet változtatni, egyedivé tenni.

      Szóval ennyi 🙂 Én most nem a tipikus bombázásképpen írtam ezt neked, hanem ahogy megfigyelgettem az eddigi hozzászólások nagy részét (az egész blogon), úgy vettem észre, egy wp sablon készítése sok mindenkit érdekelne. Így ha egy hónap múlva is lenne csak kész a videó, sok embert tennél vele boldoggá :))

    • cyrex
      2012. május 7. hétfő - 21:37

      wp-content/themes könyvtárban vannak a sablonok. Ezen belül találod a teljes megjelenítést. Itt megkeresed a kívánt részt és módosítod kedved szerint. Ennyi az egész, nem kell nulláról megírni a sablont.

      Amit most látsz az oldalamon, azt sem nulláról csináltam. Fogtam a gyárit, kiszedtem belőle ami nem kell, beleraktam egy-két módosított függvényt, pl. a kommentek megjelenítéséhez, és írtam hozzá egy új CSS fájlt.

    • Humanimal
      2012. május 8. kedd - 16:21

      Pont az ilyenekről kéne 😀 Ez sajnos nekem is egy rossz tulajdonságom meg, szerintem sokaknak is. Ha nulláról kezdjük a kódot akkor okés, de ha átírni kell, akkor sosem sikerül azt elérni amit szeretnénk. Én például (vegyük a te oldalad) tegyük fel ugyanezt a színösszeállítást ugyanígy szeretném elérni, simán elcseszem és minden zöld lesz. De ha megírom a nulláról, tudom mit hogy neveztem el akkor megy. Tehát akár ilyen “átalakításról szóló, mi hova tartozik” dolog is lehetne a wp sablonokról…

  7. zafiruveg
    2012. március 31. szombat - 19:38

    Jó az új dizájn! 🙂
    Itt tanultam meg CSS-ni, ezt ezúttal megköszönném, és mindjárt lenne is egy kérdésem:
    Notepad-ben a html fájlt UTF-8-ban mentem el, de mikor feltöltöm atw-s tárhelyemre, ott a magyar különleges karakterek (ő,ű,stb.) nem jelennek meg rendesen. Mit kell csinálnom?

    • cyrex
      2012. március 31. szombat - 21:17

      Az ATW nem támogatja az UTF-8-at, legalábbis úgy tűnik sok itt leírt komment alapján.

    • Ventosite.info
      2012. április 1. vasárnap - 08:57

      ANSI-ba mentesed el!

  8. Humanimal
    2012. március 26. hétfő - 21:38

    Nagyon jó az oldal új kinézete. Tetszik. Grat hozzá 😀

  9. MexXx
    2012. március 24. szombat - 16:29

    Elég sokat segített kezdetben az oldal! Grat hozzá de lenne egy kérdésem. Én is ilyen pályát kezdtem el és kíváncsi lennék a véleményedre és tanácsodra. Kezdetnek itt egy kép egyik munkámról: http://mmsite.weboldala.net/mysite.JPG

  10. rokkerboci
    2012. március 20. kedd - 20:05

    Nagyon jó a blognak az új kinézete! Grat! 😉

  11. puskinl
    2012. március 6. kedd - 21:15

    Üdv!
    Nem webstand fontokhoz használható még a Google WebFonts is. Ott annyi a különbség, hogy nem a honlapunk webserveréről, hanem a google-tól tölti le a fontot a site betöltésekor.
    Ja, és gratulálok az oldaladhoz, hiánypótló a maga nemében! 🙂

  12. Ventosite
    2012. február 21. kedd - 20:59

    Köszi ezt is besorolhatjuk a legjobb weben található magyar nyelvű tutorialok közé!

  13. Brien
    2012. február 19. vasárnap - 21:54

    És itt is van! 🙂
    Köszy szépen!! 😉

  14. hunostor
    2012. február 18. szombat - 02:43

    Zseniális video, éppen a napokban gyűlt meg a bajom a fontokkal:-)) Ez most sokat segített, köszi!

Hozzászólás

Legújabb hozzászólások