A weboldaladon megjelenő betűtípusok, ha nem definiálod őket külön, akkor a böngészőben beállított alap betűtípusok szerint fognak megjelenni.
Például Firefoxban így néz ki az alapértelmezett betűtípus beállítás ablak:
Beállítások->Tartalom->Betűk és színek
Természetesen bármely valamit magára adó weboldal rendelkezik külön stíluslappal (CSS) és előre definiált betűtípusokkal (Font).
De mi van akkor, ha az általam kinézett font nem az Arial, vagy a Times New Roman?
Egyedi fontokat legjobb fontszolgáltatótól beszerezni, és ezt felhasználni honlapunkhoz. Megannyi ingyenes font szolgáltató is létezik a weben, és nem kell hozzá fontot letöltenünk, vagy elhelyeznünk a tárhelyünkön. A betűtípus ugyanis két kód segítségével a weboldalunkba illeszthetőek, és a fontszolgáltató szerveréről fognak betöltődni.
Hogyan változtassam meg a betűtípusokat az oldalamon?
Lássunk egy egyszerű példát!
Van egy index.html és egy style.css fájlunk. A html a tartalomért, a css a kinézetért felelős. Ahhoz, hogy a html értelmezni tudja a css-t, egy kódot kell elhelyeznünk a html fájlban a <head> alá:
|
1 |
<link rel="StyleSheet" href="style.css"> |
Az index fájl ezután így néz ki:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <link rel="StyleSheet" href="style.css"> </head> <body> <h1>Hello világ!</h1> <p>Ez egy bekezdés.</p> </body> </html> |
A CSS pedig így:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<head> <style type="text/css"> body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; font-family: 'Times New Roman'; } p { font-family: 'Times New Roman'; font-size:20px; } </style> </head> |
Rengeteg web font szolgáltató létezik, mint pl. a Google Fonts, vagy az Adobe Typekit.
Google Web Fonts
A Google Web Fonts kezelése és weboldalunkba illesztése rendkívül egyszerű.
A font listában válaszd ki a weboldaladhoz leginkább illő betűtípust, és kattints a Quick use linkre:
Itt a következő opciókat tudod megadni:
A font többféle változatát: normal, bold, italic, vagy bold-italic. Az oldal jelzi, hogy minél több altípust választasz, annál lassabban töltődhet be az oldalad. A példában kétféle vastagságot választottam az oldalhoz, ezt majd a CSS-ben lehet megadni, hogy font-weight: 400 legyen vagy 900.
Meg lehet adni – ha a font lehetővé teszi, hogy speciális karakter készleteket is használj az alapértelmezett Latin mellett.
A következő kódot kell beillesztened a weboldalad index.html -jébe, illetve azon html fájlokba ahol használni szeretnéd pl. a Simonetta nevű fontot:
|
1 |
<link href='http://fonts.googleapis.com/css?family=Simonetta:400,900' rel='stylesheet' type='text/css'> |
A következő sort pedig a CSS fájlba kell beírni:
|
1 |
font-family: 'Simonetta', cursive; |
A fájlok a kódokkal tehát:
Mivel van egy fő címünk (<h1>), illetve egy bekezdés szövegünk (<p>), meg lehet adni már betűtípust. Így néznek ki most a fájlok:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <link rel="StyleSheet" href="style.css"> <!--A példában említett betűtípus--> <link href='http://fonts.googleapis.com/css?family=Simonetta:400,900' rel='stylesheet' type='text/css'> <!--Egy másik betűtípus a bekezdésekhez--> <link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'> </head> <body> <h1>Hello világ!</h1> <p>Ez egy bekezdés.</p> </body> </html> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<head> <style type="text/css"> body { background-color:#d0e4fe; } <!--A példában említett betűtípus a címhez--> h1 { color:orange; text-align:center; font-family: 'Simonetta', cursive;font-weight: 900; } <!--A bekezdés betűtípusa--> p { font-family: 'Balthazar', serif; font-size:20px; } </style> </head> |
Végül ilyen lett az oldal: http://teszt3.testdomain.hu/
