ebben az oktatóanyagban megmutatom, hogyan tölthet fel bármilyen Google webes betűtípust a Blogger blogjába. Van néhány módja ennek, de én így csinálom.
ez az oktatóanyag a legalkalmasabb azok számára, akik rendelkeznek némi CSS tudással. Ehhez az oktatóanyaghoz a Blogger “egyszerű” sablonját használom.
Íme egy példa a Lemon Macaron sablonunkra telepített egyedi Google webes betűtípusra.
1. lépés
mielőtt elkezdenénk, mindig azt javaslom, hogy készítsen biztonsági másolatot az aktuális sablonról, mielőtt bármilyen változtatást végezne (csak arra az esetre, ha valami rosszul fordul elő).
ezt megteheti az irányítópulton, ha megy sablon > biztonsági mentés/visszaállítás (a jobb felső sarokban található) > töltse le a teljes sablont.
2.lépés
a sablon biztonsági mentése után kattintson a HTML szerkesztése elemre (még mindig a “sablon” lapon vagyunk).
3. lépés
ha ezt az oldalt nyitva hagyja, nyisson meg egy új lapot vagy ablakot, majd lépjen a Google Web Fonts webhelyére. Keresse meg a használni kívánt betűtípust, majd válassza a gyors használat lehetőséget.
úgy döntöttem, hogy a ‘Lobster Two’ betűtípust használom.
4.lépés
az 1. szakaszhoz: válassza ki a kívánt stílusokat, válassza ki a betűtípushoz elérhető stílusokat (több stílust is kiválaszthat). Ne feledje, hogy a túl sok stílus kiválasztása lelassíthatja blogját. A normál 400-at választottam, amint az alább látható.
a 3.szakaszhoz: adja hozzá ezt a kódot a webhelyéhez, kattintson a @import fülre.
5. lépés
másolja az információkat a @import mezőbe.
most, nyitva hagyva ezt az oldalt, térjen vissza a blogjához (ahol a HTML szerkesztése lehetőséget választotta). Be fogjuk illeszteni a betűtípus importálási kódját a sablonjába.
keresse meg a követendő szöveget a Sablonszerkesztő eleje felé (általában a 13. vagy a 14. sorban található):
<b:skin>...</b:skin>
a kibontás után illessze be a Google Web Fonts webhely @import mezőjéből másolt információkat a következő szöveggel:
/* Variable definitions
ennek így kell kinéznie:
kattintson sablon mentése. A betűtípus most importált! Most elhelyezheti a betűtípuscsaládot ott, ahol meg szeretné jeleníteni a sablonban.
6.lépés
gyorsan megmutatom, hogyan kell használni az újonnan importált betűtípust. Ebben a példában a betűtípust fogom használni a bejegyzés címéhez. A HTML-szerkesztőben keressen:
h3.post-title, .comments h4
távolítsa el a következő sort:
font: $(post.title.font);
cserélje ki a 4. szakaszban felsorolt szövegre: integrálja a betűtípusokat a CSS-be a Google Web Fonts webhelyén.
font-family: 'Lobster Two', cursive;
így kell kinéznie, miután beillesztette a betűtípus – család adatait:
