Tilføjelse af Brugerdefinerede Skrifttyper
Stryg for at vise menuen
Skrifttyper har stor indflydelse på udseendet og stemningen af et website. Kvalitetstypografi 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. Udforsk mulighederne via https://fonts.google.com/. Det er enkelt at tilføje en Google-skrifttype til markup.
Start med at køre følgende eksempel, som anvender standardskrifttypen. p-elementet har følgende egenskaber: font-family (skrifttypenavn), 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 at bruge 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 skrifttypen 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 kontrollere, 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
