Come importare il carattere Web Google in CSS?
Nello sviluppo web, l'uso corretto dello stile dei caratteri fornisce un aspetto attraente all'applicazione. Questi stili di carattere forniscono indizi visivi sull'ordine di lettura del documento. Ad esempio, lo stile del carattere del documento deve essere audace e significativo dagli altri. Lo stile aiuta anche a distinguere contenuti importanti dagli altri.
I risultati di apprendimento di questo articolo sono:
- Quali sono i caratteri Web di Google?
- Come importare i caratteri di Google in HTML?
- Come utilizzare i caratteri di Google nel file CSS?
Quali sono i caratteri Web di Google?
Google Web Font è una libreria open source che contiene centinaia di stili o famiglie di carattere. Fornisce anche API che ci aiutano a utilizzare i caratteri Web con Android e CSS. Google Fonts sono molto più leggeri di altre biblioteche dei caratteri e disponibili gratuitamente per l'utilizzo del business. Questi sono più facili da implementare su qualsiasi sito Web.
Per impostazione predefinita, CSS offre stili di carattere fantasy, serif, sans serif, corsivo e monospaziale. I caratteri di Google possono essere utilizzati se ti piace usare altri stili di carattere.
Come importare i caratteri di Google in HTML?
Per utilizzare Google Fonts in una pagina HTML, seguire i seguenti passaggi.
Passaggio 1: selezionare la famiglia dei caratteri
Innanzitutto, apri il sito ufficiale di Google Fonts e seleziona 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 collezione facendo clic su "+" cartello:
Passaggio 3: visualizza le famiglie selezionate
Per visualizzare le famiglie selezionate, fare clic sull'icona evidenziata di seguito:
Passaggio 4: Copia collegamento a Incorporare nell'HTML
Successivamente, scorrere verso il basso e copiare il collegamento della famiglia del carattere usando il evidenziato "copia" icona:
Come utilizzare i caratteri di Google nel file CSS?
Per utilizzare la copia di Google Fonts in CSS per lo styling, passare attraverso gli esempi dati.
Esempio 1
Includere un " "Il miglior sito di tutorial" Per importare i caratteri di Google, incollare il codice copiato in ""Tag del file HTML: Elemento "P" di stile Seguendo le proprietà CSS spiegate vengono applicate all'HTML " L'immagine mostra che la famiglia dei caratteri viene applicata con successo: Esempio 2 Facciamo un altro esempio per importare "Nerko uno"Google Font. A tal fine, incollare di nuovo il codice per "Nerko One" Google Font URL nel ""Elemento: Elemento "P" di stile IL "famiglia di font","Font-peso", E "dimensione del font"Le proprietà vengono applicate all'HTML" Produzione Ti abbiamo insegnato come importare i caratteri Web di Google nel file CSS. Conclusione Per importare Google Fonts in CSS, visitare prima il sito Web ufficiale di Google Fonts e selezionare lo stile dei caratteri. Quindi, copia il codice che contiene il "@importare"Parola chiave e incollala nel file CSS o in""Elemento del file HTML. Questo studio ha dimostrato la procedura completa di importazione di caratteri Google in un file CSS. @import url ('https: // caratteri.Googleapis.com/css2?famiglia = aragosta+due: itar@1 & display = swap ');
P
Font-Family: 'Lobster Two', Cursive;
Testo-align: centro;
Font-size: 45px;
Colore: RGBA (64, 3, 162, 0.8);
@import url ('https: // caratteri.Googleapis.com/css2?Famiglia = Nerko+One & Family = Oswald: WGHT@500 & Family = Pacifico & Display = Swap ');
P
Font-Family: 'Nerko One', corsivo;
Font-Weight: 300;
Font-size: 30px;