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ó

30 hozzászólás

  1. 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 😀

    • 2013. augusztus 31. szombat - 03:57

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

  2. 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. 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!

    • 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.

    • 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. 😉

    • 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. 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.

    • 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.

    • 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. 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

    • 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 🙂

    • 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. 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.

    • 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.

    • 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.

    • 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á :))

    • 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.

    • 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. 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?

    • 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.

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

      ANSI-ba mentesed el!

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

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

  9. 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. 2012. március 20. kedd - 20:05

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

  11. 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. 2012. február 21. kedd - 20:59

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

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

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

  14. 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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...