Brielle
Brielle
2016. feb 14

Oldalunk kinézetének formálásakor fontos szempont lehet, hogy milyen betűtípust használjunk fel. Van néhány betűkészlet, melyek alapvetően előfordulnak a számítógépünkön, böngészőnkben, melyeket most csak alap betűtípusoknak neveznék. Ilyenek például a talpas (serif) pl.: Times New Roman, illetve a talp nélküli (sans serif) pl.: Arial, Tahoma, Veranda, Comic Sans, Century Gothic típusok, csak hogy párat említsek. Ám, ezek a betűtípusok egy idő után unalmassá válhatnak, ebből adódóan pedig szeretnénk olyan készleteket felhasználni, amik egy kicsit feldobhatják weboldalunkat.

Így ebben a leírásban természetesen arról lesz szó, hogyan használhatsz oldaladon teljesen egyedi, az alap betűtípusokon kívüli készleteket. Ehhez nem lesz másra szükségünk, mint egy kis CSS-re, illetve néhány új betűtípus letöltésére, majd feltöltésére.

Megfelelő betűtípus letöltése

Olyan betűtípusra lesz szükségünk, ami nem túl cirádás, díszes, hanem viszonylag egyszerű, az látogató könnyedén tudja olvasni, mivel most a példa kedvéért a tartalomnak keresünk valami tetszetőset, de mégis egyszerűt. A megfelelő betűtípus megtalálására a fontsquirrel.com oldalt fogjuk használni. Ezen az oldalon az oldalmodulban választhatjuk ki a kategóriákat, amik alapján böngészni szeretnénk a lehetőségek között.

Én most az Open Sans nevezetű betűtípust választottam ki, ami egy talp nélküli, egyszerű betűtípus. Most ezt le kell majd töltenünk, viszont nem akárhogyan. Úgy kell megoldanunk, hogy a betűtípus neve alatti füleknél a Webfont Kit nevezetűre kell kattintanunk, itt pedig a TTF és a WOFF lehetőségeket kell csak kipipálnunk, majd letölteni a csomagot.

Miután kicsomagoltuk, láthatjuk, hogy többféle stílusban is előfordul az adott betűtípus (bold-félkövér, italic-dőlt…). Először is, nekünk a regular (opensans_regular_macroman) nevezetű mappára lesz szükségünk. Ebben fogjuk megtalálni a .ttf és a .woff formátumban lévő betűtípusunkat. Ezeket kell feltöltenünk weboldalunk szerverébe (public_html mappa) FTP segítségével. » FTP kapcsolódás tutorial

Figyeljünk rá oda, hogy amikor feltöltjük őket, alakítsuk át a fájl nevet kisbetűsre, esetleg egyszerűsítsük le a fájlnevet, hogy könnyebben tudjuk kezelni.

CSS kód

Mivel a betűtípusunk már fent van a szerveren, már csak a CSS kódra lesz szükségünk, amivel beilleszthetjük.

@font-face {
font-family: "opensans";
font-style: normal;
font-weight: normal;
src: local("?"), url("http://cherryuniverse.net/opensans-regular-webfont.woff") format("woff"), url("http://cherryuniverse.net/opensans-regular.ttf") format("truetype");
}

Magyarázat:

  • font-family: itt a betűtípus általános megnevezését kell megadnunk, amit majd az egyes moduloknál is meg kell majd adnunk. Legyen egyszerű, hogy emlékezzünk rá. (mint pl opensans)
  • src: itt a megadott URL-ek helyére kell beillesztenünk a .woff és .ttf formátumok elérési URL-jét, azaz, ahová feltöltöttük a betűtípusokat. Ha sima public_html-be töltöttük, akkor az oldalunk cím után / jellel elválasztva jöhet a fájl név.

Tipp:

Ha szeretnéd te is felhasználni ezt a betűtípust, de pl GPortálos oldalad van, és nem tudod hova feltölteni a betűtípust, akkor használhatod az én feltöltött URL-emet is. Minden bizonnyal így is működnie kell.

Betűtípus megadása

Ezután már csak az egyes modulokban kell megadnunk a betűtípust. Ehhez csak a megadott megnevezést kell nekünk is megjelölnünk, és máris működni fog:

font-family: opensans;

Előfordulhat, hogy először a magyar ékezetes karakterek (ő, ű) nem fognak megfelelően megjelenni. Ne ijedj meg, várj egy kicsit, frissítsd be többször az oldalad, és működni fog.

Félkövér, dőlt stílus megadása

Sajnos, ha nem töltöd fel a betűtípushoz tartozó félkövér formátumokat, akkor ha CSS-ben a félkövérhez is a sima típust fogod megadni, akkor kicsit elmosódott lesz a fékövérrel kiemelt szöveged. Korrigálni a hibát természetesen a hiányzó készletek feltöltésével tudod. Keresd meg ezeknek is a mappáját a letöltött betűkészletek között. (bold – félkövér, italic – dőlt). Töltsd fel ezeket is a szerveredre, majd CSS-ben ezek így jelenjenek meg:

Félkövér:

@font-face {
font-family: "opensans bold";
font-style: normal;
font-weight: normal;
src: local("?"), url("http://cherryuniverse.net/opensans-bold-webfont.woff") format("woff"), url("http://cherryuniverse.net/opensans-bold.ttf") format("truetype");
}

Dőlt:

@font-face {
font-family: "opensans italic";
font-style: normal;
font-weight: normal;
src: local("?"), url("http://cherryuniverse.net/opensans-italic-webfont.woff") format("woff"), url("http://cherryuniverse.net/opensans-italic-webfont.ttf") format("truetype");
}

Majd a félkövér és dőlt formázásnál ezeket a megnevezéseket add meg a betűtípusnál:

b, strong{
color: #000000;
font-family: opensans bold;
}

i, talic, em{
color: #000000;
font-family: opensans italic;
}

Így, ha a szövegednek félkövér, vagy dőlt formázást adsz, akkor már úgy fog megjelenni, ahogy lennie kell, nem lesznek elmosódottak.

Ennyi lett volna ez a tutorial, remélem, hasznát fogod venni, és sikeresen működésbe tudod majd hozni vele a kiválasztott betűtípusodat. Ha bármi gondod, kérdésed akadna, nyugodtan tedd fel hozzászólásban!


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *