Utilizarea font-urilor personalizate cu ajutorul Google Web Fonts

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Utilizarea font-urilor personalizate cu ajutorul Google Web Fonts

Mesaj Scris de Cassius Dio la data de Mar 8 Ian - 14:14

Utilizarea font-urilor personalizate cu serviciul Google Web Fonts

Acest truc va permite sa instalati si sa utilizati font-uri noi oferite de serviciul Google Web Fonts in cadrul forumurilor dumneavoastra.

Exclamare Nu este necesar salvarea font-ul in calculator, sau ca utilizatorii forumului sa aiba deja acel font in calculatoarele lor.

Partea 1:

1. Pentru inceput va trebui sa alegeti un font din lista oferita de serviciul Google Web Fonts. In partea de sus a continutului, aveti niste tab-uri. Cel initial se numeste "Sentence", - va recomandam sa nu il schimbati daca utilizati acest serviciu pentru prima data. Totusi, le puteti folosi si pe celelalte in caz ca doriti un alt mod de gestionare.


2. Pentru a previzualiza direct textele, aveti mai jos o bara in care puteti:
- Schimba textul initial cu unul scris de dumneavoastra;
- Schimba marimea textului;
- Clasifica font-urile (alfabetic, dupa data adaugarii etc.).


3. Pentru a putea vedea lista de caractere disponibile a fontului ales, click pe butonul "Pop out" ().

Va trebui sa se deschida o fila noua in browser odata cu accesarea acelui buton:


Caracterele disponibile vor fi afisate, iar cele indisponibile sunt notate cu semnul X.


Partea 2:

Odata ce v-ati decis asupra fontului, faceti un click pe butonul "Quick-use" (). O sa se deschida o noua pagina, unde veti avea de structurat 3 puncte importante:

A) Alegerea stilului dorit:
Majoritatea font-urilor au un singur stil, unele insa au multiple stiluri. Puteti sa alegeti doar unul, sau mai mai multe dintre ele. Acestea va ajuta la o personalizare mai ampla cu ajutorul codurilor CSS, si chiar daca nu va pricepeti la astfel de coduri, va recomandam sa selectati toate variantele propuse, pentru ca va pot prinde bine pe parcurs.


B) Alegerea alfabetelor disponibile:
Va recomandam sa selectati toate optiunile disponibile de aici. Va aducem la cunostinta faptul ca nu veti putea folosi, vreti nu vreti, diacriticile. Motivul este ca aceste font-uri, cel putin majoritatea dintre ele, sunt create de alte tari decat cele cu limba romana.


C) Instalarea font-ului:
Acum urmeaza sa integram font-ul ales in forum.
Exclamare Alegeti pasii de urmat functie de versiunea forumului pe care o folositi.

*** Pentru versiunile phpBB2 si PunBB ***

Vom ramane la tab-ul "Standard", unde vom primi un simplu cod HTML. Il selectam si il copiem.

Mergem catre:
Panou de Administrare ~> Afisare ~> Template-uri ~> General ~> overall_header.

Exact dupa acest cod:
Cod:
<head>
vom adauga codul HTML copiat mai devreme.

Aproximativ asa ar trebui sa arate aceasta portiune de template:
Cod:
<head>
<link href='http://fonts.googleapis.com/css?family=Elsie+Swash+Caps:400,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Salvam si publicam template-ul.

*** Pentru versiunile phpBB3 si Invision ***
Vom merge la tab-ul "Javascript", unde vom primi un cod HTML, putin mai complex. Il selectam si il copiem.

Mergem catre:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript.

Cream un nou cod, unde vom copia codul oferit de Google mai devreme. Acum trebuie sa stergem complet primul rand, si de pe ultimul rand aceste portiuni:

1:
<script type="text/javascript">
2:
</script>

Aproximativ, codul nostru trebuie sa arate cam asa:
Cod:
 WebFontConfig = {
    google: { families: [ 'Elsie+Swash+Caps:400,900:latin,latin-ext' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

La rubrica "Amplasare" vom avea de selectat "Toate paginile".

Validam codul JavaScript, iar dupa il activam din optiunea "Activeaza gestiunea codurilor JavaScript".


Partea 3:

Avem mai multe variante:
1) Personalizarea unor clase, elemente, id-uri cu ajutorul CSS-ului:
Cod:
.element{
font-family: 'NUMELE_FONTULUI_ALES';
}

2) Folosirea fontului in mesaje:
Cod:
[font=NUMELE_FONTULUI_ALES]Text cu font special[/font]

3) Folosirea fontului n diferite situatii cu ajutorul codurilor HTML:
Cod:
<span style="font-family:'NUMELE_FONTULUI_ALES';">Text cu font special</span>

4) Implementarea fontului pe intreg forumul (mesaje, titluri, tabele, chenare, informatii etc.). In acest caz adaugati in Foaia de stil CSS, codul ce urmeaza:
Cod:
*{
font-family: 'NUMELE_FONTULUI_ALES' !important;
}
Exclamare Nu uitati ca trebuie sa inlocuiti in toate codurile "NUMELE_FONTULUI_ALES" cu denumirea fontului dorit.

Daca ati urmat intocmai pasii de mai sus, va felicit! Noroc

Tutorial a fost scris de Matriochka; tradus si actualizat de SGSS.

Copyright ˆForumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum