En el desenvolupament web, l'ús correcte de l'estil de lletra proporciona un aspecte atractiu a l'aplicació. Aquests estils de lletra donen pistes visuals sobre l'ordre de lectura del document. Per exemple, l'estil de lletra de l'encapçalament del document ha de ser en negreta i significatiu per als altres. L'estil també ajuda a distingir el contingut important dels altres.
Els resultats d'aprenentatge d'aquest article són:
- Què són les fonts web de Google?
- Com importar fonts de Google en HTML?
- Com utilitzar fonts de Google al fitxer CSS?
Què són les fonts web de Google?
La font web de Google és una biblioteca de codi obert que conté centenars d'estils o famílies de tipus de lletra. També proporciona API que ens ajuden a utilitzar fonts web amb Android i CSS. Les fonts de Google són molt més lleugeres que altres biblioteques de tipus de lletra i estan disponibles gratuïtament per a ús empresarial. Són més fàcils d'implementar a qualsevol lloc web.
De manera predeterminada, CSS ofereix estils de lletra de fantasia, serif, sans serif, cursiva i monoespai. Les fonts de Google es poden utilitzar si voleu utilitzar altres estils de lletra.
Com importar fonts de Google en HTML?
Per utilitzar Google Fonts en una pàgina HTML, seguiu els passos següents.
Pas 1: seleccioneu la família de tipus de lletra
Primer, obriu el Fonts de Google lloc web oficial i seleccioneu el tipus de lletra que us agradi. Per exemple, hem escollit el ' Llagosta dos 'família de tipus de lletra:
Pas 2: seleccioneu els estils
A continuació, desplaceu-vos cap avall per veure la llista d'estils. Afegeix-los a la teva col·lecció fent clic a ' + ' signe:
Pas 3: visualitzeu les famílies seleccionades
Per veure les famílies seleccionades, feu clic a la icona destacada a continuació:
Pas 4: copieu l'enllaç per incrustar a l'HTML
Després d'això, desplaceu-vos cap avall i copieu l'enllaç de font-family utilitzant el ressaltat ' Còpia icona:
Com utilitzar fonts de Google al fitxer CSS?
Per utilitzar la còpia de Google Fonts en CSS per a l'estil, seguiu els exemples donats.
Exemple 1
Incloeu un ' ” element per especificar algun contingut o paràgraf:
< pàg > 'El millor lloc web de tutorials' pàg > Per importar les fonts de Google, enganxeu el codi copiat al '
Element d'estil 'p'.
pàg {família de tipus de lletra: 'Llagosta dos' , cursiva;
alineació de text: centre;
mida de la lletra: 45px;
color: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
Les següents propietats CSS explicades s'apliquen a l'HTML ' ' etiqueta:
- “ família de tipus de lletra ' s'assigna amb el valor ' 'Llagosta dos', cursiva ”. Aquesta família de tipus de lletra s'ha importat de Google Fonts.
- “ alineació de text ” ajusta l'alineació del text.
- “ mida de la font ” determina la mida de la lletra.
- “ color ” estableix el color de la lletra.
La imatge mostra que la família de tipus de lletra s'ha aplicat correctament:
Exemple 2
Prenguem un altre exemple per importar el ' Nerko Un ' Font de Google. Per a aquest propòsit, torneu a enganxar el codi per a l'URL de la font de Google 'Nerko One' a la '
Element d'estil 'p'.
pàg {família de tipus de lletra: 'Nerko One' , cursiva;
pes del tipus de lletra: 300 ;
mida del tipus de lletra: 30px;
}
El ' família de tipus de lletra ”, “ pes del tipus de lletra ”, i “ mida de la font ' Les propietats s'apliquen a l'HTML ' ” element.
Sortida
Us hem ensenyat com importar els tipus de lletra web de Google al fitxer CSS.
Conclusió
Per importar Google Fonts en CSS, primer visiteu el Fonts de Google lloc web oficial i seleccioneu l'estil de lletra. A continuació, copieu el codi que conté el ' @import ” i enganxeu-la al fitxer CSS o al “