Tilføjelse af Brugerdefinerede Skrifttyper til en Webside
Skrifttyper spiller en afgørende rolle i at forbedre det visuelle udtryk på en webside. Designere skaber adskillige mindeværdige og smukke skrifttyper for at efterlade et varigt indtryk hos brugerne. Websites med dårligt designede skrifttyper kan have svært ved at fange opmærksomheden. Heldigvis findes der ressourcer, der tilbyder gratis adgang, så alle kan benytte forudlavede skrifttyper. Det er dog vigtigt at bemærke, at der også findes licenserede skrifttyper, som kræver køb, og det er afgørende at respektere ophavsretten for at undgå overtrædelser.
Google Fonts-tjeneste
Der findes mange spændende skrifttyper til fri afbenyttelse. Lad os udforske mulighederne, der tilbydes af https://fonts.google.com/. Det er enkelt at tilføje en Google-skrifttype til markup.
Lad os først køre det næste 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 at bruge https://fonts.google.com/.
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 klikkes på knappen "Get font."
Klik derefter på knappen "Get embed code".
Kopier 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 websted.
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
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.56Tilføjelse af Brugerdefinerede Skrifttyper til en Webside
Stryg for at vise menuen
Skrifttyper spiller en afgørende rolle i at forbedre det visuelle udtryk på en webside. Designere skaber adskillige mindeværdige og smukke skrifttyper for at efterlade et varigt indtryk hos brugerne. Websites med dårligt designede skrifttyper kan have svært ved at fange opmærksomheden. Heldigvis findes der ressourcer, der tilbyder gratis adgang, så alle kan benytte forudlavede skrifttyper. Det er dog vigtigt at bemærke, at der også findes licenserede skrifttyper, som kræver køb, og det er afgørende at respektere ophavsretten for at undgå overtrædelser.
Google Fonts-tjeneste
Der findes mange spændende skrifttyper til fri afbenyttelse. Lad os udforske mulighederne, der tilbydes af https://fonts.google.com/. Det er enkelt at tilføje en Google-skrifttype til markup.
Lad os først køre det næste 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 at bruge https://fonts.google.com/.
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 klikkes på knappen "Get font."
Klik derefter på knappen "Get embed code".
Kopier 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 websted.
Tak for dine kommentarer!
