Legge til egendefinerte skrifttyper på en nettside
Skrifttyper har stor betydning for utseendet og følelsen av et nettsted. Høykvalitets typografi forbedrer lesbarheten og gjør et design mer minneverdig. Mange skrifttyper er gratis å bruke, mens andre krever lisensiering. Husk alltid å respektere opphavsrettsregler.
Google Fonts-tjeneste
Det finnes mange spennende skrifttyper som er gratis å bruke. La oss utforske alternativene som tilbys av https://fonts.google.com/. Det er enkelt å legge til en Google-skrift i markupen.
La oss først kjøre det neste eksempelet, som bruker standardskriften. p-elementet har følgende egenskaper: font-family (skriftnavn), 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 tilpasset skrifttype 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
Fantastisk!
Completion rate forbedret til 2.56Legge til egendefinerte skrifttyper på en nettside
Sveip for å vise menyen
Skrifttyper har stor betydning for utseendet og følelsen av et nettsted. Høykvalitets typografi forbedrer lesbarheten og gjør et design mer minneverdig. Mange skrifttyper er gratis å bruke, mens andre krever lisensiering. Husk alltid å respektere opphavsrettsregler.
Google Fonts-tjeneste
Det finnes mange spennende skrifttyper som er gratis å bruke. La oss utforske alternativene som tilbys av https://fonts.google.com/. Det er enkelt å legge til en Google-skrift i markupen.
La oss først kjøre det neste eksempelet, som bruker standardskriften. p-elementet har følgende egenskaper: font-family (skriftnavn), 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 tilpasset skrifttype 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!
