Ezzel az eljárással minden böngészőben (az esetek 95%-ában) ugyan úgy fog kinézni a szöveged. Én a Mozilla Firefox-ban, Google Chrome-ban és Internet Explorer-ben néztem meg, és mindenhol tökéletesen mutat :)
1. lépés: válassz egy egyedi betűt, amit majd szeretnél alkalmazni az oldalon akár a tartalomhoz, akár a modulfejlécekhez, linkhez, bármihez. Szerencsés olyan betűtípust választani, ami tartalmaz ékezeteket. Nekem ez nem annyira sikerült, mert egy két ékezetes betűt nem tartalmaz ez az egyedi betű, de sebaj, a leíráshoz ez is megfelel.
2. lépés: ha meg vagy és kiválasztottad a betűdet, akkor most ellátogatunk egy konvertáló oldalra, ide: http://www.fontsquirrel.com/tools/webfont-generator
3 lépés: az Add Fonts-ra kattintva töltsd fel a betűdet
Ha feltöltötted, akkor meg is jelenik az Add Fonts alatt egy új sor.
4. lépés: most ugyanitt így legyen beállítva minden, mint nekem
5. lépés: a lap alján pedig kattints erre:
Várj egy kicsit, amíg dolgozik a gép.
6. lépés: a felugró ablakból mentsd le a tömörített fájlt a gépedre. Olyan helyre, ahol aztán meg is fogod találni :)
7. lépés: a gépeden keresd meg a fájlt és csomagold ki.
8. lépés: a fájlok közül, amiket kicsomagoltál, neked ezekre lesz szükséged. Értelemszerűen a név a betűtípusod neve. A fájl kiterjesztése a fontos, mert ezt a 4 fájlt fogjuk feltölteni a weboldaladra!!!! (EOT, SVG, TrueType, WOFF)
9. lépés: töltsd fel akkor most a 4 fájlt a weboldaladra. Ha G-Portál, akkor a G-PorTÁR-ba!, ha HTML oldal, akkor ahova jónak látod :) Feltöltés után a G-PorTÁR-ban már meg is jelennek a fájlok.
Ezeknek a fájloknak az URL címét kell kimásolni, és a CSS kódban a megfelelő helyre beilleszteni. Ezt úgy érheted el, hogy egyesével mindegyik címre kattints rá jobb egérgombbal és:
A hivatkozás címének másolása után beillesztés a CSS kódban.
A CSS kód leírása
Amit kiemeltem, azok a fontos részek. A http rész az URL címe a betűtípusnak. A hivatkozás másolása után ide kell beilleszteni az enyém helyére az URL-eket. De arra nagyon-nagyon figyelni kell, hogy a megfelelő kiterjesztésű hivatkozást a megfelelő helyre illeszd be! Amit kiemeltem részt a CSS-ben, annak a pontos helyére illeszd be a te URL címedet!
@font-face {
font-family: 'PassionSans';
src: url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007557_01136.eot?') format('eot'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007554_05150.woff') format('woff'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007555_08910.ttf') format('truetype'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1405007556_09981.svg#PassionSans') format('svg');
}
Az utolsó sorban látható az svg.# után a betűtípus neve. Oda írd be a te betűtípusod nevét!
Ezek után pedig ugyan úgy a CSS kódban adod meg a betűtípust. Példa és teljes kód lejjebb látható.
Nekem most a td.modbody-ban van téve az egyedi betű.
<style type="text/css">
@font-face {
font-family: 'PassionSans';
src: url('http://aranymeli.gportal.hu/portal/aranymeli/upload
/285733_1405007557_01136.eot?') format('eot'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/
285733_1405007554_05150.woff') format('woff'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload/
285733_1405007555_08910.ttf') format('truetype'),
url('http://aranymeli.gportal.hu/portal/aranymeli/upload
/285733_1405007556_09981.svg#PassionSans') format('svg');
}
</style>
<style type="text/css">
td.modbody {
background-color: transparent;
font-weight: normal;
font-family: PassionSans;
font-size: 15px;
color: #000000;
text-align: justify;
letter-spacing: 2px;
}
</style>
2 933 megtekintés