2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

Egyedi betűtípus honlapodon 1.

Egy tutorial, ami arról szól, hogyan tudsz egyedi betűtípust használni a weboldaladon úgy, hogy az másnál is ugyan úgy nézzen ki :) És mivel ezt is már sokan kérdeztétek, így hoztam kettő féle leírást erről is. Ez az egyik, a másikat pedig itt olvashatod el. Arra kell vigyázni, hogy olyan betűtípust válassz, ami magyar ékezetes!
1. lépés: menj el erre az oldalra: https://fonts.google.com/
2. lépés: keress magadnak egy szimpatikus betűtípust

 

 

3. lépés: ha megtaláltad, ami tetszik…
Nekem mondjuk ez:

 

 

Szóval ha megtaláltad, akkor arra a kis piros plusz jelre kell kattintani. Kattintás után egyből a monitorod jobb oldalán alul megjelenik egy fekete sáv

 

 

4. lépés: Rá kell kattintani a jobb oldalon lévő negatív jelre. Ekkor az ablak nagyobb méretű lesz.

 

 

5. lépés: az ablakban az első fontos dolog, hogy a Customize linkre kell kattintani. Itt ki lehet választani, hogy a betűtípusnak milyen stílusait akarjuk használni, lejjebb pedig mindenképpen be kell pipálni a Latin Extended rubrikát. Így lesz a betű ékezetes. Vannak betűk, ahol nincs lehetőség ennek bepipálásához, ami értelemszerűen azt jelenti, hogy a kiválasztott betűben nincsen benne a magyar ékezet :(

 

 

6. lépés: Most menjünk vissza az Embed feliratra. Kettőféleképpen lehet megjeleníteni a betűt az oldalon.

A: A Standard linken maradva ezt a kódot kimásoljuk és beillesszük WordPress-ben a header.php fájlba. G-Portálon pedig mondjuk a láblécbe.

 

<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">

 

 

B: Az Import linkre kattintva a <style></style> kód közötti egy sort kimásoljuk és beillesszük a CSS kódunkba.

 

@import url('https://fonts.googleapis.com/css?family=Dosis');

 

 

8. lépés: Ugyanebben az ablakban a Google megadja azt is, hogy hogyan kell a betűtípust a CSS kódban beírni. Másoljátok ki és oda illesszétek be, ahol a kiválasztott betűtípust szeretnétek alkalmazni az oldalatokon :)

 

 

9. lépés: ha mégsem szeretnétek ezt a betűtípust használni, akkor egyszerűen csak a Google oldalán kattintsatok rá a piros negatív ikonra. Így eltűnik a kis ablak is a monitor jobb oldaláról. Több betűtípust is lehet egyszerre kiválasztani, de én egyesével szoktam, mert így a kódokban is egyesével teszi bele őket, nem pedig egyben az összeset.

 

 

Itt egy példa CSS kód. Ez a modulfejlécre hat és a modulban lévő szövegre a G-Portálon. De ugyan úgy bárhová beilleszthető, ahol betűtípust használtok akár G-Portálon, akár HTML/PHP oldalon is.

 

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Dosis');
td.modtitle { /* modulfejléc része */
font-family: 'Dosis', sans-serif;
font-size: 18px;
color: #f4e6cb;
text-align: center;
background-color: #ba6066;
font-weight: bold;
text-transform: none;
font-style: normal;
}
td.modbody { /*  modulban a szöveg elrendezése, modul háttere  */
background-color: #f8ecd4;
font-family: 'Dosis', sans-serif;
font-size: 15px;
color: #5f5f5f;
}
--></style>


1 162 megtekintés

Hozzászólások