Legge til egendefinerte skrifttyper på en nettside
Skrifttyper spiller en avgjørende rolle i å forbedre det visuelle uttrykket på en nettside. Designere utvikler mange minneverdige og vakre skrifttyper for å etterlate et varig inntrykk hos brukerne. Nettsider med dårlig utformede skrifttyper kan ha utfordringer med å fange oppmerksomheten. Heldigvis finnes det ressurser som tilbyr gratis tilgang, slik at alle kan bruke forhåndslagde skrifttyper. Det er imidlertid viktig å merke seg at det også finnes lisensierte skrifttyper som krever kjøp, og det er avgjørende å respektere opphavsretten for å unngå brudd.
Google Fonts-tjeneste
Det finnes mange spennende skrifttyper tilgjengelig for gratis bruk. La oss utforske alternativene som tilbys av https://fonts.google.com/. Det er enkelt å legge til en Google-skrifttype i oppmerkingen.
La oss først kjøre neste eksempel, som bruker standardskrifttypen. p-elementet har følgende egenskaper: font-family (skrifttypenavn), font-size (skriftstørrelse) og font-weight (skriftvekt).
index.html
styles.css
Egenskapen font-family fungerer ikke fordi prosjektet vårt ennå ikke kjenner til den tilpassede fonten "DM Sans". La oss legge til fonten i prosjektet ved å bruke https://fonts.google.com/.
I feltet "Search fonts" skriver du inn navnet på fonten du trenger. I dette tilfellet er det "DM Sans." Når den vises, klikker du på kortet for "DM Sans."
På fontens side klikker du på knappen "Get font."
Deretter klikker du på "Get embed code"-knappen.
Til slutt kopierer du lenken og limer den inn i HTML-filen til prosjektet ditt, innenfor <head>-elementet. Det er viktig å sette inn lenken før lenken til dine egne stilark. Dette sikrer at nettleseren først laster inn de tilpassede skriftene før den bruker noen stiler som benytter dem. Når du har lagt til lenken, vil "DM Sans" være tilgjengelig som en egendefinert skrift for prosjektet ditt. La oss nå kjøre prosjektet for å kontrollere at alt fungerer som det skal.
index.html
styles.css
Vi kan observere forskjellen mellom egendefinert skrifttype og standardskrifttype. I tillegg har hver nettleser sine egne standardskrifter. Derfor er det viktig å vite hvordan man bruker egendefinerte skrifttyper på et nettsted.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain how to use the custom font in my CSS after adding the link?
What should I do if the font doesn't appear correctly on my page?
Are there any best practices for choosing and loading web fonts?
Awesome!
Completion rate improved to 2.56Legge til egendefinerte skrifttyper på en nettside
Sveip for å vise menyen
Skrifttyper spiller en avgjørende rolle i å forbedre det visuelle uttrykket på en nettside. Designere utvikler mange minneverdige og vakre skrifttyper for å etterlate et varig inntrykk hos brukerne. Nettsider med dårlig utformede skrifttyper kan ha utfordringer med å fange oppmerksomheten. Heldigvis finnes det ressurser som tilbyr gratis tilgang, slik at alle kan bruke forhåndslagde skrifttyper. Det er imidlertid viktig å merke seg at det også finnes lisensierte skrifttyper som krever kjøp, og det er avgjørende å respektere opphavsretten for å unngå brudd.
Google Fonts-tjeneste
Det finnes mange spennende skrifttyper tilgjengelig for gratis bruk. La oss utforske alternativene som tilbys av https://fonts.google.com/. Det er enkelt å legge til en Google-skrifttype i oppmerkingen.
La oss først kjøre neste eksempel, som bruker standardskrifttypen. p-elementet har følgende egenskaper: font-family (skrifttypenavn), font-size (skriftstørrelse) og font-weight (skriftvekt).
index.html
styles.css
Egenskapen font-family fungerer ikke fordi prosjektet vårt ennå ikke kjenner til den tilpassede fonten "DM Sans". La oss legge til fonten i prosjektet ved å bruke https://fonts.google.com/.
I feltet "Search fonts" skriver du inn navnet på fonten du trenger. I dette tilfellet er det "DM Sans." Når den vises, klikker du på kortet for "DM Sans."
På fontens side klikker du på knappen "Get font."
Deretter klikker du på "Get embed code"-knappen.
Til slutt kopierer du lenken og limer den inn i HTML-filen til prosjektet ditt, innenfor <head>-elementet. Det er viktig å sette inn lenken før lenken til dine egne stilark. Dette sikrer at nettleseren først laster inn de tilpassede skriftene før den bruker noen stiler som benytter dem. Når du har lagt til lenken, vil "DM Sans" være tilgjengelig som en egendefinert skrift for prosjektet ditt. La oss nå kjøre prosjektet for å kontrollere at alt fungerer som det skal.
index.html
styles.css
Vi kan observere forskjellen mellom egendefinert skrifttype og standardskrifttype. I tillegg har hver nettleser sine egne standardskrifter. Derfor er det viktig å vite hvordan man bruker egendefinerte skrifttyper på et nettsted.
Takk for tilbakemeldingene dine!
