Nello sviluppo web, l'uso corretto dello stile dei caratteri fornisce un aspetto accattivante all'applicazione. Questi stili di carattere forniscono indizi visivi sull'ordine di lettura del documento. Ad esempio, lo stile del carattere dell'intestazione del documento deve essere in grassetto e significativo rispetto agli altri. Lo stile aiuta anche a distinguere i contenuti importanti dagli altri.
I risultati di apprendimento di questo articolo sono:
- Cosa sono i caratteri web di Google?
- Come importare Google Fonts in HTML?
- Come utilizzare Google Fonts nel file CSS?
Cosa sono i caratteri web di Google?
Google web font è una libreria open source che contiene centinaia di stili o famiglie di caratteri. Fornisce inoltre API che ci aiutano a utilizzare i caratteri Web con Android e CSS. I Google Fonts sono molto più leggeri di altre librerie di font e sono disponibili gratuitamente per uso aziendale. Questi sono più facili da implementare su qualsiasi sito web.
Per impostazione predefinita, i CSS offrono stili di carattere fantasy, serif, sans serif, corsivo e a spaziatura fissa. Google Fonts può essere utilizzato se desideri utilizzare altri stili di carattere.
Come importare Google Fonts in HTML?
Per utilizzare Google Fonts su una pagina HTML, procedi nel seguente modo.
Passaggio 1: selezionare la famiglia di caratteri
Innanzitutto, apri il file Google Font sito ufficiale e selezionare il carattere che ti piace. Ad esempio, abbiamo scelto il ' Aragosta Due ' famiglia di font:
Passaggio 2: selezionare gli stili
Successivamente, scorri verso il basso per visualizzare l'elenco degli stili. Aggiungili alla tua raccolta facendo clic sul pulsante ' + ' cartello:
Passaggio 3: visualizzare le famiglie selezionate
Per visualizzare le famiglie selezionate, cliccare sull'icona evidenziata di seguito:
Passaggio 4: copia il collegamento per incorporarlo nell'HTML
Dopodiché, scorri verso il basso e copia il link di font-family usando il ' evidenziato ' copia ' icona:
Come utilizzare Google Fonts nel file CSS?
Per utilizzare la copia di Google Fonts in CSS per lo styling, passa attraverso gli esempi forniti.
Esempio 1
Includi un ' ” elemento per specificare un contenuto o un paragrafo:
< p > “Il miglior sito web tutorial” p > Per importare i Google Fonts, incolla il codice copiato nel campo '
Elemento stile “p”.
p {famiglia di font: 'L'aragosta due' , corsivo;
text-align: centro;
dimensione carattere: 45px;
colore: RGB ( 64 , 3 , 162 , 0.8 ) ;
}
Le seguenti proprietà CSS spiegate vengono applicate all'HTML ' etichetta ':
- “ famiglia di font ” è assegnato con il valore “ 'Lobster Two', corsivo ”. Questa famiglia di caratteri è importata da Google Fonts.
- “ allineamento del testo ” regola l'allineamento del testo.
- “ dimensione del font ” determina la dimensione del carattere.
- “ colore ” imposta il colore del carattere.
L'immagine mostra che la famiglia di caratteri è stata applicata correttamente:
Esempio 2
Facciamo un altro esempio per importare il ' Nerko Uno 'Carattere Google. A tale scopo, incolla nuovamente il codice per l'URL del font Google 'Nerko One' nel campo '
Elemento stile “p”.
p {famiglia di font: 'Nerko Uno' , corsivo;
font-weight: 300 ;
dimensione carattere: 30px;
}
Il ' famiglia di font ”, “ font-weight ', e ' dimensione del font ” le proprietà vengono applicate all'HTML “ elemento '.
Produzione
Ti abbiamo insegnato come importare i caratteri web di Google nel file CSS.
Conclusione
Per importare Google Fonts in CSS, visita prima il file Google Font sito ufficiale e selezionare lo stile del carattere. Quindi, copia il codice che contiene il ' @importare ' parola chiave e incollala nel file CSS o nella '