Legge til egendefinerte skrifttyper
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 kan brukes gratis. 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/.
Klikk på bildet for å se detaljene tydeligere.
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, klikk på "Get font"-knappen.
Deretter klikker du på "Hent innebyggingskode"-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 fontene 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 font for prosjektet ditt. Nå kan du kjøre prosjektet for å kontrollere at alt fungerer som det skal.
index.html
styles.css
Vi kan observere forskjellen mellom egendefinert font og standardfont. I tillegg har hver nettleser sine egne standardfonter. Derfor er det viktig å vite hvordan man bruker egendefinerte fonter 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
