Tilføjelse af brugerdefinerede skrifttyper
Stryg for at vise menuen
Skrifttyper har stor betydning for udseendet og stemningen på et website. Kvalitetsrig typografi forbedrer læsbarheden og gør et design mere mindeværdigt. Mange skrifttyper er gratis at bruge, mens andre kræver licens; respekter altid ophavsretten.
Google Fonts-tjeneste
Der findes mange spændende skrifttyper til fri afbenyttelse. Lad os undersøge mulighederne fra https://fonts.google.com/. Det er enkelt at tilføje en Google-skrifttype til markup.
Lad os først køre følgende eksempel, som bruger standardskrifttypen. p-elementet har følgende egenskaber: font-family (skrifttypens navn), font-size (skriftstørrelse) og font-weight (skriftens fedhed).
index.html
styles.css
Egenskaben font-family fungerer ikke, fordi vores projekt endnu ikke kender til den brugerdefinerede skrifttype "DM Sans". Lad os tilføje skrifttypen til projektet ved hjælp af https://fonts.google.com/.
Klik på billedet for at se detaljerne tydeligere.
I inputfeltet "Search fonts" indtastes navnet på den ønskede skrifttype. I dette tilfælde er det "DM Sans". Når den vises, klikkes der på kortet for "DM Sans".
På skrifttypens side, klik på knappen "Get font".
Klik derefter på knappen "Get embed code".
Kopiér til sidst linket og indsæt det i HTML-filen for dit projekt inden for <head>-elementet. Det er vigtigt at indsætte linket før linket til dine egne stilarter. Dette sikrer, at browseren først indlæser de brugerdefinerede skrifttyper, før der anvendes nogen stilarter, der bruger dem. Når du har tilføjet linket, vil "DM Sans" være tilgængelig som en brugerdefineret skrifttype til dit projekt. Lad os nu køre projektet for at verificere, at alt fungerer korrekt.
index.html
styles.css
Vi kan observere forskellen mellem brugerdefineret skrifttype og standardskrifttype. Derudover har hver browser sine egne standardskrifttyper. Derfor er det vigtigt at vide, hvordan man bruger brugerdefinerede skrifttyper på et website.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
