Ákos mai cikkéből kiderül, hogyan tudunk egyedi betűket alkalmazni a weboldalunkon!
Korábban a szöveg formázására csak többféle (SIRF,CUFON kerülőutas megoldások ) léteztek.
Egy részük lassította az oldal betöltődését, és az oldal szerkezetét is bonyolította.
A probléma megoldása CSS-ben már létezik egy ideje, de egyszerű használatukra az utóbbi időben nyílott mód.
Két elterjedt megoldást mutatunk be:
1. Google Fonts
• Elérhetősége: http://www.google.com/webfonts
• Kompatibilitás:
o Google Chrome: version 4.249.4+
o Mozilla Firefox: version: 3.5+
o Apple Safari: version 3.1+
o Opera: version 10.5+
o Microsoft Internet Explorer: version 6+
Elnavigálva az oldalra, a Preview Text résznél lehet megadni a minta szöveget.
Amint a mintában is látható, érdemes valamilyen olyan szót, mondatot keresni, amiben szerepel minden magyar ékezetes karakter.
( Mintaszöveg vadászathoz itt )
A megfelelő betűtípusnál a Quick Use -ra kattintva, a következő képernyő látható:
1. Pontban kiválasztható az adott betűtípus stílusa.
2. A karakterkódolás beállítására szolgáló rész.
3. A használathoz szükséges kódok kiválasztása.
( A fehér sávban lévő kódot kell használni. )
• Standard:
<link href='http://fonts.googleapis.com/css?family=Dynalight' rel='stylesheet' type='text/css'>
A weboldal <head>részébe kell elhelyezni, lényegében egy stíluslap csatolás, amely a Google-ra mutat.
• @import:
@import url(http://fonts.googleapis.com/css?family=Dynalight);
A CSS-file elejére kell beszúrni, ami a Google oldaláról importálja a megfelelő elemeket.
• A SCRIT-el való megvalósítás AJAX-ot használ, erre nem térek ki.
4. CSS fájlban használatról ad információt. A keretben lévő névvel lehet a betűtípusra hivatkozni. A Jobb oldalon minta is van erre.
2. Fontsquirrel
• Elérhetősége: http://www.fontsquirrel.com/fontface
• Kompatibilitás:
o TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
o EOT fonts for Internet Explorer 4+
o WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
o SVG fonts for iPad and iPhone
o Demo.html –t és példa stylesheet.css –t is tartalmaz a szett
Lefelé görgetve kiválasztható a kívánt font.
A View Font-tal megtekinthető az adott betűtípus karaktertáblája és egyéb lehetőségek is itt érhetők el.
o Specimens:
Információk és stílusok
o Test Drive:
Tesztelés
o Character Map
Karakter tábla
o @font-face Kit
Alkalmazási csomag és nyelv beállítása
Rövid leírás és választási lehetőség a kívánt betűtípusokról, és arról, milyen eszközök és böngészők támogatják. A letöltés és kicsomagolás után a következő állományok szerepelnek benne:
o A demo.html tartalmazza a mintát
• A 9. sorban látható, hogy a használathoz a css- állományra van szükség.
• 11, 13 – 15 sorokban a használatot figyelhetjük meg.
o A stylesheet.css tartalmazza a betűtípusok csatolását.
Mindegyik stílusnak a különböző formátumai szerepelne, fontos, hogy ha a CSS-file máshol van, mit a font állományok, akkor az URL résznél a fájl hivatkozásokat, aktualizálni kell.
@font-face generator funkció
A kezdő oldalon lévő linkre kattintva, a site másik fő funkciójához lehet hozzáférni.
A generátor segítségével tetszőleges font-ot tudunk az előző formátumokra konvertálni és használni.
Fontos, hogy a betűtípusoknak a használata szabad legyen, ezt kell elfogadni a használónak, ugyanis ez mások számára is elérhető lesz.
Jó gyakorlást kívánunk!
Legyen profi a professzionális weblapkészítésben, vagy dolgozzon képzett Webdesignerként Akkreditált Webdesigner Mester tanfolyamunk elvégzése után!
Tanulja ki a webdesign mellett a php-webprogramozást is, és legyen ott a júniusban startoló kiscsoportos Akkreditált Webprogramozó Mester képzésünkön!
Induló Akkreditált Web Artist tanfolyamunk elvégzése után két piacképes informatika szakmát, PHP-Webprogramozó, és Webdesigner végzettséget egyaránt szerez!
Kétnyelvű, akkreditált bizonyítványokkal, álláslehetőséggel, részletfizetéssel!
+
Ajándék Pendrive!
Jelentkezzen az induló webes csoportokba
legkésőbb június 18-ig!
Kérjük jelezze felénk részvételi szándékát mielőbb, mert a szabad helyek beteltét követően zárjuk a jelentkezéseket határidőtől függetlenül!
Várjuk szeretettel!
Netlogi C School
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
