Hvordan bruke Google -skrifter i HTML og CSS

Det er mange skrifter tilgjengelig i HTML og CSS, men hvis du ikke er fornøyd med standard HTML/CSS -skrifter og velger noen nye, ferske og siste skrifter, kan du bruke Google Fonts. Google Font er Googles online bibliotek som lar oss bruke forskjellige fontfamilier gjennom CDN (akronym av innholdsleveringsnettverk) som er gratis å bruke for alle.

Denne oppskrivningen vil guide deg i følgende aspekter angående Google-skrifter:

• Trinnvis guide for Google -skrifter
• Hvordan bruke forskjellige Google -skrifter
• Hvordan style Google Fonts

Trinnvis guide for Google -skrifter

For å bruke Google -skriftene må du følge følgende trinn:

Første skritt
Besøk Google Fonts offisielle nettsted, og følgende vindu vises:

Andre trinn
Velg kategori/ fontfamilien etter eget valg:

Tredje trinn
Velg Google Font du velger (e.g. Quintessentia):

Klikk nå på “Velg denne stilen”:

Fjerde trinn
Kopier lenken til den valgte stilen fra vinduet som vises på høyre side av skjermen:

Lim inn lenken i hodeseksjonen i HTML -dokumentet:

Femte trinn
Kopier CSS-reglene for font-family

Og lim den inn i CSS -filen:

Vi ønsker å bruke stilen på

element så vi limer det inn i P -velgeren. Nå får vi følgende utdata:

Utgangen viser at A Google Font “Quintessential” implementeres på

element vellykket.

Hvordan bruke forskjellige Google -skrifter

All prosedyren vil være den samme, velg de flere Google -skriftene, kopier lenken og lim den inn i HTML -filens hodeseksjon:

Html

CSS -skrifter

Første avsnitt

Andre avsnitt

CSS

Nå velger vi to forskjellige Google -skrifter i.e. “Dyforter”, og “Open Sans”, vi ønsker å bruke “dyne” for

element og "åpne sans" for

elementer. Så CSS -en vår vil se slik ut:

H3
Font-family: 'dyne', kursiv;

P
Font-Family: 'Open Sans', Sans-Serif;

I CSS -filen lim inn CSS -reglene i Element Selectors for å style dem i henhold til valget. Det vil gi følgende utgang:

Output beviser at CSS -reglene implementeres med hell på HTML -elementene.

Hvordan style Google Fonts

Ved hjelp av CSS -egenskaper kan vi style Google -skriftene i henhold til vårt valg, vår HTML -fil vil forbli den samme, og CSS -filen vil se slik ut:

CSS

H3
Font-family: 'dyne', kursiv;
fargen rød;
Tekstskygge: 5px 5px 5px #83647e;

P
Font-Family: 'Open Sans', Sans-Serif;
fargen rød;
Tekstskygge: 5px 5px 5px #83647e;

Utgangen fra ovennevnte utdrag vil vises slik:

Konklusjon

For å legge til Google -skrifter, søk etter Google -skrifter, velg Font -kategorien og familien, og velg deretter Font -stilen du ønsker. Når du har valgt skrifttypen, "Kopier fontlenken", fra “Selected Families Windows” og lim den inn i hodeseksjonen i HTML -filen. Deretter kopierer du "CSS -reglene for fonter" lenke "og lim den inn i CSS -velgeren. Styling kan legges til Google -skriftene ved hjelp av CSS -egenskapene.