Hvordan bruke eksterne nettfonter i CSS

Hvis du ønsker å legge til en skrift på nettstedet ditt som ikke er til stede på brukerens datamaskin som standard, kan du bruke CSS @Font-Face Rule for å gjøre det. @Font-face-regelen spesifiserer at du først må oppgi et visst navn til den tilpassede skrifttypen og deretter peke på fontfilen. I denne oppskrivningen vil du etablere en forståelse av hvordan du bruker eksterne nettfonter i CSS. Denne opplæringen dekker følgende emner.

1. Fontformater
2. Hvordan legge til eksterne nettfonter ved hjelp av CSS
3. Fontformater og deres nettleserstøtte.

La oss begynne.

Fontformater

Før vi dykker ned i detaljene om hvordan du legger til eksterne nettfonter, må vi først etablere en grunnleggende forståelse av forskjellige skriftformater som vi har forklart i detalj nedenfor.

Truetype skrifter
Truetype -skrifter eller TTF er et standard skriftformat som ble grunnlagt av Microsoft og Apple tilbake på slutten av 80 -tallet, og det er derfor kompatibelt med begge operativsystemene. Det er veldig egnet for å utvide støtten til gamle nettlesere, spesielt på smarttelefoner.

OpenType skrifter
OpenType -skrifter eller OTF er et skriftformat oppfunnet av Microsoft på de samme mønstrene som for Truetype -skrifter. Dette formatet er mye brukt på de fleste datasystemer.

Web Open Font -format
Woff fontformat oppsto i 2009 som et format som dekker både TTF- og OTF -formatene. Dette formatet komprimerer filene og er kompatibel med alle moderne nettlesere. Den har to versjoner, den andre omtales som woff 2.0 og komprimerer filer på en bedre måte enn den eldre versjonen.

Innebygde OpenType -skrifter
De innebygde OpenType -skriftene, mer ofte referert til som EOT er et format som er en komprimering av OTF utviklet av Microsoft. Dette formatet brukes som innebygde skrifter på nettsteder.

SVG -skrifter
Et SVG Fonts -format tillater å vise SVG i form av vektorgrafikk. Dette betyr at forskjellige karakterer vil bli vist i forskjellige farger eller animasjoner.

Nå som vi har lært om de forskjellige skriftformatene, bør du vurdere trinnene nedenfor for å forstå hele prosedyren for å legge til eksterne skrifter til nettstedet ditt.

Hvordan legge til eksterne nettfonter ved hjelp av CSS

Nedenfor har vi gitt deg en trinn-for-trinns guide om hvordan du kan legge til eksterne skrifter ved hjelp av CSS.

Trinn 1: Last ned tilpassede skrifter

Det første trinnet ville være å laste ned de ønskede skrifter i Truetype -skrifter format (.ttf) eller OpenType -skrifter format (.ofte) fra et hvilket som helst font depot. For eksempel, her laster vi ned "Dancing Script" -fonter fra Google Fonts.

Klikk på 'Last ned familien' for å laste ned tilpassede skrifter.

Trinn 2: Pakk ut filer fra ZIP -mappen

Når du er lastet ned, trekker du ut filer fra ZIP -mappen.

Skriftene er i .TTF -format. Velg nå en av disse skriftene som tilhører 'Dancing Script' fontfamilien.

Merk: Forsikre deg om at de nedlastede filene dine er til stede i samme mappe som nettfilen.

Fontfilen er til stede i nøyaktig samme mappe som nettfilen.

Trinn 3: Legg til skrifter i CSS -filen din

Til dine eksterne skrifter i CSS-filen din, bruk @font-face-regelen. @Font-face-regelen spesifiserer at du først må oppgi et visst navn til den tilpassede skrifttypen og deretter peke på fontfilen ved å gi URL-en til SRC-attributtet.

Vi har tildelt navnet 'CustomFonts' til fontfamilien, så har vi gitt URL-en til fontfilen til SRC-attributtet. Til slutt tildeler vi fontfamilien til overskriften og gir den litt farge.

Trinn 4: Koble CSS -filen din til HTML -filen

Og til slutt, legg til stilarken din i HTML -filen din.

Vi kobler eksternt CSS -filen til HTML -filen.

Produksjon

En ekstern tilpasset nettfont er vellykket lagt til.

Fontformater og deres nettleserstøtte

Tabellen nedenfor viser alle skriftformater og deres relevante nettleserstøtte.

Konklusjon

For å bruke eksterne skrifter i CSS, last ned ønskede skrifter fra et hvilket Egenskap. Denne opplæringen er designet for å forklare om bruk av forskjellige skriftformater og hvordan eksterne nettfonter kan brukes i CSS.